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.
(a)
Element Selectors
(b)
ID Selectors
(c)
Class Selectors
<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
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 (CONTAINS DOTS)
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
COMBINING
SELECTORS
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
SELECTING
ELEMENTS WITH CERTAIN ATTRIBUTES
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]
SELECTING
ELEMENTS USING MULTIPLE ATTRIBUTES
<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]
DESCENDANT
SELECTORS
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>
No comments:
Post a Comment