How to find out DOM and CSS address to an element for Selenium?

Question

I have a following element (Login box):

<input type="text" style="font-family: Verdana; font-size: 11px; width: 180px;" id="ctl00_Content_ctl00_Login2_UserName" maxlength="50" name="ctl00$Content$ctl00$Login2$UserName">

Because I have a Firebug, if I right click on on the element it gives me XPath address (//*[@id="ctl00_Content_ctl00_Login2_UserName"]).

As per Selenium website, I am suppose to be able to click on the element also by DOM and by CSS. How do I do it? Is there an easy tool (browser add-on) available for this purpose? I just don't want to be limited by id and xpath alone.

Answer 1

CSS locator would be

css=#ctl00_Content_ctl00_Login2_UserName

DOM Locator would be

dom=document.getElementById('ctl00_Content_ctl00_Login2_UserName')

Answer 2

Another way of formulating the css identifier would be:

css=input[id=ctl00_Content_ctl00_Login2_UserName]

If you are using the IDE, formulate the identifier and click the "Find" button to ensure the IDE (and RC, in turn) can access the UI element.

Answer 3

You can use firepath. This is a firebug extension and is really good in formulating CSS locators.

Answer 4

In Selenium, a better way to choose elements for asp.net (prior to 4.0) websites is to use an xpath like:

//input[contains(@id,'UserName')]

If you specify the full id as recommended elsewhere, your locator will fail as soon as you wrap the control inside another panel. Of course, your xpath could also fail if you have another input with an id containing UserName, but this is much less likely than you adding another panel wrapper (in a masterpage, for example).

In regards to always using id, the answer is no. You can use many other types of selectors, and there's no need to use ids in most of them.

See Selenium reference and scroll down to where it says "Element Locators" for other types of selectors you can use.