CSS Locators in Selenium Tutorial

In this tutorial, we will learn about CSS Selector and create CSS selectors manually using different HTML attributes of the web elements. For fetching the HTML information of the web elements we will use a firebug or developer tool. (For details on downloading and usage of firebug/developer tool check out tutorial – Finding web elements in Selenium.

CSS and CSS Selectors Introduction

CSS stands for Cascading Style Sheets, these are used for styling the different elements of an HTML webpage. In the .css files we can locate specific elements of a webpage(.html files) and then style them like – set their font size, width, height etc.
For locating the web elements to be styled, we use certain rules provided as CSS Selectors.
For example, the following statement first locates a web element satisfying the selector pattern – “div#searchBox” and then aligns the text inside it to center.

div#searchBox {text-align: center;}

In Selenium, we can use these CSS Selector rules/patterns for locating web elements and later perform different operations on them. For example-

//Locating searchBox element using CSS Selector
WebElement searchBox = driver.findElement(By.cssSelector("div#searchBox"));
//Performing click operation on the element
searchBox.sendKeys("ArtOfTesting");

Let’s now see the different rules of CSS Selectors along with their syntax and usage example.

CSS Selectors

Below are the syntax and examples on how to locate the desired elements and use them in selenium scripts.

Using Id

CSS Selector Rule – #id
Example –
For the Sample HTML below-

Submit

CSS Locator – #submitButton1
Description – ‘#submitButton1’ will select the element with id ‘submitButton1’.

Using class

CSS Selector Rule – .class
Example –
For the Sample HTML below-

Submit

CSS Locator – .btn
Description – ‘.btn’ will select all the elements with class ‘btn’.

Using tag

CSS Selector Rule – tagName
Example –
For the Sample HTML below-

CSS Locator – input
Description – ‘input’ will select all the input type elements.

Using attributes and their value
CSS Selector Rule - [attributeName='attributeValue']
Example -
For the Sample HTML below-

CSS Locator – [name=’firstName’]
Description – [name=’firstName’] will select the elements with name attribute having value ‘firstName’.

Now, using these basic rules of locating web elements, we can use them in conjunction to create more robust locators, selecting unique elements.

Using tags and id

CSS Selector Rule – tag#id
Example –
For the Sample HTML below-

CSS Locator – input#fname
Description – input#fname will select the ‘input’ element with id ‘fname’.

Using tags and class

CSS Selector Rule – tag.class
Example –
For the Sample HTML below-

CSS Locator – input.textbox
Description – input.textbox will select the ‘input’ element with id ‘textbox’.

Using tags and attributes

CSS Selector Rule – tag[attributeName=’attributeValue’]
Example –
For the Sample HTML below-

CSS Locator – input[name=’firstName’]
Description – input[name=’firstName’] will select the ‘input’ element with ‘name’ attribute having value ‘firstName’.

Locating Child Elements (direct child only)

CSS Selector Rule – parentLocator>childLocator
Example –
For the Sample HTML below-

Submit

CSS Locator – div#buttonDiv>button
Description – ‘div#buttonDiv>button’ will first go to div element with id ‘buttonDiv’ and then select its child element – ‘button’.

Locating elements inside other elements (child or subchild)

CSS Selector Rule – locator1 locator2
Example –
For the Sample HTML below-

Submit

CSS Locator – div#buttonDiv button
Description – ‘div#buttonDiv button’ will first go to div element with id ‘buttonDiv’ and then select ‘button’ element inside it (which may be its child or sub child).

nth child

CSS Selector Rule – :nth-child(n)
Example –
For the Sample HTML below-

Automation Testing
Performance Testing
Manual Testing

CSS Locator – #testingTypes li:nth-child(2)
Description – ‘#testingTypes li:nth-child(2)’ will select the element with id ‘testingType’ and then locate the 2nd child of type li i.e. ‘Performance Testing’ list item.

Locating Siblings

CSS Selector Rule – locator1+locator2
Example –
For the Sample HTML below-

Automation Testing
Performance Testing
Manual Testing

CSS Locator – li#automation + li
Description – ‘li#automation + li’ will first go to li element with id ‘automation’ and then select its adjacent li i.e. ‘Performance Testing’ list item.

For handling dynamic elements having ids and other locators dynamically generated(not known beforehand). We can make use of the above locators by using different parent-sibling relationships of the dynamic elements. Apart from this, we can also use some special CSS locators using which we can match partial values of the attributes.

^ – Starts with

CSS Selector Rule – [attribute^=attributeValue]
Example –
For the Sample HTML below-

Submit

CSS Locator – id^=”user1″
Description – ‘id^=”user1″‘ will select the element whose id starts with “user1” value

$ – Ends with

CSS Selector Rule – [attribute$=attributeValue]
Example –
For the Sample HTML below-

Submit

CSS Locator – id$=”btn_263″
Description – ‘id$=”btn_263″‘ will select the element whose id ends with “btn_263” value

* – Contains

CSS Selector Rule – [attribute*=attributeValue]
Example –
For the Sample HTML below-

Submit

CSS Locator – id*=”btn”
Description – ‘id*=”btn”‘ will select the element whose id contains with “btn” value

That’s all we have in this post. If you have any questions please comment below.Checkout the complete selenium tutorial here.

Complete Selenium guide

Еще об этом:

Locators in Selenium WebDriver 100 САМЫХ ПОПУЛЯРНЫХ ПРОДВИНУТЫХ ВОПРОСОВ И ОТВЕТОВ НА ИНТЕРВЬЮ ПО SELENIUM ИЗУЧИТЕ РУКОВОДСТВО ПО СЕЛЕКТОРУ CSS В SELENIUM WEBDRIVER [БЕЗ ИСПОЛЬЗОВАНИЯ КАКИХ-ЛИБО ИНСТРУМЕНТОВ] What is HTML? SQL For Testers КАК ОБРАЩАТЬСЯ С ВЫПАДАЮЩИМ СПИСКОМ И МНОЖЕСТВЕННЫМ ВЫБОРОМ, ИСПОЛЬЗУЯ SELENIUM WEBDRIVER What is Automation Testing? Regression Testing With Testsigma SELENIUM 4.0 — ВВЕДЕНИЕ, НОВЫЕ ФУНКЦИИ, УСТАНОВКА, ЧТО УСТАРЕЛО 10+ Best A/B Testing Tools To Boost Your Website’s Performance