Summary -

In this topic, we described about the below sections -

In general, CSS used to style the web page with style rules. The same CSS rules used to identifying one or more elements in the web page.

Class Name locator helps in locating element defined through the class attribute. Selenium supports CSS1 through CSS3 selectors syntax except CSS3 namespaces and the following -

pseudo-classes

  • :nth-of-type
  • :nth-last-of-type
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :visited
  • :hover
  • :active
  • :focus
  • :indeterminate

pseudo-elements

  • ::first-line
  • ::first-letter
  • ::selection
  • ::before
  • ::after

Pros

  • Much faster than XPath
  • Widely used in the webpages designing
  • Provides a good balance between structure and attributes
  • Allows for selection of elements by their nearby context

Cons

  • It is more complex to form a CSS selector
  • Require a steeper learning curve

Example

Now, let’s understand the working of tag class name locator with the help of a simple example. We will launch Chrome and navigate to bing.com. Here, we will try to locate the search box using class name Locator.

Class Name Or CSS

On inspecting the above web element, we can see an input tag has attribute class name. Now, We will use the value of class name locator i.e."sb_form_q" to perform search.

Class Name Or CSS

Let’s see how the automation of the search look like in Selenium IDE that send value "India" to the search box using class name locator.

Class Name Or CSS

The java program for the above test is - 

// Generated by Selenium IDE
import org.junit.Test; 
import org.junit.Before; 
import org.junit.After; 
import static org.junit.Assert.*; 
import static org.hamcrest.CoreMatchers.is; 
import static org.hamcrest.core.IsNot.not; 
import org.openqa.selenium.By; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.firefox.FirefoxDriver; 
import org.openqa.selenium.chrome.ChromeDriver; 
import org.openqa.selenium.remote.RemoteWebDriver; 
import org.openqa.selenium.remote.DesiredCapabilities; 
import org.openqa.selenium.Dimension; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.interactions.Actions; 
import org.openqa.selenium.support.ui.ExpectedConditions; 
import org.openqa.selenium.support.ui.WebDriverWait; 
import org.openqa.selenium.JavascriptExecutor; 
import org.openqa.selenium.Alert; 
import org.openqa.selenium.Keys; 
import java.util.*; 
import java.net.MalformedURLException; 
import java.net.URL; 
public class LocatorsTest { 
    private WebDriver driver;   
    private Map<String, Object> vars; 
    JavascriptExecutor js;   

    @Before   
    public void setUp() {     
        driver = new ChromeDriver();     
        js = (JavascriptExecutor) driver;     
        vars = new HashMap();   
    }   

    @After   
    public void tearDown() {     
        driver.quit();  
    }   

    @Test   
    public void locators() {     
        driver.get("https://www.bing.com/");     
        driver.manage().window().setSize(new Dimension(1051, 806));     
        driver.findElement(By.cssSelector("#sb_form_q")).click();     
        driver.findElement(
                By.cssSelector("#sb_form_q")).sendKeys("india");     
        driver.findElement(
                By.cssSelector("#sb_form_q")).sendKeys(Keys.ENTER);     
        {       
            WebElement element = driver.findElement(
                    By.cssSelector(".itm_cap"));       
            Actions builder = new Actions(driver);       
            builder.moveToElement(element).perform();    
        } 
    } 
}

When we run the java program, Chrome driver launches chrome, redirect to bing search page, enter the search key word as "india" and navigate to search results page. Refer the below image for the output -

Class Name Or CSS

The above example gives a clear understanding of how name locator in Selenium works.