Locating child elements

A frequently used element which can have children is the list element. There are different kinds of list elements, like: definition list <df>, ordered list <ol> and unordered list <ul>. Each list item below the list element opening tag should be surrounded with <li> for the opening tag and </li> for the closing tag. The following HTML code is used for this locator example:

<ul id="list">
  <li>Selenium IDE</li>
  <li>Selenium WebDriver</li>
  <li>Selenium Grid</li>a
</ul>
 

In practice

  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 list element on the web page.
  5. Find the unique identifier name.
  6. Construct your CSS-locator to select the second item, like this:

    css=ul#list li:nth-child(2)

Locating drop-down list options

A frequently used form element is the drop-down list to collect predefined user input. Within the <option> tag the available options are represented. In this example we will see how to locate an option based on the index-number and we will see how to select an option based on the text it contains. Given the following code:

    <select id="dropdown">
      <option>Selenium IDE</option>
      <option>Selenium WebDriver</option>
      <option>Selenium GRID</option>
    </select>

We can construct the following CSS-locator to locate the second option:

css=select#dropdown option:nth-child(2)

Another way to select an option is by using the pseudo-class :contains:

css=select#dropdown option:contains("Selenium GRID")

Note; The pseudo-class :contains was dropped from CSS3, but is still implemented in Selenium, and JQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.