Chapter 2: Finding Elements
2.1 Using browser tools for inspecting elements and page structure
copy XPath or copy CSS Path with developer Tools
2.2 Finding an element using the findElement method
| Strategy | Syntax | Description |
|---|---|---|
| By ID | driver.find_element_by_id(<elementID>) | This will find element(s) using the ID attribute |
| By Name | driver.find_element_by_name(<element name>) | This will find element(s) using the Name attribute |
| By Class Name | driver.find_element_by_class_name(<element class>) | This will find element(s) using the Class attribute value |
| By Tag name | driver.find_element_by_tag_name(<htmltagname>) | This will find element(s) using its HTML tag |
| By Link text | driver.find_element_by_link_text(<linktext>) | This will find link(s) using its text |
| By Partial Link text | driver.find_element_by_partial_link_text(<linktext>) | This will find link(s) using the link's partial text |
| By CSS | driver.find_element_by_css_selector(<css selector>) | This will find element(s) using the CSS selector |
| By XPath | driver.find_element_by_xpath(<xpath query expression>) | This will find element(s) using the XPath expression |
2.2.1 Finding elements by the ID attribute
search_field = driver.find_element_by_id("q")
2.2.2 Finding elements by the Name attribute
search_field = driver.find_element_by_name("q")
2.2.3 Finding elements by the Class attribute
search_field = driver.find_element_by_class_name("search-input")
The WebElement interface also supports find methods that find child elements
search_field = driver.find_element_by_class_name("search").find_element_by_id("q")
2.3 Finding elements using the findElements method
products = driver.find_elements_by_xpath("//h2[@class='product-name']/a")
2.4 Finding links
2.4.1 Finding a link by its text
button = driver.find_element_by_link_text("下载App")
print(button.get_attribute("href"))
2.4.2 Finding a link by partial text
This method is useful where developers create links with dynamic text
button = driver.find_element_by_partial_link_text("App")
print(button.get_attribute("href"))
2.5 Finding elements by tag name
button = driver.find_element_by_class_name("app-download-btn").find_element_by_tag_name("span")
2.6 Finding elements using XPath
Basic XPath terminology
<html>
<head>
<title>My Book List</title>
</head>
<body>
<h1>My Book List</h1>
<div>
<table class="main-list">
<tr>
<td>Title</td>
<td>Author</td>
<td>Publication Year</td>
<td>Price</td>
<td>Book Page</td>
</tr>
<tr id="book_1">
<td>XML Developer's Guide</td>
<td>Gambardella, Matthew</td>
<td>Publication Year</td>
<td class="price">44.95</td>
<td><div class="desc">An in-depth look at creating applications
with XML.</div></td>
<td><a href="/book_1.html">
<img src="/img/book1_png/" alt="XML Developers Guide">
</a></td>
</tr>
</table>
</div>
</body>
</html>
| Term | Description |
|---|---|
| Nodes | DOM represents an HTML document as trees of nodes. Here are examples of nodes from the previous HTML document: ->html: This is the root element node ->title: This is the element node ->id="book_1": This represents the attributes and values The topmost element of the tree is called the root node or element. |
| Atomic Values | Atomic values are nodes with no children or parents. For example: ->Gambardella, Matthew ->XML Developer's Guide ->44.95 |
| Parents | Each element and attribute has one parent. For example, the body element is the parent of div. Similarly, div is the parent of the table element. |
| Children | Element nodes may have zero, one, or more children. For example, there are two tr elements, which are children of the table element. |
| Siblings | Nodes that have the same parent. For example, h1 and div are all siblings and their parent is the body element. |
| Ancestors | A node's parent, parent's parent, and so on. For example, ancestors of the table element are div, body and html. |
| Descentdants | A node's children, children's children, and so on. For example, the descendants of the table element are tr, td and div. |
2.6.1 Selecting nodes
| Expression | Description |
|---|---|
| nodename | This will select all nodes with the name "nodename". For example, table will select all the table elements. |
| /(slash) | This will select element(s) relative to the root element. For example: ->/html: This will select the root HTML element. A slash(/) is used in the beginning and it defines an absolute path. ->html/body/table: will select all table elements that are children of HTML. The slash(/) is used at the start of a code element, and it defines an absolute path. It defines ancestor and descendant relationships if used in the middle; for example, //div/table returns the div containing a table object. |
| //(double slash) | This will select node(s) in the document from the current node that match the selection irrespective of its position. For example: ->//table will select all the table elements no matter where they are in the document ->//tr//td will select all the td elements ->//a//img will select all the img elements that are children of the "a"(anchor) element Double slash(//) defines a descendant relationship if used in the middle; for example, /html//title returns the title element that is descendant of the html element. |
| .(dot) | This represents the current node. |
| ..(double dot) | This will select the parent of the current node. For example, //table/.. will return the div element. |
| @ | This represents an attribute. For example: ->//@id: This will select all the elements where the id attribute are defined no matter where they are in the document ->//img/@alt: This will select all the img elements where the alt attribute is defined |
2.6.1 Finding elements with an absolute path
area = driver.find_element_by_xpath("/html/body/nav")
2.6.2 Finding elements with a relative path
locate the first nav
area = driver.find_element_by_xpath("//nav")
2.6.3 Finding elements using predicates
A predicate is embedded in square brackets and is used to find out specific node(s) or a node that contains a specific value
button = driver.find_element_by_xpath("//a[2]")
2.6.4 Finding elements using attributes values with XPath
button = driver.find_element_by_xpath("//a[2]")
the same as below:
button = driver.find_element_by_xpath("//a[@id='web-nav-app-download-btn' and @class='app-download-btn']")
the use of or:
button = driver.find_element_by_xpath("//a[@id='web-nav-app-download-btn' or @class='app-download-btn']")
2.6.5 Finding elements using attributes with XPath
button = driver.find_element_by_xpath("//a[@id]")
not function
button = driver.find_element_by_xpath("//a[not(@id)]")
Other XPath functions:
| Syntax | Example | Comments |
|---|---|---|
| starts-with() | a[starts-with(@id,'web')] | |
| ends-with() | a[ends-with(@id,'btn')] | sometimes no use |
| contains() | a[contains(@id,'btn')] |
The
ends-withfunction is part of XPath 2.0 but browsers generally only support 1.0. You can usecontainsor the following method:
//a[substring(@id,string-length(@id) - string-length('btn')+1)='btn']
2.6.6 Matching any attribute using a value
XPath matches the attribute for all the elements for a specified value and returns the element.
button = driver.find_element_by_xpath("//a[@*='app-download-btn']")
More examples of using XPath predicates to find elements using their position and contents:
| Expression | Description |
|---|---|
| /table/tr[1] | This will select the first tr element that is the child of the table element. |
| /table/tr[last()] | This will select the last tr element that is the child of the table element. |
| /table/tr[last()-1] | This will select the second last tr element that is the child of the table element. |
| /table/tr[position() < 4] | This will select the first three tr elements that are child of the table element. |
| //tr[td>40] | This will select all the tr elements that have one of their children td with value greater than 40. |
2.6.7 Selecting unknown nodes
Apart from selecting the specific nodes, XPath also provides wildcards to select a group of elements:
| Wildcard | Description | Example |
|---|---|---|
| * | Matches any element node | ->/table/: This will select all child elements of a table element ->//: This will select all elements in the document -> //*[@class='price']: This will select any element in the document which has an attribute named class with a specified value, that is price |
| @ | Matches any attribute node | //td[@*]: This will select all the td elements that have any attribute |
| node() | Matches any node of any kind. | //table/node(): This will select all the child elements of table |
buttons = driver.find_elements_by_xpath("//div/*")
buttons = driver.find_elements_by_xpath("//*[@class='tab']")
buttons = driver.find_elements_by_xpath("//div[@*]")
HTML has 3 types of node: element/attribute/text. node() will return all of them. Selenium seems can't accept attribute/text node???
2.6.8 Selecting several paths
buttons = driver.find_elements_by_xpath("//div/a | //li/a")
2.6.9 Locating elements with XPath axes
a graphical representation of the HTML elements
| Axis | Description | Example | Result |
|---|---|---|---|
| ancestor | Selects all ancestors(parent, grandparent, and so on) of the current node | //td[text()='Product1']/ancestor::table | This will get the table element |
| descendant | Selects all descendants(children, grandchildren, and so on) of the current node | /table/descendant::td/input | This will get the input element from the third column of the second row from the table |
| following | Selects everything in the document after the closing tag of the current node | //td[text()='Product1']/following::tr | This will get the second row from the table |
| following-sibling | Selects all siblings after the current node | ||
| following-sibling | Selects all siblings after the current node | //td[text()='Product1']/following-sibling::td | This will get the second column from the second row immediately after the column that has 'Product1' as the text value |
| preceding | Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes, and namespace nodes | //td[text()='$150']/preceding::tr | This will get the header row |
| preceding-sibling | Selects all siblings before the current node | //td[text()='$150']/preceding-sibling::td | This will get the first column of third row from the table |
buttons = driver.find_elements_by_xpath("//a[@id='web-nav-app-download-btn']/ancestor::div")
2.7 Finding elements using CSS selecors
2.7.1 Finding elements with an absolute path
button = driver.find_element_by_css_selector("html body nav")
button = driver.find_element_by_css_selector("html > body > nav")
2.7.2 Finding elements with a relative path
the first <nav>
button = driver.find_element_by_css_selector("nav")
2.7.3 Finding elements using the Class selector
button = driver.find_element_by_css_selector("a.app-download-btn")
HTML tag can be ignored and this will return all the elements
button = driver.find_element_by_css_selector(".app-download-btn")
2.7.4 Finding elements using the ID selector
button = driver.find_element_by_css_selector("a#web-nav-app-download-btn")
HTML tag can be ignored and this will return all the elements
button = driver.find_element_by_css_selector("#web-nav-app-download-btn")
2.7.5 Finding elements using the attributes selector
button = driver.find_element_by_css_selector("input[type='text'][name='q']")
2.7.6 Finding elements using the attributes name selector
buttons = driver.find_elements_by_css_selector("div[id]")
buttons = driver.find_elements_by_css_selector("div:not([id])")
2.7.7 Selecting several path
Using the or selector "," in CSS selectors, we can select a single or several elements matching the given criteria.
buttons = driver.find_elements_by_css_selector("form, input")
2.7.8 Performing a partial match on attribute values
| Syntax | Example | Description |
|---|---|---|
| ^= | input[id^='ctrl'] | Starting with |
| $= | input[id$='_userName'] | Ending with |
| *= | input[id *= 'username'] | Containing |
button = driver.find_element_by_css_selector("a[id^='web']")
button = driver.find_element_by_css_selector("a[id$='btn']")
button = driver.find_element_by_css_selector("a[id*='download']")
2.8 Locating elements using text
When you encounter situations where developers don't assign any attributes to the elements, using the CSS selectors or XPath, we can find elements based on their text contents.
2.8.1 Using XPath's text function
button = driver.find_element_by_xpath("//span[contains(text(),'App')]")
button = driver.find_element_by_xpath("//span[contains(.,'App')]")
2.8.2 Finding elements using exact text value in XPath
button = driver.find_element_by_xpath("//span[text()='下载App']")
button = driver.find_element_by_xpath("//span[.='下载App']")
2.8.3 Using the CSS selector contains() pseudo-class
Unable to locate element???
button = driver.find_element_by_css_selector("a[textContent='注册']")
2.9 Finding elements using advanced CSS selectors
2.9.1 Finding child elements
| Pseudo-class | Example | Description |
|---|---|---|
| :first-child | form#loginForm:first-child | This will find the first element under the form |
| :last-child | form#loginForm:last-child | This will find the last element under the form |
| :nth-child(2) | form#loginForm:nth-child(2) | This will find the second child element under the form |
Note: there is a space in front of ":"
button = driver.find_element_by_css_selector("body :nth-child(2)")
2.9.2 Finding sibling elements
Immediately following sibling
div#top5 > p + p
Following sibling with one intermediary
div#top5 > p + * + p
2.9.3 Using user action pseudo-classes
locate any element that currently has the input focus
button = driver.find_element_by_css_selector("input:focus")
:hover element that mouse is hovering
:active selected element
2.9.4 Using UI state pseudo-classes
:enanbled elements that are enabled
:disabled elements that are disabled
:checked elements(checkboxes) that are checked
2.10 Using jQuery selectors
elements = driver.execute_script("return jQuery.find(':checked')")
网友评论