Update remaining .qa- class selectors with data-qa-selectors

To keep up to date with our testing standards, deprecated qa class selectors should be replaced with data-qa-selectors. We've made good progress on this by updating selectors when the corresponding page objects are touched but this effort needs a final push to completion to reduce technical debt and as it will have an affect with future use of Chemlab.

A quick search of .vue and .haml files finds a few hundred qa class selectors left. There are also some tests that bypass selectors all together and need selectors added. Breaking changes to the latter would not be caught by the qa:selectors job that runs in every MR so updating them is a priority.

Overall goals:

  • Update vue files with data-qa-selectors: 100% completed
  • Update haml files with data-qa-selectors 100% completed
  • Identify and fix any missing selectors and list them in the corresponding page objects so they'll be included in the qa:selectors job.
  • Remove and replace any reference to qa selectors in non-qa files. 100% completed

Individual MRs:

A full package-and-qa run should be completed for each MR to ensure no tests break. If it is found that a non-e2e test uses a qa class selector or data-qa-selector, update that selector and corresponding tests to use data-testid instead as noted here

Edited by Désirée Chevalier