Review and resolve dev use of qa selectors in their specs

Recently, master was broken because a qa selector class was removed from an element and an rspec test referenced it. As of right now there are a couple dozen additional spots where qa class selectors/data-qa-selectors are being used in dev tests, and these are potential future breakages as we shift from using classes to data selectors.

Failed job example: https://gitlab.com/gitlab-org/gitlab-ce/-/jobs/260312333 MR that broke master: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/30922

We should:

  • Reduce the immediate risk of additional breakages by decoupling any existing specs that use qa class selectors or data-qa-selectors from those selectors. For any selector used like .qa-this-thing or data-qa-selector=, the specs will be changed to use data-testid= and that data attribute will be added to the element in question.
  • Announce in the Engineering week in review that this change was made and why.
  • Add a note about this in https://docs.gitlab.com/ee/development/testing_guide/frontend_testing.html#how-to-query-dom-elements

cc @zeffmorgan

Edited by Désirée Chevalier