Selecting a LI element from Dropdown - coded-ui-tests

Question

I'm having problems with my data driven coded-ui test. I'm supposed to replace the info typed in the test with csv data.
I can succesfully replace login and password inputs with the csv data.. but I'm failing to replace a selected LI in the test with it's csv data.
I don't know how to select the LI since it seems to be a custom generated control element but I may be drifting.
The HTML looks like this:
<div id="cphCont_cphContAut_ddlTipoJur" class="ComboAzul" style="display:inline-block;">
<table id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline-block;position:relative;top:5px;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="ctl00$ctl00$cphCont$cphContAut$ddlTipoJur$ddlTipoJur_TextBox" id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_TextBox" tabindex="3" autocomplete="off" style="width: 260px; margin: 0px;" type="text">
</td>
<td class="ajax__combobox_buttoncontainer">
<button style="height: 18px; width: 18px; margin: 0px; padding: 0px; visibility: visible;" id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_Button" type="button"></button>
</td>
</tr>
</tbody>
</table>
<ul id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow: hidden; width: 310px; position: absolute; height: 133px; left: 638px; top: 425px; display: none;">
<li style=""> </li>
<li style="">Cons / Ou</li>
<li style="">Coop</li>
<li style="">Empr Ind</li>
<li style="">Req E</li>
<li>Soc A</li>
<li>Soc E</li>
</ul>
<input name="ctl00$ctl00$cphCont$cphContAut$ddlTipoJur$ddlTipoJur_HiddenField" id="cphCont_cphContAut_ddlTipoJur_ddlTipoJur_HiddenField" value="0" type="hidden">
</div>
In the UIMap.Designer.cs the UL ( I believe ) look like this:
[GeneratedCode("Coded UITest Builder", "12.0.21005.1")]
public class UICphCont_cphConteCustom : HtmlCustom
{
public UICphCont_cphContCustom(UITestControl searchLimitContainer) :
base(searchLimitContainer)
{
#region Search Criteria
this.SearchProperties["TagName"] = "UL";
this.SearchProperties["Id"] = "cphCont_cphContAut_ddlTipoJur_ddlTipoJur_OptionList";
this.SearchProperties[UITestControl.PropertyNames.Name] = null;
this.FilterProperties["Class"] = "ajax__combobox_itemlist";
this.FilterProperties["ControlDefinition"] = "class=\"ajax__combobox_itemlist\" id=\"cphC";
this.FilterProperties["TagInstance"] = "1";
this.WindowTitles.Add("Test");
#endregion
}
Selected LI element looks like this:
public HtmlCustom UISocaCustom
{
get
{
if ((this.mUISocaCustom == null))
{
this.mUISocaCustom = new HtmlCustom(this);
#region Search Criteria
this.mUISocaCustom.SearchProperties["TagName"] = "LI";
this.mUISocaCustom.SearchProperties["Id"] = null;
this.mUISocaCustom.SearchProperties[UITestControl.PropertyNames.Name] = null;
this.mUISocaCustom.FilterProperties["Class"] = null;
this.mUISocaCustom.FilterProperties["ControlDefinition"] = null;
this.mUISocaCustom.FilterProperties["InnerText"] = "Soc A";
this.mUISocaCustom.FilterProperties["TagInstance"] = "6";
this.mUISocaCustom.WindowTitles.Add("tEST");
#endregion
}
return this.mUISocaCustom;
}
}
The code I'm using to replace the login and password with the csv data is :
public void MetdG()
{
this.UIMap.TesterParams.UITxtLoginEditText = TestContext.DataRow["login"].ToString();
this.UIMap.TesterParams.UITxtSenhaEditPassword = Playback.EncryptText(TestContext.DataRow["senha"].ToString());
this.UIMap.Tester();
// To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
}
Any idea on how to proceed ?
Edit : As instructed by Ryan Cox
It was created a static class to hold the browser window :
[CodedUITest]
public static class GlobalVars
{
public static BrowserWindow myWindow;
}
Test Initializer method was edited to match this change :
[TestInitialize()]
public void BrowserStarter()
{
GlobalVars.myWindow = BrowserWindow.Launch(new Uri("www.google.com"));
}
MainG method was edited so the window could execute the script :
GlobalVars.myWindow.ExecuteScript("var xpath = li[text()='Soca'];var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;);matchingElement.innerHTML = arguments[0];", TestContext.DataRow["type"].ToString());
Now the problem is that the script is throwing an exception. I believe it's because it's searching for the element before it exists ( The test goes thru 2 or 3 pages before this point )

Answer 1

What you're trying to do is change the inner html on a list item, not enter text as you would in your <input> elements, so you'll need to execute a script to do this and modify the DOM. Since it's not a normal action for a user (click on this, enter text there, expand this combo box, etc.), you'll have to use javascript to complete it.
browserWindow.ExecuteScript("var elements = document.getElementsByTagName('li')
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.indexOf("Soc A") !== -1) {
elements[i].innerHTML = arguments[0];
break;
}
}", TestContext.DataRow["type"].ToString());
//Comment to fill space
Of course, if you had an id on your list items, this would be even easier:
browserWindow.ExecuteScript("document.getElementById("Soc A list item").innerHTML = arguments[0];", TestContext.DataRow["type"].ToString());

Answer 2

Major props to Ryan Cox for all the help he provided yesterday !
The issue got solved with by adding this line of code :
this.UIMap.TestWindow.TestDocument5.UIContCustom.UISocaCustom.
SearchProperties[HtmlCustom.PropertyNames.InnerText] =
TestContext.DataRow["type"].ToString();
Being TestDocument5 the 5th page in the test ( as intended ), UIContCustom the UL element and UISocaCustom the custom HTML element the test generated.
It is worth noting that trying to change the value of InnerText through GetProperty will fail since it will spit out a read-only message.