Post#18.Locators Part-4 (CSS Selectors)

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 topic. 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

Tag and ID:

Syntax: css=tag#id

Open Mozilla Firefox and navigate to Gmail application.

Open element inspector 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

package pack3;

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("Software Testing Material");

       }

}

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

package pack3;

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("Sujoy@gmail.com");

       }

}

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]

package pack2;

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("Sujoy@gmail.com");

      }

}

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:

package pack4;

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("Sujoy@gmail.com ");

      }

}

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">Submit</button>

</div>

Syntax: parentLocator>childLocator

Example: 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)

<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"