Hiya testers! I am back and it’s game on! Let us go ahead and locate some wacky elements on our web pages!!

In this post, we will see:

Locating by

• CSS
• DOM
• XPath

Let’s look at these one by one.

Locating by CSS

CSS (Cascading Style Sheets) adds style to the webpage and it is usually used to describe the presentation or rendering of the HTML documents. For binding these style properties to the elements in the document, CSS Selectors are used. These Selectors are used to select the HTML elements based on the combination of their name, id, class, attribute etc.

Usually advanced Selenium users go by this method to locate elements on the webpage. It is bit more complicated but preferred mostly when the element has no Id or name.

The format for specifying target begins with the label “css=”, followed by the corresponding tag name and other required elements. Let us appreciate the greatness of locating elements using the most commonly used CSS Selectors.

-Tag and Id

HTML tag and the Id of the element are used with a hash (#) sign.

Format: css=tag#Id

Example: Open Amazon’s Sign in page. Let us locate “Email (phone for mobile accounts)” text box.

Here tag name is ‘input’ and the id of the element is ‘ap_email’.

Hence as per the Target format, entering “css=input#ap_email” and clicking the find button will highlight the Email textbox on the web page as expected.

-Tag and Class

HTML tag and the class of the element being accessed are used in this method along with a dot (.) sign.

Format: css=tag.class

Example: Open Indeed.com and let us highlight the text “what”.

Here tag name is ‘td’ and the class of the element is ‘npb’.

Entering “css=td.npb” and clicking the find button will highlight the text ‘what’ as expected. If multiple elements have the same tag and class name, then only the first element that matches the criteria will be recognized. Filters have to be used in such cases. This concept is explained in detail in the previous blog post.

-Tag and Attribute

HTML tag and preferably a unique attribute of the element being accessed along with its corresponding value are used in this method. Attribute and value are enclosed by square brackets [].

Format: css=tag[attribute=value]

Example: Open amazon sign in page and let us locate ‘Email’ text box.

Here tag name is ‘input’, the attribute is ‘name’ and its corresponding value is ‘email’.

Entering “css=input[name=email]” for Target and clicking the find button will highlight the ‘Emal’ text box as expected.

-Tag, Class and Attribute

This is similar to Tag and Attribute locating strategy but along with a class name and a dot (.) sign. Used mostly when two web elements have same tag and class name.

Format: css=tag.class[attribute=value]

Example: Open facebook.com and let us locate ‘Email or Phone’ text box.

Note from the below image that both ‘Email’ and ‘Password’ textboxes have same tag ‘input’ and a same class name ‘inputtext’ but different values for the attribute ‘tabindex’.

Hence with tag name is ‘input’, class ‘inputtext’, attribute ‘tabindex’ and its corresponding value as ‘1’ will highlight the “Email or Phone” textbox. Same combination with the attribute value as ‘2’ will highlight the “Password” textbox.

Entering “css=input.inputtext[tabindex=1]” highlights the “Email or Phone” textbox as expected.

-Inner text

There are cases when an id, class or attribute is not used for a particular element. To locate such elements, the actual text that are shown on the web page (inner text) can be used.

Format: css=tag:contains(“inner text”)

Example: Open amazon sign in page and let us highlight the text “Password”.

Tag here is ‘label’ and the Inner text is ‘Password’. Entering “css=lable:contains(“Password”)” highlights the text “Password” as expected.

Locating by DOM

Document Object Model is a convention used to represent elements in a HTML document. The location strategy takes advantage of the tree structure used in DOM model. Hence the element’s location is obtained using the hierarchical dotted notation.

When specifying a DOM locator, “dom=” label is not required since only DOM locators start with the word “document”.

Example code:

Method 1: document.getElementById(“testForm”) – Id of the element is used.

Method 2: document.forms[0] – ‘forms’ will return a collection of all the forms used in the document. Hence an index is used to specify the element under test in a unique manner.

Method 3: document.forms[0].user1 – In first form, the user1 element is accessed.

Method 4: document.getElementsByName(“seatingClass”)[1] – ‘getElementsByName’ will also return a collection of elements with the same name specified within the parenthesis. Hence an index returns the required element. In this case, business radio button can be accessed. If index [0] was used, then economy radio button can be accessed.

Method 5: document.forms[“testForm”].elements[“user2”] – user2 of the form named ‘testForm’ is accessed.

Method 6: document.forms[1].elements[2] – This will return ‘first’ radio button in ‘seatingClassForm’.

Now it’s time for you to explore the DOM of your web application using Selenium IDE.

Locating by XPath

XPath is a syntax used to navigate and locate nodes in an XML document. Since HTML is just an implementation on XML, XPath strategy can be used to locate required elements.

When suitable Id, name or class etc. are not available for locating an element, XPath can be used. There are two types of locating an element using XPath. One is an absolute path (not recommended) as it would break with the slightest change to the existing HTML code. The other option is a relative path – find a nearby element with Id or name and locate the required elements with XPath using a relationship between the two. Hence nearly any element on the web page can be located using the XPath strategy.

This locating strategy is quite complex and is usually preferred by advanced Selenium users. But don’t worry! To make this whole XPath finding method easy, we have ‘Firebug’ as an add-on to Firefox browser. Very soon you will run into a blog post that is entirely dedicated to the installation and usage of Firebug! Hurray!!

Also, since only XPath locators start with “//”, it is not required to specify “xpath=” for XPath locators.

Example: Open Amazon signs in page and let us locate the ‘Email’ text box with XPath.

Click on the Firebug icon and inspect the required element (‘Email’ textbox in our case). The corresponding source code will be displayed in the lower section of the web page.

Right click on the highlighted code and select ‘Copy XPath’ as shown below.

In the Target, type a forward slash (/) and then paste the copied XPath using Firebug, “/html/body/div[1]/div[1]/div[3]/div/div[2]/form/div/div/div/div[1]/input”. Note that the XPath locator should start with two forward slashes.

Thus the ‘Email’ textbox is highlighted as expected.

There you go! We just finished going through different locating strategies available. And yes, the locator type to be chosen, depends purely on the application which is being tested.

After incorporating so much into your brain, I know you are going to ask me a six-month vacation twice a year. So, see you again in another post.

Have a nice day!