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 :-
|
1 2 3 |
<p class="demo1">This element belongs to class demo1</p> <p class="demo1 demo2">This element belongs to class demo1 and dmeo2</p> <p class="demo1 demo2 demo3">This element belongs to class demo1, demo2 and demo3</p> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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:
|
1 2 3 4 |
// 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 :-
|
1 2 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
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.
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”
+ “‘”
+ “]”));
Thanks
if you have any code base for Framework please share us .its will save a lot
As of now I don’t have any but very soon.
thankyou Amod sir nice concept .
Thanks Preetish.