In the past I had thoughts for more elegant HTML item selection. I found there may be a better approach, in contrast to "traditional" one.
Old school way:
.site-body .menu-box > li.item a.link
Advantage: No unnecessary HTML attributes.
Disadvantage: If frontend devs change CSS of HTML elements, your test is likely to break.
Test-only custom attribute way:
I could simply use my custom selector, which would be used only for purposes and select the same HTML element as follows:
[qa="menu-link"]
Advantage: Since we would have a special HTML attribute only for tests, tests would not be broken if frontend devs will modify CSS by any way. Selectors are much more elegant and readable.
Disadvantage: Unused custom HTML attributes in production code.
This approach is not just my invention, looks like even the most popular PHP framework Laravel encourages their users to do so: https://laravel.com/docs/7.x/dusk#dusk-selectors
What would be your killing argument not to use test-specific custom selectors? So far it looks like a good idea to me.
id
s have to be unique andname
s can only appear on a subset of elements. There's a two-way communication of e.g.data-qa="foo"
, between the tests and the code; as well as simplifying the selectors in the test code, while you're looking at the HTML you know that's being relied upon by some automation, whereas anid
,name
or any other vanilla attribute might not be.