6

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 readable to future developers(data-testHandle="mybutton") or should I stick with ID's.

w3.org says:

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

I'm leaning towards keeping ids but some part of me thinks that future developers would think the ID's aren't used and remove them.

Any best practices here. Thanks.

RayLoveless
  • 19,880
  • 21
  • 76
  • 94
  • 4
    I don't think this should be closed. Maybe it could be worded differently. But these questions do arise when working with automated tests. – Winnemucca Apr 05 '17 at 20:57
  • Future developers should not remove IDs willy-nilly - exactly as they will not willy-nilly would not remove variables or methods: because someone else might be using them. And if they do, automated regression test will show the brekage. You do have automated test, do you not? – Peter M. - stands for Monica Jun 23 '17 at 16:57

2 Answers2

8

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:

Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • 1
    +1, I would also add that an id is shorter to write: `#myid` for a Css selector and `id('myid')` for an XPath. – Florent B. May 27 '16 at 22:49
  • Thanks! Great links. I think this post will help others. – RayLoveless Jun 01 '16 at 15:14
  • Your 3rd link is to a blog (http://techblog.constantcontact.com/software-development/a-better-way-to-id-elements-in-selenium-tests/ ) which cannot be voted on - so IMHO is in **NOT** a good argument for abandoning IDs. Majority of opinions seems to prefer ID over other attributes. Advice refuting consensus opinion requires stronger evidence. – Peter M. - stands for Monica Jun 23 '17 at 16:54
  • I am not sure if am suppose to comment here. I am developing hybrid app and have included id as in `
    ` but QA teams are not able to get those ids. Am I doing anything wrong here?
     – Jimit Patel Jun 08 '18 at 07:25
  • 2
    @JimitPatel There is not enough information to answer you, and it's not the right place to ask. Please make separate post where you ask your question with more information. – Victor Zamanian May 13 '19 at 11:28
7

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.

Ken Stipek
  • 1,512
  • 8
  • 12