diff --git a/app/assets/javascripts/repository/components/breadcrumbs.vue b/app/assets/javascripts/repository/components/breadcrumbs.vue
index b347f97a5ae9b36ec34348f73a967f958df699d3..e3cd2d2e842eec0aa9929d9b03076c96dabbf46e 100644
--- a/app/assets/javascripts/repository/components/breadcrumbs.vue
+++ b/app/assets/javascripts/repository/components/breadcrumbs.vue
@@ -184,7 +184,7 @@ export default {
               this.currentPath ? encodeURIComponent(this.currentPath) : '',
             ),
             extraAttrs: {
-              'data-qa-selector': 'new_file_menu_item',
+              'data-testid': 'new-file-menu-item',
             },
           },
           {
@@ -284,7 +284,6 @@ export default {
           :toggle-text="__('Add to tree')"
           toggle-class="add-to-tree gl-ml-2"
           data-testid="add-to-tree"
-          data-qa-selector="add_to_tree_dropdown"
           text-sr-only
           icon="plus"
           :items="dropdownItems"
diff --git a/app/assets/javascripts/repository/components/fork_info.vue b/app/assets/javascripts/repository/components/fork_info.vue
index 42108e8dfbae2f496883d2a46183aaf8f3097531..c0adbc6f38c73a68ce10a4abbe3bf49712e06aee 100644
--- a/app/assets/javascripts/repository/components/fork_info.vue
+++ b/app/assets/javascripts/repository/components/fork_info.vue
@@ -291,7 +291,7 @@ export default {
       >
         <div v-if="sourceName">
           {{ $options.i18n.forkedFrom }}
-          <gl-link data-qa-selector="forked_from_link" :href="sourcePath">{{ sourceName }}</gl-link>
+          <gl-link data-testid="forked-from-link" :href="sourcePath">{{ sourceName }}</gl-link>
           <gl-skeleton-loader v-if="isLoading" :lines="1" />
           <div v-else class="gl-text-secondary" data-testid="divergence-message">
             <gl-sprintf :message="forkDivergenceMessage">
diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index bdcacd80b30bba03c05d7809f00a63ebd8894a3e..be446260f827b769d0c19fe79846c19481af28a9 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -67,7 +67,7 @@ export default {
         </gl-link>
       </div>
     </div>
-    <div class="blob-viewer" data-qa-selector="blob_viewer_content" itemprop="about">
+    <div class="blob-viewer" data-testid="blob-viewer-content" itemprop="about">
       <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="my-4 mx-auto" />
       <div
         v-else-if="readme"
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 557e9cd168fe7559839ea41ee495a52f763330b0..3da7daa3eecfd5a21e40d6e288f37759193b0391 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -118,7 +118,7 @@ export default {
         class="table tree-table"
         :class="{ 'gl-table-layout-fixed': !showParentRow }"
         aria-live="polite"
-        data-qa-selector="file_tree_table"
+        data-testid="file-tree-table"
       >
         <table-header v-once />
         <tbody>
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index a76d822317ac846004689a4398cde12b537085e2..526757e614710637313455569c688dc8abb2f65e 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -219,7 +219,7 @@ export default {
           'is-submodule': isSubmodule,
         }"
         class="tree-item-link str-truncated"
-        data-qa-selector="file_name_link"
+        data-testid="file-name-link"
       >
         <file-icon
           :file-name="fullPath"
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index cb341ede9de7acb74f0ed665bf98136ae0142b8d..7445a4038650cdf76a3e7fe608dc64784d635571 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -21,7 +21,7 @@
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
 
   - if is_project_overview && has_project_shortcut_buttons
-    .project-buttons.gl-mb-5.js-show-on-project-root{ data: { qa_selector: 'project_buttons' } }
+    .project-buttons.gl-mb-5.js-show-on-project-root{ data: { testid: 'project-buttons' } }
       = render 'stat_anchor_list', anchors: @project.statistics_buttons(show_auto_devops_callout: show_auto_devops_callout), project_buttons: true
 
   #js-tree-list{ data: vue_file_list_data(project, ref) }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 759ec541af5613d4be5065983b051050e0b97268..ce4a423bc31c234c8887fbe90674320ac33dcc78 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -8,13 +8,13 @@
       %div{ class: 'avatar-container rect-avatar s64 home-panel-avatar gl-flex-shrink-0 gl-w-11 gl-h-11 gl-mr-3! float-none' }
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
+        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { testid: 'project-name-content' }, itemprop: 'name' }
           = @project.name
           = visibility_level_content(@project, css_class: 'visibility-icon gl-text-secondary gl-ml-2', icon_css_class: 'icon')
           = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project, additional_classes: 'gl-align-self-center gl-ml-2'
           - if @project.group
             = render_if_exists 'shared/tier_badge', source: @project, source_type: 'Project'
-        .home-panel-metadata.gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { qa_selector: 'project_id_content' }, itemprop: 'identifier' }
+        .home-panel-metadata.gl-font-sm.gl-text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal{ data: { testid: 'project-id-content' }, itemprop: 'identifier' }
           - if can?(current_user, :read_project, @project)
             %span.gl-display-inline-block.gl-vertical-align-middle
               = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
@@ -52,13 +52,13 @@
     = render_if_exists "projects/home_mirror"
 
   - if @project.badges.present?
-    .project-badges.mb-2{ data: { qa_selector: 'project_badges_content' } }
+    .project-badges.mb-2{ data: { testid: 'project-badges-content' } }
       - @project.badges.each do |badge|
         - badge_link_url = badge.rendered_link_url(@project)
         %a.gl-mr-3{ href: badge_link_url,
           target: '_blank',
           rel: 'noopener noreferrer',
-          data: { qa_selector: 'badge_image_link', qa_link_url: badge_link_url } }>
+          data: { testid: 'badge-image-link', qa_link_url: badge_link_url } }>
           %img.project-badge{ src: badge.rendered_image_url(@project),
             'aria-hidden': true,
             alt: 'Project badge' }>
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 89c91887d1981b9c229b27ced95d94a22844a764..240e951997509ff96a2b8d65ab09995c50b9db5a 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -16,5 +16,5 @@
 
     - if create_mr_button_from_event?(event)
       - c.with_actions do
-        = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path_from_push_event(event), button_options: { data: { qa_selector: 'create_merge_request_button' }}) do
+        = render Pajamas::ButtonComponent.new(variant: :confirm, href: create_mr_path_from_push_event(event), button_options: { data: { testid: 'create-merge-request-button' }}) do
           = _('Create merge request')
diff --git a/app/views/projects/blob/viewers/_loading.html.haml b/app/views/projects/blob/viewers/_loading.html.haml
index d8efaf9ad9593c2779537cb26ca8216200fac429..40b64cac1f79d54f265493a643b0da6c96b34e78 100644
--- a/app/views/projects/blob/viewers/_loading.html.haml
+++ b/app/views/projects/blob/viewers/_loading.html.haml
@@ -1 +1 @@
-= gl_loading_icon(size: "md", css_class: "gl-my-4", data: { qa_selector: 'spinner_placeholder' })
+= gl_loading_icon(size: "md", css_class: "gl-my-4", data: { testid: 'spinner-placeholder' })
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index c845cd51bd76f31f935d731ad3bdb1e870526c3c..b3282742407f645c00191570c9332489b87a0b39 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -6,7 +6,7 @@
 - if !project.empty_repo? && can?(current_user, :download_code, project)
   - archive_prefix = "#{project.path}-#{ref.tr('/', '-')}"
   .project-action-button.dropdown.gl-dropdown.inline{ class: css_class }>
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'dropdown-toggle gl-dropdown-toggle dropdown-icon-only has-tooltip', title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { qa_selector: 'download_source_code_button' } }) do
+    = render Pajamas::ButtonComponent.new(button_options: { class: 'dropdown-toggle gl-dropdown-toggle dropdown-icon-only has-tooltip', title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download'), 'data-display' => 'static', data: { testid: 'download-source-code-button' } }) do
       = sprite_icon('download', css_class: 'gl-icon dropdown-icon')
       %span.sr-only=  _('Select Archive Format')
       = sprite_icon('chevron-down', css_class: 'gl-icon dropdown-chevron')
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index deb3c33f7333331e42e4c50ece9ed4479e7cdf04..902a5df9394780e5f71dfb352195f6796d8c666c 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -17,7 +17,7 @@
   %p
     = _('You can get started by cloning the repository or start adding files to it with one of the following options.')
 
-.project-buttons{ data: { qa_selector: 'quick_actions_container' } }
+.project-buttons{ data: { testid: 'quick-actions-container' } }
   .project-clone-holder.d-block.d-md-none.gl-mt-3.gl-mr-3
     = render "shared/mobile_clone_panel"
 
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index dad6480706d8f5d06055795622659b72a55b42d9..44b16ba2d890ca818a70f8c0effa64a5f57205f9 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,5 +1,5 @@
 .tree-ref-container.gl-display-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
-  .tree-ref-holder.gl-max-w-26{ data: { qa_selector: 'ref_dropdown_container' } }
+  .tree-ref-holder.gl-max-w-26{ data: { testid: 'ref-dropdown-container' } }
     #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
 
   #js-repo-breadcrumb{ data: breadcrumb_data_attributes }
diff --git a/qa/qa/page/project/show.rb b/qa/qa/page/project/show.rb
index 59cccfd665a1e74ef39bbbb2fbf0aaa8b542dbba..acc0f4cc2935d71e55af9087b5481a78dd6b1345 100644
--- a/qa/qa/page/project/show.rb
+++ b/qa/qa/page/project/show.rb
@@ -14,15 +14,15 @@ class Show < Page::Base
         prepend Mobile::Page::Project::Show if Runtime::Env.phone_layout?
 
         view 'app/assets/javascripts/repository/components/preview/index.vue' do
-          element :blob_viewer_content
+          element 'blob-viewer-content'
         end
 
         view 'app/assets/javascripts/repository/components/table/row.vue' do
-          element :file_name_link
+          element 'file-name-link'
         end
 
         view 'app/assets/javascripts/repository/components/table/index.vue' do
-          element :file_tree_table
+          element 'file-tree-table'
         end
 
         view 'app/views/layouts/header/_new_dropdown.html.haml' do
@@ -30,23 +30,22 @@ class Show < Page::Base
         end
 
         view 'app/views/projects/_last_push.html.haml' do
-          element :create_merge_request_button
+          element 'create-merge-request-button'
         end
 
         view 'app/views/projects/_home_panel.html.haml' do
-          element :project_name_content
-          element :project_id_content
-          element :project_badges_content
-          element :badge_image_link
+          element 'project-name-content'
+          element 'project-id-content'
+          element 'project-badges-content'
+          element 'badge-image-link'
         end
 
         view 'app/views/projects/_files.html.haml' do
-          element :project_buttons
-          element :tree_holder, '.tree-holder' # rubocop:disable QA/ElementWithPattern
+          element 'project-buttons'
         end
 
         view 'app/assets/javascripts/repository/components/fork_info.vue' do
-          element :forked_from_link
+          element 'forked-from-link'
         end
 
         view 'app/assets/javascripts/forks/components/forks_button.vue' do
@@ -54,39 +53,39 @@ class Show < Page::Base
         end
 
         view 'app/views/projects/empty.html.haml' do
-          element :quick_actions_container
+          element 'quick-actions-container'
         end
 
         view 'app/assets/javascripts/repository/components/breadcrumbs.vue' do
-          element :add_to_tree_dropdown
-          element :new_file_menu_item
+          element 'add-to-tree'
+          element 'new-file-menu-item'
         end
 
         view 'app/views/projects/blob/viewers/_loading.html.haml' do
-          element :spinner_placeholder
+          element 'spinner-placeholder'
         end
 
         view 'app/views/projects/buttons/_download.html.haml' do
-          element :download_source_code_button
+          element 'download-source-code-button'
         end
 
         view 'app/views/projects/tree/_tree_header.html.haml' do
-          element :ref_dropdown_container
+          element 'ref-dropdown-container'
         end
 
         def wait_for_viewers_to_load
-          has_no_element?(:spinner_placeholder, wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
+          has_no_element?('spinner-placeholder', wait: QA::Support::Repeater::DEFAULT_MAX_WAIT_TIME)
         end
 
         def create_first_new_file!
-          within_element(:quick_actions_container) do
+          within_element('quick-actions-container') do
             click_link_with_text 'New file'
           end
         end
 
         def create_new_file!
-          click_element :add_to_tree_dropdown
-          click_element :new_file_menu_item
+          click_element 'add-to-tree'
+          click_element 'new-file-menu-item'
         end
 
         # Click by JS is needed to bypass the VSCode Web IDE popover
@@ -98,47 +97,47 @@ def fork_project
         end
 
         def forked_from?(parent_project_name)
-          has_element?(:forked_from_link, text: parent_project_name)
+          has_element?('forked-from-link', text: parent_project_name)
         end
 
         def click_file(filename)
-          within_element(:file_tree_table) do
-            click_element(:file_name_link, text: filename)
+          within_element('file-tree-table') do
+            click_element('file-name-link', text: filename)
           end
         end
 
         def click_commit(commit_msg)
           wait_for_requests
 
-          within_element(:file_tree_table) do
+          within_element('file-tree-table') do
             click_on commit_msg
           end
         end
 
         def has_create_merge_request_button?
-          has_css?(element_selector_css(:create_merge_request_button))
+          has_css?(element_selector_css('create-merge-request-button'))
         end
 
         def has_file?(name)
-          return false unless has_element?(:file_tree_table)
+          return false unless has_element?('file-tree-table')
 
-          within_element(:file_tree_table) do
-            has_element?(:file_name_link, text: name)
+          within_element('file-tree-table') do
+            has_element?('file-name-link', text: name)
           end
         end
 
         def has_no_file?(name)
-          within_element(:file_tree_table) do
-            has_no_element?(:file_name_link, text: name)
+          within_element('file-tree-table') do
+            has_no_element?('file-name-link', text: name)
           end
         end
 
         def has_name?(name)
-          has_element?(:project_name_content, text: name)
+          has_element?('project-name-content', text: name)
         end
 
         def has_readme_content?(text)
-          has_element?(:blob_viewer_content, text: text)
+          has_element?('blob-viewer-content', text: text)
         end
 
         def new_merge_request
@@ -146,7 +145,7 @@ def new_merge_request
             has_create_merge_request_button?
           end
 
-          click_element :create_merge_request_button
+          click_element 'create-merge-request-button'
         end
 
         def open_web_ide!
@@ -166,34 +165,28 @@ def has_edit_fork_button?
         end
 
         def project_name
-          find_element(:project_name_content).text
+          find_element('project-name-content').text
         end
 
         def project_id
-          find_element(:project_id_content).text.delete('Project ID: ')
+          find_element('project-id-content').text.delete('Project ID: ')
         end
 
         def switch_to_branch(branch_name)
-          within_element(:ref_dropdown_container) do
+          within_element('ref-dropdown-container') do
             expand_select_list
             select_item(branch_name)
           end
         end
 
-        def wait_for_import
-          wait_until(reload: true) do
-            has_css?('.tree-holder')
-          end
-        end
-
         def has_visible_badge_image_link?(link_url)
-          within_element(:project_badges_content) do
-            has_element?(:badge_image_link, link_url: link_url)
+          within_element('project-badges-content') do
+            has_element?('badge-image-link', link_url: link_url)
           end
         end
 
         def has_license?(name)
-          within_element(:project_buttons) do
+          within_element('project-buttons') do
             has_link?(name)
           end
         end
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index 17ebdf8725dca100202712abd7369d6363f40ab8..af7eca6a52d8088c43050d8af1b50de273560560 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -9,7 +9,7 @@ exports[`Repository table row component renders a symlink table row 1`] = `
   >
     <a
       class="str-truncated tree-item-link"
-      data-qa-selector="file_name_link"
+      data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
@@ -65,7 +65,7 @@ exports[`Repository table row component renders table row 1`] = `
   >
     <a
       class="str-truncated tree-item-link"
-      data-qa-selector="file_name_link"
+      data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
@@ -121,7 +121,7 @@ exports[`Repository table row component renders table row for path with special
   >
     <a
       class="str-truncated tree-item-link"
-      data-qa-selector="file_name_link"
+      data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >