Selenium Webdriver have different types of locators to identify a web element uniquely within the webpage and ClassName one of them. Single className, We can easy way identify web element, but multiple Class Name need to follow technique. In this tutorial I discuss how to operate multiple class names The list of locators is given below.
ID, ClassName, Name, TagName, LinkText, PartialLinkText, Xpath, CSS Selector, DOM
There are there important special characters:
1. '^' symbol, represents the starting text in a string.
2. '$' symbol represents the ending text in a string.
3. '*' symbol represents contains text in a string.
<label for="Email" class="class-name1 class-name2"> Enter your email</label>
<input type="email" class="class-name3 class-name1 class-name2 class-name4">
Css Selector and XPath help to identify multiple Classes. For this case, Css Selector is always fast, concise, native than XPath.
Css Selector
//Match exact class
WebElement ele1 = driver.findElement(By.cssSelector("label.class-name1"));
System.out.println(ele1.getText().trim());
WebElement ele2 = driver.findElement(By.cssSelector("input.class-name1.class-name3"));
ele2.sendKeys("ele2@gmail.com");
WebElement ele3 = driver.findElement(By.cssSelector("input.class-name1.class-name2"));
ele3.clear();
ele3.sendKeys("ele3@gmail.com");
WebElement ele4 = driver.findElement(By.cssSelector("input[class='class-name3 class-name1 class-name2 class-name4']"));
ele4.clear();
ele4.sendKeys("ele4@gmail.com");
//match start class pattern calss
WebElement ele5 = driver.findElement(By.cssSelector("input[class^='class-name3']"));
ele5.clear();
ele5.sendKeys("ele5@gmail.com");
//match end class pattern calss
WebElement ele6 = driver.findElement(By.cssSelector("input[class$='class-name4']"));
ele6.clear();
ele6.sendKeys("ele6@gmail.com");
Thread.sleep(5000);
//match contain class pattern calss
WebElement ele7 = driver.findElement(By.cssSelector("input[class*='class-name3']"));
ele7.clear();
ele7.sendKeys("ele7@gmail.com");
XPath
//Match exact class
System.out.println(driver.findElement(By.xpath("//label[@class='class-name1 class-name2']")).getText().trim());
//match class order matters contains value
WebElement e2e1 = driver.findElement(By.xpath("//input[contains(@class, 'class-name3')]"));
e2e1.clear();
e2e1.sendKeys("e2e1@gmail.com");
//match as long as elements have one more classes with contains
WebElement e2e2 = driver.findElement(By.xpath("//input[contains(@class, 'class-name1') and contains(@class, 'class-name4')]"));
e2e2.clear();
e2e2.sendKeys("e2e2@gmail.com");
Demo HTML page
<!DOCTYPE html>
<html>
<head>
<title>Multiple Class</title>
</head>
<body>
<h1>Multiple Class</h1>
<form name="domf1" method="post">
<div>
<label for="Email" class="class-name1 class-name2"> Enter your email</label>
<input type="email" class="class-name3 class-name1 class-name2 class-name4">
</div>
</form>
</body>
</html>
Implementation Selenium Webdriver Source code for Upper HTML Code
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Multipleclasshandler {
public static void main(String[] args) throws InterruptedException {
// create objects and variables instantiation
WebDriver driver = new FirefoxDriver();
// maximize the browser window
driver.manage().window().maximize();
// launch the firefox browser and open the application url
driver.get("file:///C:/Users/Hiro%20Mia/Desktop/Blog%20content/handle%20multiple%20class.html");
//Set timeout
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
//Match exact class
WebElement ele1 = driver.findElement(By.cssSelector("label.class-name1"));
System.out.println(ele1.getText().trim());
WebElement ele2 = driver.findElement(By.cssSelector("input.class-name1.class-name3"));
ele2.sendKeys("ele2@gmail.com");
Thread.sleep(2000);
WebElement ele3 = driver.findElement(By.cssSelector("input.class-name1.class-name2"));
ele3.clear();
ele3.sendKeys("ele3@gmail.com");
Thread.sleep(2000);
WebElement ele4 = driver.findElement(By.cssSelector("input[class='class-name3 class-name1 class-name2 class-name4']"));
ele4.clear();
ele4.sendKeys("ele4@gmail.com");
Thread.sleep(2000);
//match start class pattern calss
WebElement ele5 = driver.findElement(By.cssSelector("input[class^='class-name3']"));
ele5.clear();
ele5.sendKeys("ele5@gmail.com");
Thread.sleep(2000);
//match end class pattern calss
WebElement ele6 = driver.findElement(By.cssSelector("input[class$='class-name4']"));
ele6.clear();
ele6.sendKeys("ele6@gmail.com");
Thread.sleep(5000);
//match contain class pattern calss
WebElement ele7 = driver.findElement(By.cssSelector("input[class*='class-name3']"));
ele7.clear();
ele7.sendKeys("ele7@gmail.com");
Thread.sleep(2000);
//Match exact class
System.out.println(driver.findElement(By.xpath("//label[@class='class-name1 class-name2']")).getText().trim());
//match class order matters contains value
WebElement e2e1 = driver.findElement(By.xpath("//input[contains(@class, 'class-name3')]"));
e2e1.clear();
e2e1.sendKeys("e2e1@gmail.com");
Thread.sleep(2000);
//match as long as elements have one more classes with contains
WebElement e2e2 = driver.findElement(By.xpath("//input[contains(@class, 'class-name1') and contains(@class, 'class-name4')]"));
e2e2.clear();
e2e2.sendKeys("e2e2@gmail.com");
Thread.sleep(2000);
// quit Firefox browser
driver.quit();
}
}
