I strongly recommend CSS selectors as the locating
strategy of choice.
CSS selectors are considerably faster than XPath and
can find the most complicated objects in any HTML document.
Additional documentation on CSS selectors is
available on the link below
There are several CSS selectors, but I am going to
introduce you to a few of them as we gradually build our case to more complex
examples.
<html>
<head>
<title>CSS Selectors</title>
</head>
<body>
<h3
id="moduleHeader">Page Module Header</h3>
<div class="primaryContainerModule">
<h4 id="pageSub">Subtitle</h4>
</div>
<form id="pageForm" method="post"
action="process.php">
<input type="text" name="username"
value="" />
<input type="password" name="password"
value="" />
<input type="submit" name="submit button"
value="Submit Form" />
</form>
</body>
</html>
Element selectors use the name of the element to
locate the element.
In the above document, we can target the subtitle by
using the following CSS selector
css=h4
We can also target the page module by using the
following css selector
css=h3
ID Selectors (CONTAINS HASH OR POUND SIGN)
ID selectors use place a hash or pound sign in front
of the id value of that element
In the above document, we can target the subtitle by
using the following CSS selector
css=#pageSub
We can also target the page module by using the
following css selector
css=#moduleHeader
Class selectors place a dot in front of the class
attribute value of that element
In the above document, we can target the primary container
by using the following CSS selector
css=.primaryContainerModule
Class Selectors Multiple (CONTAINS DOTS)
<input type="checkbox"
class="europe asia africa" value="Continent" />
If the element has multiple classes, you can target
it by specifying the classes concatenated using dots
css=.europe.asia.africa
Sometimes when a particular selector matches more
than one element, you may need to combine selectors to clarify things
Here is some of that syntax
css=div#party
In the above example, we are combining the div
element selector with the party id selector
css=div.party
In the above example, we are combining the div
element selector with the party class selector
We can also select certain elements that have
certain attribute values.
In the form above, we can target the submit button
by using the following syntax.
css=input[type=submit]
<input type="text" class="europe
asia africa" value="Continent" />
<input type="text" class="europe
asia africa" value="Company" />
<input type="checkbox"
class="europe asia africa" value="Continent" />
<input type="checkbox"
class="europe asia africa" value="Company" />
<input type="hidden" class="europe
asia africa" value="Continent" />
In the above example, if we wanted to target the
checkbox with value Continent, we can use the following selector:
css=input[type=checkbox][value=Continent]
This type of selectors are using to access elements
located with other elements when the locator can hit multiple matches
A space is needed between each selector leading to
the target from the ancestor to the descendant going from left to right
In the HTML source below, we can use the descendant
selectors to distinguish between the Page Module Header and the Subtitle for
and automation engineer.
If we want to target the h3 element for the subtitle
for an automation engineer, we cannot use css=h3 because selenium will stop the
search once it comes across the Page Module Header h3 element.
Selenium will always stop the search as soon as it
finds the first match. So we need to be more specific by using descendant
selectors.
Using the following CSS selector will allow us to
distinguish between the Page Module Header and the Subtitle for an Automation
Engineer.
css=div.primaryModuleContainer
div.automationEngineer h3
<html>
<head>
<title>CSS Selectors</title>
</head>
<body>
<div>
<h3>Page Module Header</h3>
</div>
<div class="primaryContainerModule">
<video width="320" height="240"
controls="controls"></video>
<div class="softwareEngineer">
<h3>Subtitle</h3>
</div>
<div
class="qualityAssuranceEngineer">
<h3>Subtitle</h3>
</div>
<div class="automationEngineer">
<h3>Subtitle</h3>
</div>
<div>
<video width="320" height="240"
controls="controls"></video>
<div>
</div>
</body>
</html>