Skip to content Skip to sidebar Skip to footer

Test Automation Html Element Selectors. Element Id Or Dataattribute

I'm currently placing some ID's on elements for UI Test automation. These ID's are only being used for testing. Should I be adding data-attributes instead possibly making it more

Solution 1:

This is close to being opinion-based, by here is the summary that should help to make a choice.

Why would you use an ID attribute:

  • this is a common and familiar to everybody doing test automation way to locate elements
  • this is generally the fastest way to locate elements on a page because selenium gets it down to executing document.getElementById() which is optimized by the modern browsers (though, usually performance of the end-to-end UI tests is not critical)
  • it is a built-in locator in every selenium language binding
  • if you would use Firebug or Chrome Developer Tools - the CSS selector and XPath generation tools would generally provide more robust locators using the ids of the element whenever possible
  • you would build shorter CSS selectors and XPath expressions. E.g. #myid .someclass as opposed to [automation-id=myid] .someclass.

Why would you use a custom attribute:

  • if you would add, say, automation-id attributes to all the desired elements, you would somewhat namespace/scope it to the test automation - everybody would know what is this for just from the attribute name. Meaning, you would dramatically decrease chances of a developer changing the attribute intentionally as opposed to an id attribute, which can and is usually used for application client-side logic as well (reference to this and this answer)

Also, here are some relevant threads:

Solution 2:

I would go with the data attribute instead, as you (or someone else) might need to use an ID for targeting the element for JS later. No one is ever going to need to target your custom data attribute for anything other than testing.

Post a Comment for "Test Automation Html Element Selectors. Element Id Or Dataattribute"