How to get HTML5 data attribute using xpath?

Question

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')]]")); 

Solution 1

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

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

Solution 2

You get the table like this:

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

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

Solution 3

I think you can also use the cssSelector

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

Solution 4

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"));

View more solutions

Comments

[d0rf47]

this may work but generally for automation testing on projects undergoing development it may not be good practice since if any changes are made to the dom on that specific page your xpath will most likely change and you'll have to re-write the test cases