Migrate more selectors to use data-testid

app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -281,7 +281,7 @@ export default {
           :shape="$options.AVATAR_SHAPE_OPTION_RECT"
         />
         <div>
-          <div data-testid="project-name" data-qa-selector="project_name">{{ item.name }}</div>
+          <div data-testid="project-name">{{ item.name }}</div>
           <div class="gl-text-gray-500" data-testid="project-full-path">
             {{ item.fullPath }}
           </div>

app/assets/javascripts/authentication/password/components/password_input.vue

@@ -27,11 +27,6 @@ export default {
       required: false,
       default: null,
     },
-    qaSelector: {
-      type: String,
-      required: false,
-      default: null,
-    },
     testid: {
       type: String,
       required: false,
@@ -80,7 +75,6 @@ export default {
       :autocomplete="autocomplete"
       :name="name"
       :minlength="minimumPasswordLength"
-      :data-qa-selector="qaSelector"
       :data-testid="testid"
       :title="title"
       :type="type"

app/assets/javascripts/authentication/password/index.js

@@ -9,7 +9,7 @@ export const initPasswordInput = () => {
     }
 
     const { form } = el;
-    const { title, id, minimumPasswordLength, qaSelector, testid, autocomplete, name } = el.dataset;
+    const { title, id, minimumPasswordLength, testid, autocomplete, name } = el.dataset;
 
     // eslint-disable-next-line no-new
     new Vue({
@@ -21,7 +21,6 @@ export const initPasswordInput = () => {
             title,
             id,
             minimumPasswordLength,
-            qaSelector,
             testid,
             autocomplete,
             name,

app/assets/javascripts/authentication/two_factor_auth/components/manage_two_factor_form.vue

@@ -119,7 +119,6 @@ export default {
         type="password"
         name="current_password"
         :state="currentPasswordState"
-        data-qa-selector="current_password_field"
       />
     </gl-form-group>
 

app/assets/javascripts/blob/filepath_form/components/template_selector.vue

@@ -149,7 +149,6 @@ export default {
       block
       class="gl-font-regular"
       data-testid="template-selector"
-      data-qa-selector="template_selector"
       :toggle-text="dropdownToggleText"
       :search-placeholder="$options.i18n.searchPlaceholder"
       :items="dropdownItems"

app/helpers/ssh_keys_helper.rb

@@ -7,11 +7,11 @@ def ssh_key_delete_modal_data(key, path)
     {
         path: path,
         method: 'delete',
-        qa_selector: 'delete_ssh_key_button',
+        testid: 'delete-ssh-key-button',
         title: title,
         aria_label: title,
         modal_attributes: {
-            'data-qa-selector': 'ssh_key_delete_modal',
+            'data-testid': 'ssh-key-delete-modal',
             title: _('Are you sure you want to delete this SSH key?'),
             message: _('This action cannot be undone, and will permanently delete the %{key} SSH key') % { key: key.title },
             okVariant: 'danger',

app/views/profiles/keys/_form.html.haml

@@ -5,12 +5,12 @@
 
     .form-group
       = f.label :key, s_('Profiles|Key'), class: 'label-bold'
-      = f.text_area :key, class: "form-control gl-form-input js-add-ssh-key-validation-input", rows: 8, required: true, data: { supported_algorithms: Gitlab::SSHPublicKey.supported_algorithms, qa_selector: 'key_public_key_field' }
+      = f.text_area :key, class: "form-control gl-form-input js-add-ssh-key-validation-input", rows: 8, required: true, data: { supported_algorithms: Gitlab::SSHPublicKey.supported_algorithms, testid: 'key-public-key-field' }
       %p.form-text.text-muted= s_('Profiles|Begins with %{ssh_key_algorithms}.') % { ssh_key_algorithms: ssh_key_allowed_algorithms }
     .form-row
       .col.form-group
         = f.label :title, s_('Profiles|Title'), class: 'label-bold'
-        = f.text_field :title, class: "form-control gl-form-input input-lg", required: true, placeholder: s_('Profiles|Example: MacBook key'), data: { qa_selector: 'key_title_field' }
+        = f.text_field :title, class: "form-control gl-form-input input-lg", required: true, placeholder: s_('Profiles|Example: MacBook key'), data: { testid: 'key-title-field' }
         %p.form-text.text-muted= s_('Profiles|Key titles are publicly visible.')
     .form-row
       .col.form-group
@@ -32,6 +32,6 @@
         button_options: { class: 'js-add-ssh-key-validation-confirm-submit' }) do
         = _("Yes, add it")
 
-    = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit", pajamas_button: true, data: { qa_selector: 'add_key_button' }
+    = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit", pajamas_button: true, data: { testid: 'add-key-button' }
     = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-add-ssh-key-validation-cancel gl-ml-2 js-toggle-button' }) do
       = _('Cancel')

app/views/profiles/keys/_key_table.html.haml

@@ -3,7 +3,7 @@
 
 - if @keys.any?
   .table-holder
-    %table.table.b-table.gl-table.b-table-stacked-md.gl-mt-n1.gl-mb-n2.ssh-keys-list{ data: { qa_selector: 'ssh_keys_list' } }
+    %table.table.b-table.gl-table.b-table-stacked-md.gl-mt-n1.gl-mb-n2.ssh-keys-list{ data: { testid: 'ssh-keys-list' } }
       %thead.d-none.d-md-table-header-group
         %tr
           %th= _('Title')

qa/qa/page/file/form.rb

@@ -15,7 +15,7 @@ class Form < Page::Base
         end
 
         view 'app/assets/javascripts/blob/filepath_form/components/template_selector.vue' do
-          element :template_selector
+          element 'template-selector'
         end
 
         def add_name(name)
@@ -35,7 +35,7 @@ def add_custom_name(template_name)
         def select_template(template_type, template)
           case template_type
           when '.gitignore', '.gitlab-ci.yml', 'Dockerfile', 'LICENSE'
-            click_element :template_selector
+            click_element 'template-selector'
           else
             raise %(Unsupported template_type "#{template_type}". Please confirm that it is a valid option.)
           end

qa/qa/page/profile/ssh_keys.rb

@@ -5,9 +5,9 @@ module Page
     module Profile
       class SSHKeys < Page::Base
         view 'app/views/profiles/keys/_form.html.haml' do
-          element :key_title_field
-          element :key_public_key_field
-          element :add_key_button
+          element 'key-title-field'
+          element 'key-public-key-field'
+          element 'add-key-button'
         end
 
         view 'app/assets/javascripts/access_tokens/components/expires_at_field.vue' do
@@ -15,25 +15,25 @@ class SSHKeys < Page::Base
         end
 
         view 'app/helpers/ssh_keys_helper.rb' do
-          element :delete_ssh_key_button
-          element :ssh_key_delete_modal
+          element 'delete-ssh-key-button'
+          element 'ssh-key-delete-modal'
         end
 
         view 'app/views/profiles/keys/_key_table.html.haml' do
-          element :ssh_keys_list
+          element 'ssh-keys-list'
         end
 
         def add_key(public_key, title)
           click_button('Add new key')
 
-          fill_element(:key_public_key_field, public_key)
-          fill_element(:key_title_field, title)
+          fill_element('key-public-key-field', public_key)
+          fill_element('key-title-field', title)
           # Expire in 2 days just in case the key is created just before midnight
           fill_expiry_date(Date.today + 2)
           # Close the datepicker
           find_element('expiry-date-field').find('input').send_keys(:enter)
 
-          click_element(:add_key_button)
+          click_element('add-key-button')
         end
 
         def fill_expiry_date(date)
@@ -50,19 +50,19 @@ def fill_expiry_date(date)
         def remove_key(title)
           click_link(title)
 
-          click_element(:delete_ssh_key_button)
+          click_element('delete-ssh-key-button')
 
           # Retrying due to https://gitlab.com/gitlab-org/gitlab/-/issues/255287
           retry_on_exception do
-            wait_for_animated_element(:ssh_key_delete_modal)
-            within_element(:ssh_key_delete_modal) do
+            wait_for_animated_element('ssh-key-delete-modal')
+            within_element('ssh-key-delete-modal') do
               click_button('Delete')
             end
           end
         end
 
         def keys_list
-          find_element(:ssh_keys_list).text
+          find_element('ssh-keys-list').text
         end
       end
     end

spec/frontend/authentication/password/components/password_input_spec.js

@@ -9,7 +9,6 @@ describe('PasswordInput', () => {
     title: 'This field is required',
     id: 'new_user_password',
     minimumPasswordLength: '8',
-    qaSelector: 'new_user_password_field',
     testid: 'new_user_password',
     autocomplete: 'new-password',
     name: 'new_user',