Hello Folks,

Recently I learnt new thing so just wanted to share with you.

We will see how to locate web elements which has multiple class names as html attribute.

See carefully below html code:

You will see “CLASS” attribute which has value as “required_field cityPadRight ac_input“.

Actually above web element has multiple class name separated by space. It has three class named “required_field”,  “cityPadRight” and “ac_input”.

How to locate such web element?

Using classname locator:

Let’s write locator using classname as below and run:

driver.findElement(By.className(“required_field cityPadRight ac_input”));




Java code:

Let’s run above code:

We are passing correct classname but still we get exception stating invalid selecor. It is because above web element has multiple class name separated by space.

You can use classname locator with individual class names as below:

driver.findElement(By.className(“required_field”)); // It will match all web elements which has class name “required_field”.

driver.findElement(By.className(“cityPadRight”));// It will match all web elements which has class name “cityPadRight”.

driver.findElement(By.className(“ac_input”));// It will match all web elements which has class name “ac_input”.

You need to use index concept to get exact match of web element and it might be keep changing if developers add web elements with existing class names.

Using xpath locator:

We will use xpath with attribute name and values method.

driver.findElement(By.xpath(“//input[@class=’required_field cityPadRight ac_input’]”)).sendKeys(“fewfazf”);

Java code:

Output:

Xpath worked perfectly fine because it consider class as attribute and we just passed value of attribute.

Using CSS selector:

We know how to write css selector for web element using class name.

If you don’t know, refer below tutorial:

CSS Selector In Selenium Webdriver: Points You Must Know

If we write css selector as:

            input.required_field cityPadRight ac_input

It will be invalid CSS selector because of same reason mentioned above for classname locator.

You can use individual class name as below but it will not help much in locating elements uniquely:

input.required_field ( It will match all web elements which has class name “required_field”.)

input.cityPadRight (It will match all web elements which has class name “required_field”)

input.ac_input ( It will match all web elements which has class name “required_field”.)

So, if you need to write unique CSS selector for such web elements, you need to write as below:

 input.required_field.cityPadRight.ac_input

You need to connect all class names separately using (.) dot operator.

Add below line in above code and run. It will work perfectly.

driver.findElement(By.cssSelector(“input.required_field.cityPadRight.ac_input”));

So, to locate web element with multiple class name, use CSS selector and Xpath.

I hope it must have helped you.

If you have any doubt, feel free to ask here.

If you like my posts, please like, comment, share and subscribe.

#ThanksForReading

#HappySelenium




6 thoughts on “How To Locate Web Element Which Has Multiple Class Names

Leave a Reply