How to Get Html5 Data Attribute Using Xpath?

How to Get Html5 Data Attribute Using Xpath?

How do I get the first table (table1) using xpath for Webdriver?

<span id="dynamically generated id" data-id="table1">
  <table>
  ...
  </table>
</span>

<span id="dynamically generated id" data-id="table2">
  <table>
  ...
  </table>
</span>

I am able to get all data-id elements but I want to filter within it for text table1 to get the exact element.

This did not work!

driver.findElement(By.xpath("//@*[starts-with(name(),'data-id') [contains(text(),'table1')]]")); 

4 Answers

You get the table like this:

//span[@data-id='table1']/table

Select the data-id attribute and get the child element of name table.

Answering my own question...This appears to get the exact element.

driver.findElement(By.xpath("//*[@data-id='table1']"))
1

I think you can also use the cssSelector

driver.findElement(By.cssSelector("[data-id='table1']"));

Try (built this be combining xpath: find a node that has a given attribute whose value contains a string and Getting attribute using XPath)

driver.findElement(By.xpath("//*[contains(@data-id, 'table1')]/@data-id"));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Sarah Jenkins
Author

Sarah Jenkins

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.