Rewrite page objects to be decoupled from CSS

# 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 `` or a `` 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

Read the linked Ember acceptance-testing article and related issue #697 first; this issue names no files or tests to start from. Its stated next step is to identify page objects or components that need decoupling and create individual issues for them, so there is no bounded completion criterion here.

由索引模型根據 Issue 內容生成。