Use CSS Selectors to Locate WebElements with Selenium WebDriver

Mark BullockQA Engineer
CERTIFIED EXPERT
Published:
Updated:
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.

While using Selenium WebDriver for automated testing of web applications I have found it difficult to learn how to specify locators for WebElements. This article presents example HTML, CSS selectors, and WebDriver Java code to help you write your automated tests more quickly. Use specific CSS selectors to make your tests more reliable when the user interface changes.


You can save the attached HTML file, CssSelectorsTest.html, and Java file, CssSelectorsTest.java, and run the WebDriver test. You'll have to add the Selenium jar, change the code to use the WebDriver of your choice, and change the path to the HTML file.


I'll give you an overview of these CSS selectors.

  1. Basic Selectors
    • Type selector - the name of an HTML element, e.g. h1
    • Class selector - e.g. class="className"
    • ID selector - e.g. id="myId"
    • Attribute selectors - any attribute of an element, e.g. name or value
  2. Combinators
    • Child selectors
    • Descendant selectors
  3. Pseudo-classes

If your HTML element has a unique id,

 
<a id="create-registerFreePopup" class="button ghost" href="https://www.google.com/?q=create+a+project">Create a Project</a>

this is the simplest way to select it.

 
By.id("create-registerFreePopup")


When you don't have an id, use CSS selectors like the following. 

Class Selector


.h1Class selects any type of element with class="h1Class".



Child Selector


form > input.textClass selects the input element with attribute class="textClass" which is an immediate child of the form element.



Descendant Combinator


div.divClass input.textClass selects the input element with attribute class="textClass" which is a child/grandchild/great-grandchild/... of the div element with attribute class="divClass".



ID Selector and Class Selector


#checkboxId.checkboxClass selects the element with id="checkboxId" and class="checkboxClass". Use this when you have an ID, but it's not unique.



Attribute Selector


input[name='checkboxName' selects the input element with name="checkboxName".

input[value^='radioThis'] selects the input element which has a name which starts. with "radioThis"



Attribute Selector Starts With


input[value^='radioThis'] selects the input element which has a name which starts. with "radioThis"



Pseudo Classes


input[type='radio']:checked selects the input element with attribute type="radio" which is checked (i.e. selected).



Type Selector


h1 selects the h1 element.



Pseudo Class


input:last-child selects the input element which is the last child of a parent element.



Further Reading


0
2,306 Views
Mark BullockQA Engineer
CERTIFIED EXPERT

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.

Get access with a 7-day free trial.
You Belong in the World's Smartest IT Community