CSS Selector

Locating elements by CSS Selectors

There is a debate on the performance between CSS Locator and XPath locator and the debate on the performance of CSS and XPath locator is out of scope of this post. Most of the automation testers believe that using CSS selectors makes the execution of script faster compared to XPath locator. This locator is always the best way to locate elements on the page.

Following are the some of the mainly used formats of CSS Selectors.

  • Tag and ID
  • Tag and Class
  • Tag and Attribute
  • Tag, Class and Attribute
  • Sub-String Matches
    • Starts With (^)
    • Ends With ($)
    • Contains (*)
  • Child Elements
    • Direct Child
    • Sub-child
    • nth child
  • Matching By inner Text

Tag and ID:

Syntax: css=tag#id

Open Mozilla Firefox and navigate to Gmail application.

Open Firebug and inspect the “Enter your email” input box. Take a note of its Tag and ID. Follow the below screenshot to do so.

Value to be added in the By.cssSelector method:

css=input#Email

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Locators {
	public static void main(String[] args) {
		WebDriver driver = new FirefoxDriver();
		driver.get(“https: //www.gmail.com“);
		// Here Tag = input and Id = Email
		driver.findElement(By.cssSelector(“input#Email“)).sendKeys(“[email protected]“);
	}
}

Tag and Class:

If multiple elements have the same HTML tag and class, then the first one will be recognized.

Syntax: css=tag.class

Open Mozilla Firefox and navigate to Facebook application.

Open Firebug and inspect the Email input box. Take a note of its Tag and Class. Follow the below screenshot to do so.

Value to be added in the By.cssSelector method:

css=input.inputtext

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Locators {
	public static void main(String[] args) {
		WebDriver driver = new FirefoxDriver();
		driver.get(“https: //www.facebook.com/“);
		// Here Tag = input and Class = email
		driver.findElement(By.cssSelector(“input.inputtext“)).sendKeys(“[email protected]“);
	}
}

Tag and Attribute:

If multiple elements have the same HTML tag and attribute, then the first one will be recognized. It acts in the same way of locating elements using CSS selectors with the same tag and class.

Syntax: css=tag[attribute=value]

Open Mozilla Firefox and navigate to Gmail application.

Open Firebug and inspect the Enter your email input box. Take a note of its Tag and Attribute. Follow the below screenshot to do so.

Value to be added in the By.cssSelector method:

css=input[name=Email]

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Locators {
	public static void main(String[] args) {
		WebDriver driver = new FirefoxDriver();
		driver.get(“https: //www.gmail.com“);
		// Here Tag = input and Id = Email
		driver.findElement(By.cssSelector(“input[name = Email]“)).sendKeys(“[email protected]“);
	}
}

Tag, Class And Attribute:

Syntax: css=tag.class[attribute=value]

Open Mozilla Firefox and navigate to Facebook application.

Open Firebug and inspect the Email input box. Take a note of its Tag, Class and Attribute. Follow the below screenshot to do so.

Value to be added in the By.cssSelector method:

css=input.inputtext[name=email]

Script:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Locators {
	public static void main(String[] args) {
		WebDriver driver = new FirefoxDriver();
		driver.get(“https: //www.facebook.com/“);
		// Here Tag = input and Class = email
		driver.findElement(By.cssSelector(“input.inputtext[name = email]“)).sendKeys(“[email protected]“);
	}
}

SUB-STRING MATCHES:

CSS in Selenium has an interesting feature of allowing partial string matches using ^$, and *.

Have a look on the below mentioned HTML

<input=”Employee_ID_001″>

Starts with (^): 

To select the element, we would use ^ which means ‘starts with

Syntax: css=input[id^=’Em’]

Example:

driver.findElement(By.cssSelector(“input[id^=’Em’]“)).sendKeys(“Testing“);

Ends with ($): 

To select the element, we would use $ which means ‘ends with’

Syntax: css=input[id$=’001′]

Example:

driver.findElement(By.cssSelector(“input[id$=’001′]“)).sendKeys(“Testing“);

Contains (*): 

To select the element, we would use * which means ‘sub-string

Syntax:

css=input[id*=’id’]

Example:

driver.findElement(By.cssSelector(“input[id*=’id’]“)).sendKeys(“Testing“);

Locating Child Elements(Direct Child):

<div id=”buttonDiv” class=”small”>
<button id=”submitButton” type=”button” class=”btn”>Submitbutton>
div>

Syntax: parentLocator>childLocator

CSS Locator: div#buttonDiv>button

Explanation: ‘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 sub-child):

Syntax: parentLocator>locator1 locator2

CSS Locator: div#buttonDiv button

Explanation: ‘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)

Location nth Child:

<ul id="automation">
<li>Selenium</li>
<li>QTP</li>
<li>Sikuli</li>
</ul>

To locate the element with text ‘QTP’, we have to use “nth-of-type

css=”ul#automation li:nth-of-type(2)”

Similarly, To select the last child element, i.e. ‘Sikuli’, we can use

css=”ul#automation li:last-child“

MATCHING BY INNER TEXT
And last, one of the more useful pseudo-classes, :contains() will match elements with the desired text block:
css=a:contains(‘Log Out’)

Leave a Reply

Your email address will not be published. Required fields are marked *