How To Locate Web Element Which Has Multiple Class Names

A web element of a web page may belong to multiple classes. These classes may represent a class in style sheet or can be used for DOM manipulation. All belonging class names of a web element are mentioned under “class” attribute separated by a space. For example :-

This element belongs to class demo1

This element belongs to class demo1 and dmeo2

This element belongs to class demo1, demo2 and demo3

We will see how can we locate these type of elements in Selenium WebDriver.

If you inspect “From” text box at Yatra then you will find it has multiple classes which is also called compound class names.

Let’s use className locator and see what happens.

Selenium WebDriver Java Code

package SpecialConcepts;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import io.github.bonigarcia.wdm.WebDriverManager;

public class ElementWithMultipleClassNames {

	@Test
	public void multipleClassnameWithClassNameLocator()
	{
		WebDriverManager.chromedriver().setup();
		WebDriver driver=new ChromeDriver(); 
		driver.get("https://www.yatra.com/");
		driver.findElement(By.className("required_field cityPadRight ac_input origin_ac")).sendKeys("DELHI");
	
	}
}

Output

When we pass all class names in className attribute it has thrown above exception because class attribute has compound class names i.e. required_field, cityPadRight, ac_input and origin_ac. This is not permitted by classname locator in Selenium WebDriver.

You can use classname locator with individual class names as below:

// It will match all web elements which has class name "required_field" but returns first match
driver.findElement(By.className("required_field")); 
// It will match all web elements which has class name "cityPadRight" but returns first match
driver.findElement(By.className("cityPadRight"));

You can use findElements() with index or Xpath with index to get exact web element. Using index makes locator flaky as it may change based on addition or remove or modification of elements in DOM.

We can use xpath and cssSelector to locate web elements with multiple or compound class names. Use “class” as attribute and its complete value as it is in quotations for XPath and CSS Selector. Example is shown as below :-

driver.findElement(By.xpath("//input[@class='required_field cityPadRight ac_input origin_ac']")).sendKeys("DELHI");
driver.findElement(By.cssSelector("input[class='required_field cityPadRight ac_input origin_ac']")).sendKeys("DELHI");

But cssselector has multiple ways to locate web element with compound class names.

You can combine all class names with dot (.) and prefix by node i.e. tagName.classname1.classname2.classname3. For example Above node is “input” so another css selector can be written as :-

driver.findElement(By.cssSelector(“input.required_field.cityPadRight.ac_input.origin_ac”)).sendKeys(“DELHI”);

If you do not want to specify node name or want it to be any tag name then combine all class names with dot (.) and append a dot (.) in beginning which generally represents a class value in cssSelector i.e. .classname1.classname2.classname3

driver.findElement(By.cssSelector(“.required_field.cityPadRight.ac_input.origin_ac”)).sendKeys(“DELHI”);

Selenium WebDriver Java code with all solutions

package SpecialConcepts;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import io.github.bonigarcia.wdm.WebDriverManager;

public class ElementWithMultipleClassNames {

	@Test
	public void multipleClassnameWithClassNameLocator()
	{
		WebDriverManager.chromedriver().setup();
		WebDriver driver=new ChromeDriver(); 
		driver.get("https://www.yatra.com/");
		driver.findElement(By.className("required_field cityPadRight ac_input origin_ac")).sendKeys("DELHI");
	
	}
	
	@Test
	public void multipleClassnameWithXPathLocator()
	{
		WebDriverManager.chromedriver().setup();
		WebDriver driver=new ChromeDriver(); 
		driver.get("https://www.yatra.com/");
		driver.findElement(By.xpath("//input[@class='required_field cityPadRight ac_input origin_ac']")).sendKeys("DELHI");
	
	}
	
	@Test
	public void multipleClassnameWithCssSelectorLocator()
	{
		WebDriverManager.chromedriver().setup();
		WebDriver driver=new ChromeDriver(); 
		driver.get("https://www.yatra.com/");
		driver.findElement(By.cssSelector("input[class='required_field cityPadRight ac_input origin_ac']")).sendKeys("DELHI");
	
	}
	
	@Test
	public void multipleClassnameWithCssSelectorLocatorCombiningClassWithNode()
	{
		WebDriverManager.chromedriver().setup();
		WebDriver driver=new ChromeDriver(); 
		driver.get("https://www.yatra.com/");
		// Combine all class names with dot and append tag name i.e. tagName.classname1.classname2.classname3
		driver.findElement(By.cssSelector("input.required_field.cityPadRight.ac_input.origin_ac']")).sendKeys("DELHI");
	
	}
	
	@Test
	public void multipleClassnameWithCssSelectorLocatorCombiningClassWithoutNode()
	{
		WebDriverManager.chromedriver().setup();
		WebDriver driver=new ChromeDriver(); 
		driver.get("https://www.yatra.com/");
		// Combine all class names with dot and append a dot at starting i.e. .classname1.classname2.classname3
		driver.findElement(By.cssSelector(".required_field.cityPadRight.ac_input.origin_ac']")).sendKeys("DELHI");
	
	}
}

You can download/clone above sample project from here.

If you have any doubt, feel free to comment below.
If you like my posts, please like, comment, share and subscribe.
#ThanksForReading
#HappyLearning

Find all Selenium related post here, all API manual and automation related posts here and find frequently asked Java Programs here.

Many other topics you can navigate through menu.

7 thoughts on “How To Locate Web Element Which Has Multiple Class Names

  1. Hi, Amod!
    Thanks for sharing this!
    I’ve found out that it works also by enclosing the multiple classes’ names in single quotes, i.e.:
    driver.findElement(By.cssSelector(“input[class = ”
    + “‘”
    + “required_field cityPadRight ac_input”
    + “‘”
    + “]”));

Leave a Reply to Amod Mahajan Cancel reply

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