We can find elements by multiple class names. If there is an element having more than one value separated by spaces set for the class attributes, it is called the compound class names.
Let us see the HTML code of such web elements having compound class names −
We shall get an exception if we use both the values - toc and chapters with the class name locator for the above scenario. Instead, the rule is to have only one class attribute value with the class name locator.
WebElement l = driver.findElement(By.className("toc")); //Invalid locator value with className locator WebElement l = driver.findElement(By.className("toc chapters"));
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class ClssLocator{ public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); //launch URL driver.get("https://www.tutorialspoint.com/about/about_careers.htm/"); //identify element with className having compound classes WebElement l = driver.findElement(By.className("toc")); //verify if element is displayed boolean b = l.isDisplayed(); System.out.println(b); driver.quit(); } }
With the css locator, we can use all the values set for the class attributes in a compound class. This is done by combining all them separated by a dot(.) and also adding a dot(.) at the start of the css expression.
WebElement l = driver.findElement(By.cssSelector(".toc.chapters"));
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class CssSelectorLocator{ public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); //launch URL driver.get("https://www.tutorialspoint.com/about/about_careers.htm/"); //identify element with css having compound classes WebElement l = driver.findElement(By.cssSelector(".toc.chapters")); //verify if element is displayed boolean b = l.isDisplayed(); System.out.println(b); driver.quit(); } }
With the css and xpath locator, we can include all values of the class attributes, by using class as attribute and then the entire class value in quotes.
WebElement l = driver.findElement(By.xpath("//ul[@class='toc chapters']")); WebElement m = driver .findElement(By.cssSelector("ul[class='toc chapters']"));
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public class XpathLocator{ public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); //launch URL driver.get ("https://www.tutorialspoint.com/about/about_careers.htm/"); //identify element with xpath having compound classes WebElement l = driver.findElement(By.cssSelector("ul[class='toc chapters']")); //verify if element is displayed boolean b = l.isDisplayed(); System.out.println(b); driver.quit(); } }