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.

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");
        
        }
}

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”);

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

Related Posts