Ext JS concealing text field contents from HTML and Selenium

Question

I've been writing test automation (in Selenium2 Java, Firefox 3.6) of an application that uses a lot of ExtJS. I have been able to work around the mighty morphing element ids pretty well, but on one page the code behavior has me stumped. There is a text field where a username can be set. It isn't clickable until the edit button is clicked, and then Firebug can find the text field. If text is entered and then saved, the text is visible on the page but it does not appear anywhere in the HTML code. Even if the edit button is clicked again to make the text field accessible, I can't get the value of the text field. This is the code for the label and text field in edit mode:

<div class="x-form-item " tabindex="-1">
<label class="x-form-item-label" style="width: 250px;" for="ext-comp-1022">Interface Username:</label>
<div id="x-form-el-ext-comp-1022" class="x-form-element" style="padding-left: 255px;">
<input id="ext-comp-1022" class=" x-form-text x-form-field " type="text" name="interfaceUsername" autocomplete="off" size="20" style="width: 292px;">
</div>

Note that the label "Username:" displays in the HTML as expected, but there's nothing for the textfield itself. I'm suspecting that a javascript call is getting and displaying the text in the text field, but I'm not at all familiar with ExtJS. I checked out this post but it did not apply to getting text, mostly just the changing ID problem. So, I would like to understand how to figure out what script is being called, and how to use executeScript to grab the textfield text with it. I'm able to enter text in the field with Selenium, save it with Selenium, and see it on the page by eyeball so I'm not having problems with the Selenium code itself locating the element.

Thanks, Sabrina

Answer 1

I still don't know how to determine what script is being called, but with the advice of a helpful coworker I came up with this workaround:

String userid=driver.findElementByName("interfaceUsername").getAttribute("id");
String username=(String)js.executeScript("return Ext.getCmp('"+userid+"').getValue()");

With the name of the element I get the id (whatever it is that day) and then I call executeScript to find out what the text field value is. It lacks elegance but then ExtJS does not promote elegance.

Answer 2

There must be a value attribute for the field username. So in firebug, select the Username field and on the right hand side, select the DOM option. There must be a value attribute that has the username. Try something like below, let's say your WebElement is username.

String user = username.getAttribute("value");