Apply exact matching for test selectors

What does this MR do and why?

This change limits data-test and data-qa-selector to match in our QA tests only when the exact string is used: locating variants with a different case will not locate the element anymore.

• :element_name -> matches data-qa-selector="element_name" or data-testid="element_name"
• 'element-name' -> matches data-qa-selector="element-name" or data-testid="element-name"

Why?

By using an exact match elements in production code and the corresponding finder can be easily located by contributors.

This will reduce pitfalls when searching dangling references manually.

I used a script to automatically update the selectors in the page files:

#!/bin/bash
cd gitlab/qa

for selector in $(bundle exec bin/qa Test::Sanity::Selectors 2> /dev/null | sed -En 's/.*`([a-z0-9_]*)`.*/\1/p' | sort -u)
do
  echo "Replacing $selector... in qa/page"
  find qa/page -type f -name "*.rb" -exec sed -i '' s/\:$selector/\'${selector//_/-}\'/ {} \;
  echo "Replacing $selector... in qa/ee/page"
  find qa/ee/page -type f -name "*.rb" -exec sed -i '' s/\:$selector/\'${selector//_/-}\'/ {} \;
done  

After running the script, there are few more manual fixes required.

Screenshots or screen recordings

NA

How to set up and validate locally

Locally we can start with this sanity check:

cd qa
bundle exec bin/qa Test::Sanity::Selectors

After that, I used the QA pipeline to verify the all our tests pass, and went ahead and fixed the ones that failed.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #419916 (closed)