Rewrite page objects to be decoupled from CSS

[joshsmith]

Problem

https://dockyard.com/blog/2015/09/25/ember-best-practices-acceptance-tests

The first approach we’re going to talk about is decoupling your acceptance tests from the HTML structure and CSS of your application. If your tests are breaking due to semantic HTML or class name changes but the end experience to the user is nearly exactly the same, this should be a red flag that your tests are too closely coupled to the HTML and CSS of your application. Our acceptance tests should be from the perspective of a user interacting with the application. A user doesn’t care about whether the element they are clicking on is a <button> or a <span> or whether we use a class name of post or blog-post. They care that they can read a blog post, comment on it, and like it.

However, we can’t perfectly decouple our tests from presentation, as we still need to be able to find the elements that we need to interact with and make assertions against. One approach to minimizing the coupling is to add a data attribute to elements that we want to target during our tests. Data attributes are attributes that are prefixed with data- and are intended to store meta data on elements

Subtasks

• Create individual issues for page objects / components / etc that need decoupled
• Submit PRs for those page objects / components / etc
• ???
• Profit!

References

Related to: #697

[WenInCode]

I like this idea. At my work we use aria-labels a lot and select from them as they are pretty descriptive and don't change often.

[joshsmith]

@WenInCode yeah I'm not as big a fan of aria since that's for accessibility, but the principle is sound.