Selenium uses the By class to find elements on a page. There are a number of tools to help you find a selector but once you figure out how they work you should be able to figure it out using just the element’s HTML. Creating a selector that is reliable enough to find your element, no matter its position on the page, is a learned skill. It is highly recommeded that you review the documentation for CSS Selectors and XPath Syntax.
Selenium Selector Cheat Sheet
Basic Selenium Selectors
- All XPath expressions can be evaluated using jQuery. jQuery commands typically start with
- In XPath * is a wildcard. “//*[…” says to find any element type. “//a[…” says to find only <a> element types.
Advanced Selenium Selectors
|Element Containing Text||By.XPath(“//*[text()[contains(.,’Privacy’)]]”)||$x(“//*[text()[contains(.,’Privacy’)]]”)|
Using Chrome (covered below), I got a selector for Google’s “Google Search” button:
#tsf > div.tsf-p > div.jsb > center > input[type="submit"]:nth-child(1). This selector reads, “Get the element with ID=’tsf’, then its child div with class=’tsf-p’, then its child div with class=’jsb’, then its child ‘center’ element > then its child input with type=’button’ and is the first child”. This selector can be trimmed down to any of the following:
- “center > input”
- Returns the first <center> element’s first <input>
- Brittle warning: If the element is moved, <center> element is removed, or another <input> becomes the first child.
- Returns an<input> element where type=”submit”
- “//*[@value=’Google Search’]”
- Returns any element where value=”Google Search”
- Brittle warning: If another element has the same value and appears first in the document.
Lets say we have a selector, “#div123 > a” and the “div123″ is dynamically generated and changes every time the page is reloaded. One simple trick is to edit the element and remove the id=”” attribute. This is done by inspecting the element and then double clicking the id attribute. When you get a new selector, it will have gone up the document tree a bit and might now look like “section > div > a” where ‘div” was the dynamically ID’d element.
Multiple Child Elements
This can be related to dynamic classes, too. A <ul> might have 5 <li> children. When the <ul> is first presented, all the <li> have the same class. Once one is selected the class of the selected element changes. For this example, let’s say that it goes from “li.defaultState” to “li.selected”. If your selector is “ul > li.defaultState:nth-child(5)” (to select the last <li>) you would receive an error since now only 4 elements have that class. This selector can be modified to the following:
- “ul > li:nth-child(5)”
- Returns the 5th <li> of the first <ul>
- Brittle warning: If the <ul> child count changes or if another <ul> appears first in the document.
- Returns the first <li> found where the textContent=”Coffee”
- Brittle warning: If another <ll> appears first in the document with the same textContent value.
Getting a Selector Using Chrome’s DevTools
- Navigate to https://www.google.com/
- Right-click on the logo and then select “Inspect”
- The element is highlighted in the “Elements” tab of Chrome’s DevTools
- Right-click on the highlighted element and then select “Copy → Copy selector”
Testing a Selector Using Chrome’s DevTools Element Search
- Open Chrome’s DevTools [F12] and then select the “Elements” tab
- Press [Ctrl]+[F] to open the search
- Paste in your selector and if the element is found, then it will be highlighted
- Open Chrome’s DevTools [F12] and then select the “Console” tab
- In the command line type
document.querySelector("#hplogo")and then press [Enter]
- Hover over the returned element and the element will be highlighted on the page