Hiro Mia: How to handle combined multiple classes in Selenium Webdriver using java.

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

Hiro Mia

How to handle combined multiple classes in Selenium Webdriver using java.

5 comments:

Followers