How To Use HTML5 Data-* Attributes with JQuery and Selenium

BY ALEX TATIYANTS

November 12th, 2012

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()
driver.get("http://www.oursite.com")
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.

References:
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:
    January 31, 2013 at 9:25 am

    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
    firefox.findElement(By.cssSelector
    (“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 –


    Hyderabad
    (HYD)


    Kolkata
    (CCU)

    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.

    Regards,
    Pranoy

  2. Daniel@AskMobi says:
    February 27, 2013 at 12:19 pm

    This helped me out quite a bit, thank you.

  3. Pavan Deshpande says:
    July 7, 2013 at 7:24 am

    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 | notes4geeks says:
    March 8, 2014 at 3:50 am

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

  5. Joe says:
    October 23, 2014 at 3:20 pm

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

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