Selenium Selector Cheat Sheet

Background

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

The following tables focus on FindElement (and not FindElements), so any JavaScript function that returns multiple results is directed to return only the first (at index 0).

Basic Selenium Selectors

Description Selenium Selector JavaScript Selector
By.ByClassName  By.ClassName(“gsfi”)  document.getElementsByClassName(“gsfi”)[0]
By.ByCssSelector By.CssSelector(“#hplogo”) document.querySelector(“#hplogo”)
By.ById By.Id(“hplogo”) document.getElementById(“hplogo”)
By.ByLinkText  By.LinkText(“About”)  $x(“//a[text()=’About’]”)
By.ByName  By.Name(“q”)  document.getElementsByName(“q”)[0]
By.ByTagName  By.TagName(“a”)  document.getElementsByTagName(“input”)[0]
By.ByXPath By.XPath(“//*[@id=’hplogo’]”) $x(“//*[@id=’hplogo’]”)
  • 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

Description Selenium Selector JavaScript Selector
Parent Element  childElement.FindElement(By.XPath(“..”)) childElement.parentElement
Element Containing Text  By.XPath(“//*[text()[contains(.,’Privacy’)]]”)  $x(“//*[text()[contains(.,’Privacy’)]]”)[0]
 Element Attribute By.CssSelector(“input[value=’3.2′]”)  document.querySelector(“input[value=’3.2′]”)
 Element Attribute By.XPath(“//input[@value=’3.2′]”)  $x(“//input[@value=’3.2′]”)

Selector Tips

Long Selectors

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:

  1. “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.
  2. “input[type=submit]”
    • Returns an<input> element where type=”submit”
  3. “//*[@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.

Dynamic Attributes

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:

  1. “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.
  2. “//li[text()=’Coffee’]”
    • 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

  1. Navigate to https://www.google.com/
  2. Right-click on the logo and then select “Inspect”
  3. The element is highlighted in the “Elements” tab of Chrome’s DevTools
  4. Right-click on the highlighted element and then select “Copy → Copy selector”

Testing a Selector Using Chrome’s DevTools Element Search

  1. Open Chrome’s DevTools [F12] and then select the “Elements” tab
  2. Press [Ctrl]+[F] to open the search
  3. Paste in your selector and if the element is found, then it will be highlighted

Testing a Selector Using JavaScript

  1. Open Chrome’s DevTools [F12] and then select the “Console” tab
  2. In the command line type document.querySelector("#hplogo") and then press [Enter]
  3. Hover over the returned element and the element will be highlighted on the page

Selenium Selectors and JavaScript

As seen in the previous section, you can test CSS Selectors using plain ol’ JavaScript. The document object is the deserialized HTML. We then call a method of that object. This can be querySelector (returns the first element matching the expression) or querySelectorAll (returns all elements matching the expression). These methods match Selenium’s functionality:

document.querySelector("your-selector-here") → driver.FindElement(By.CssSelector("your-selector-here"))

document.querySelectorAll("your-selector-here") → driver.FindElements(By.CssSelector("your-selector-here"))