Locators are the way to tell Selenium with which web element we like to do something (Something can be anything, like: clicking, typing, selecting, etc.).

Selenium provides different ways of locating those web elements, we call this the locating strategy. In Selenium we can locate web elements by CSS, XPath, Name, Id, and even Link text. We have to define the locators our self, so we have full control over it.

I like to recommend the CSS locating strategy for three reasons:

1. It’s faster;
2. It’s more readable;
3. It’s more used;

It depends on the browser, but in Internet Explorer the XPath locators are 2 (up to 3) times slower then CSS locators. It requires very low maintenance, because the syntax is readable and understandable. Beside of that, CSS locators are more used in projects, for example by designers or jQuery experts (frequently used JavaScript library).

This section of the blog will describe different ways of locating web elements, from very basic web elements (such as: form elements and containers) to the more complex ones (such as: list items and table cells). Related posts are listed below.

In this example we will see how to locate the nth HTML element of a type. This can be useful if a couple of elements are housed under a “main” element. With this pattern you can select for example the third div-container on a web page. You can check the presence of an element or locate the inner text of it.

Example HTML:

<div id="overview">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

1
2
3
4
5
6
7
8

<div id="overview">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Getting the locator:

1. Open the Application under test in Firefox, where Firebug has been installed.
2. Click on the “Inspect” button on Firebug’s toolbar and move around the page.
3. Everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.
4. Think of which item number you want to select. In this case number 3.

Result:

css=div#overview div:nth(3)

In this example we will see how we can locate HTML elements based on their inner text. This can be quite useful for ‘search’ related test cases, whereby you want to verify is a certain text is visible on the webpage. This pattern verifies if there are matches based on the inner text. It can be used to pass or fail a test case.

Example HTML:

We will use the following HTML in this example:

<div id="paragraphs">
      <p>Selenium IDE</p>
      <p>Selenium / WebDriver</p>
      <p>Selenium Core</p>
      <p>Selenium GRID</p>
</div>

1
2
3
4
5
6

<div id="paragraphs">
      <p>Selenium IDE</p>
      <p>Selenium / WebDriver</p>
      <p>Selenium Core</p>
      <p>Selenium GRID</p>
</div>

Getting the locator:

1. Open the Application Under Test in Firefox, where Firebug has been installed.
2. Click on the “Inspect” button on Firebug’s toolbar and move around the page.
3. Everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.
4. Think of which text you want to match.

Result:

css=div#paragraphs p:contains('Selenium / WebDriver')

What has been done:

We are locating the element with the paragraphs inside and we are locating the paragraph with the text “Selenium / WebDriver” inside.

Problem

In the past HTML tables were used to structure (lay-out) the entire page. There are many disadvantages by using tables, like they use more bytes of markup, they prevent incremental rendering, tables break text while copying, implementing table based layout takes more time, and so on… Fortunately, the switch was made to use div containers to structure the layout and tables to represent data, like in Microsoft Excel.

Tables are defined in HTML with the <table> tag. A table consist of columns and rows. Columns are defined with the <td> tag and row are defined with the <tr> tag. In this example we will locate some cells of the following table.

<table id="simpleTable" border="1">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<table id="simpleTable" border="1">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

Solution

We will see how we can locate each table cell.

Locate table cell 1: css=table#simpleTable tbody tr:nth(1) td:nth(1)

Locate table cell 2: css=table#simpleTable tbody tr:nth(1) td:nth(2)

Locate table cell 3: css=table#simpleTable tbody tr:nth(2) td:nth(1)

Locate table cell 4: css=table#simpleTable tbody tr:nth(2) td:nth(2)

What has been done

The table structure is useful to walk through the table to locate the required table cell. (like XPath does for XML)

There is more

Sometimes developers are making the distinction between the header, footer and body. If so, you will see:

<table id="complexTable" border="1">
  <thead>
    <tr>
      <th>Testcase</th>
      <th>Pass/Fail</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td>1 passed / 1 failed</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Testcase 1</td>
      <td>Failes</td>
    </tr>
    <tr>
      <td>Testcase 2</td>
      <td>Passed</td>
    </tr>
  </tbody>
</table>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<table id="complexTable" border="1">
  <thead>
    <tr>
      <th>Testcase</th>
      <th>Pass/Fail</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td>1 passed / 1 failed</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Testcase 1</td>
      <td>Failes</td>
    </tr>
    <tr>
      <td>Testcase 2</td>
      <td>Passed</td>
    </tr>
  </tbody>
</table>

Locate body table cells We will locate the value in the third row from the first column. css=table#complexTable tbody tr:nth-child(2) td

We will locate the value in the second row from the second column. css=table#complexTable tbody tr td:nth-child(2)

Locate header table cells We will locate the column name of the second column. css=table#complexTable thead tr th:nth(2)

Locate footer table cells We will locate the footer value in the second column. css=table#complexTable tfoot tr td:nth(2)

Problem

Sibling elements do have something special in common, saying they share the same parent. We can use this type of selectors if one of the sibling doesn’t have an unique identifier.

Prerequisites

Open the application under test (AUT) in the Firefox browser. The following HTML code is used for this locator example:

<div class="recipe">
    <p id="firstChapter">
        Paragraph with identifer
    </p>
    <p>
        Paragraph without identifier
    </p>
</div>

1
2
3
4
5
6
7
8

<div class="recipe">
    <p id="firstChapter">
        Paragraph with identifer
    </p>
    <p>
        Paragraph without identifier
    </p>
</div>

Solution

1. Start Firebug by using the bug icon on the right bottom corner in the Firefox window.
2. Click on the “Inspect” button on Firebug’s toolbar.
3. Move around the page and everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.
4. Pinpoint the paragraph with identifier.
5. Find the unique identifier name.
6. Construct the CSS-locator to select the first item, like this: css=p#firstChapter Construct the CSS-locator to select the second item, like this: css=p#firstChapter + p

Problem

Some websites will render dynamically the web elements (like: ASP.NET). It can be a challenge to locate those web elements. There are a couple of ways to locate those web elements. In this example we will see how to locate web elements by a part of their identifier.

Prerequisites

Open the application Under Test (AUT) in the Firefox browser. Given the following elements: An ASP.NET rendered web element:

<span id="ctl00_header">Some Title</span>

1

<span id="ctl00_header">Some Title</span>

A web element with a incremental number:

<p id="text-55">Some Title</p>

1

<p id="text-55">Some Title</p>

Solution

1. Start Firebug by using the bug icon on the right bottom corner in the Firefox window.
2. Click on the “Inspect” button on Firebug’s toolbar.
3. Move around the page and everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.
4. Pinpoint the paragraph with identifier.
5. Find the unique identifier name.
6. Construct your CSS-locator to select the ASP.NET element, like this:

css=span[id*="header"]

1

css=span[id*="header"]

1. Construct your CSS-locator to select the incremental element, like this:

css=p[id^="text"]

1

css=p[id^="text"]

What has been done

* means the attribute value should contain the specified value.

^ means the attribute value should start with the specified value.

Problem

Sometimes the HTML code of an given application is really unstructured and unreadable. That makes it hard to locate the web elements. Therefore it could be useful to validate the located element to see if it is the right one. We can use the features of Selenium IDE for this.

Prerequisites

ready Open the application under test (AUT) in Mozilla Firefox and start

Firebug.

Solution

1. Pinpoint an element on the webpage using firebug.
2. Construct the locator. (using your own strategy, like CSS or Xpath)
3. Start Selenium IDE. (In Firefox: Tools -> Selenium IDE)
4. Right click in the test case pane and the Selenium IDE context menu will be visible like in the image below.
5. Click on Insert New Command.
6. Select the Highlight command from the command drop-down menu.
7. Insert the constructed locator in the target text field.
8. Run the test that you have created and the located element should be highlighted.

What has been done

Selenium IDE will use the locator to find the web element in the HTML structure. If Selenium succeeds to find the web element, then it will highlight it. From now you are able to evaluate the constructed locator.