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

Trước tiên, hãy đọc bài viết được liên kết về acceptance testing của Ember và issue liên quan #697; issue này không nêu tệp hoặc bài kiểm thử nào để bắt đầu. Bước tiếp theo được nêu là xác định các page objects hoặc component cần được tách rời và tạo các issue riêng lẻ cho chúng, vì vậy ở đây không có tiêu chí hoàn thành được giới hạn rõ ràng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.