I recently wrote a post about when it’s appropriate to use CSS classes. In it, I made the case that HTML5 data-* attributes can be used instead of CSS classes to identify elements on a page. In this post, I’ll describe exactly how to do this.

Find Me a City

Let’s start with the following HTML fragment:

<div data-element="city">Los Angeles</div>

Here we have a div which displays the name of a city and has a data-element attribute to identify it as such.

To find this element, we’ll need to use a CSS Attribute Selector. The syntax for attribute selectors is pretty straight-forward:
[attributeName="attribute value"].

For instance, to find this element in jQuery, we’d do this:

var city = $('[data-element="city"]');

The same CSS attribute selector can be used in Selenium:

WebDriver driver = new FirefoxDriver()
WebElement element = driver.findElement(By.cssSelector('[data-element="city"]'))

As you can see, CSS attribute selectors make using data-* attributes a painless affair. This simplicity, combined with the fact that you can get semantically rich markup without overloading the class attribute, make data-* attributes worth considering.

jQuery attribute selectors
Selenium Web Driver – Locating UI Elements

You may also like:

Did you love / hate / were unmoved by this post?
Then show your support / disgust / indifference by following me on Twitter!

This post got 6 comments so far. Care to add yours?

  1. Pranoy says:

    Hi Alex,

    I am having an issue regarding element location with selenium webdriver. I tried your way of locating but webdriver cannot locate the target element.
    I tried with following code
    (“div#widget div#autoHolder ul.ui-autocomplete li.ui-menu-item a.ui-corner-all div:contains(‘Kolkata’)”)).click(); where the error says “org.openqa.selenium.WebDriverException: An invalid or illegal string was specified………” I even tried with …contains(“Kolkata”)..where webdriver doesnot recognize double quotes(“”) in contains().
    My html code is –



    Tag has multiple similar tag,only name Kolkata,Hyderabad,etc are different between . I need to select just one name like Kolkata or Hyderabad or any one name. I am able to locate the jquery but unable to select single name,i.e Kolkata or any single name.
    Website is http://www.makemytrip.com and in it need to select city from “Leaving from” input text.
    Could you please help me to get the correct ccsSelectors code,thanks in advance.


  2. This helped me out quite a bit, thank you.

  3. Hi Alex i dint came across selenium whats it’s purpose you can achieve attribute selector with jQuery
    you can check out this i used html and jquery only jQuery Attribute

  4. […] How To Use HTML5 Data-* Attributes with JQuery and Selenium […]

  5. Joe says:

    this does not work at all, for exap=mple, this will not work:

    WebElement element = driver.findElement(By.cssSelector(‘[data-element=”city”]’))