The By.className() method

Before we discuss the className() method, we have to talk a little about style and CSS. Every HTML element on a web page, generally, is styled by the web page developer or designer. It is not mandatory that each element should be styled, but they generally are to make the page appealing to the end user.

So, in order to apply styles to an element, they can be declared directly in the element tag, or placed in a separate file called the CSS file and can be referenced in the element using the class attribute. For instance, a style attribute for a button can be declared in a CSS file as follows:

.buttonStyle{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0% 2%;
}

Now, this style can be applied to the button element in a web page as follows:

<button name="sampleBtnName" id="sampleBtnId" class="buttonStyle">I'm Button</button>

So, buttonStyle is used as the value for the class attribute of the button element, and it inherits all the styles declared in the CSS file. Now, let's try this on our Homepage. We will try to make WebDriver identify the search button using its class name and click on it.

First, in order to get the class name of the search button, as we know, we will use Developers tools to fetch it. After getting it, change the location mechanism to By.className and specify the class attribute value in it. The code for that is as follows:

@Test
public void byClassNameLocatorExample() {
    WebElement searchBox = driver.findElement(By.id("search"));
    searchBox.sendKeys("Electronics");
    WebElement searchButton = 
            driver.findElement(By.className("search-button"));
    searchButton.click();
    assertThat(driver.getTitle())
            .isEqualTo("Search results for: 'Electronics'");
}

In the preceding code, we have used the By.className locating mechanism by passing the class attribute value to it.

Sometimes, an element might have multiple values given for the class attribute. For example, the Search button has button and search-button values specified in the class attribute in the following HTML snippet:

<button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>

We have to use one of the values of the class attribute with the By.className method. In this case, we can either use button or search-button, whichever uniquely identifies the element.