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>
- Start Firebug by using the bug icon on the right bottom corner in the Firefox window.
- Click on the
Inspectbutton on Firebug’s toolbar.
- Move around the page and everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.
- Pinpoint the list element on the web page.
- Find the unique identifier name.
Construct your CSS-locator to select the second item, like this:
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:
Another way to select an option is by using the pseudo-class
css=select#dropdown option:contains("Selenium GRID")
Note; The pseudo-class
:containswas dropped from CSS3, but is still implemented in Selenium, and JQuery