Wait for requests when checking for project files

Use Page Object methods that invoke has_element? because it calls
wait_for_requests, which will wait for the files to load, and then
it will be safe for the test to check for file names and file content

app/assets/javascripts/repository/components/preview/index.vue

@@ -56,7 +56,7 @@ export default {
         </gl-link>
       </div>
     </div>
-    <div class="blob-viewer">
+    <div class="blob-viewer" data-qa-selector="blob_viewer_content">
       <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
       <div v-else-if="readme" ref="readme" v-html="readme.html"></div>
     </div>

app/views/layouts/nav/_breadcrumbs.html.haml

@@ -7,7 +7,7 @@
       = button_tag class: 'toggle-mobile-nav', type: 'button' do
         %span.sr-only= _("Open sidebar")
         = icon ('bars')
-    .breadcrumbs-links.js-title-container
+    .breadcrumbs-links.js-title-container{ data: { qa_selector: 'breadcrumb_links_content' } }
       %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list
         - unless hide_top_links
           = header_title

qa/qa.rb

@@ -385,6 +385,7 @@ module QA
     # Classes describing components that are used by several pages.
     #
     module Component
+      autoload :Breadcrumbs, 'qa/page/component/breadcrumbs'
       autoload :CiBadgeLink, 'qa/page/component/ci_badge_link'
       autoload :ClonePanel, 'qa/page/component/clone_panel'
       autoload :LazyLoader, 'qa/page/component/lazy_loader'

qa/qa/page/component/breadcrumbs.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module Breadcrumbs
+        def self.included(base)
+          base.view 'app/views/layouts/nav/_breadcrumbs.html.haml' do
+            element :breadcrumb_links_content
+          end
+        end
+
+        def has_breadcrumb?(text)
+          has_element?(:breadcrumb_links_content, text: text)
+        end
+      end
+    end
+  end
+end

qa/qa/page/project/show.rb

@@ -5,8 +5,13 @@ module QA
     module Project
       class Show < Page::Base
         include Page::Component::ClonePanel
+        include Page::Component::Breadcrumbs
         include Page::Project::SubMenus::Settings
 
+        view 'app/assets/javascripts/repository/components/preview/index.vue' do
+          element :blob_viewer_content
+        end
+
         view 'app/assets/javascripts/repository/components/table/row.vue' do
           element :file_name_link
         end
@@ -90,7 +95,7 @@ module QA
 
         def click_file(filename)
           within_element(:file_tree_table) do
-            click_on filename
+            click_element(:file_name_link, text: filename)
           end
         end
 
@@ -115,6 +120,10 @@ module QA
           has_element?(:project_name_content, text: name)
         end
 
+        def has_readme_content?(text)
+          has_element?(:blob_viewer_content, text: text)
+        end
+
         def last_commit_content
           find_element(:commit_content).text
         end

qa/qa/specs/features/browser_ui/1_manage/group/transfer_project_spec.rb

@@ -47,8 +47,8 @@ module QA
         Page::Project::Settings::Main.perform(&:click_project)
 
         Page::Project::Show.perform do |project|
-          expect(project).to have_text(target_group.path)
-          expect(project).to have_text(edited_readme_content)
+          expect(project).to have_breadcrumb(target_group.path)
+          expect(project).to have_readme_content(edited_readme_content)
         end
       end
     end

qa/qa/specs/features/browser_ui/3_create/repository/protocol_v2_push_ssh_spec.rb

@@ -60,12 +60,15 @@ module QA
           end
         end
 
-        project.visit!
         project.wait_for_push_new_branch
+        project.visit!
 
-        expect(page).to have_content(file_name)
-        expect(page).to have_content(file_content)
         expect(git_protocol_reported).to eq(git_protocol)
+
+        Page::Project::Show.perform do |show|
+          expect(show).to have_file(file_name)
+          expect(show).to have_readme_content(file_content)
+        end
       end
     end
   end

qa/qa/specs/features/browser_ui/3_create/repository/push_http_private_token_spec.rb

@@ -24,8 +24,10 @@ module QA
 
         Page::Project::Show.perform(&:wait_for_viewers_to_load)
 
-        expect(page).to have_content('README.md')
-        expect(page).to have_content('This is a test project')
+        Page::Project::Show.perform do |project|
+          expect(project).to have_file('README.md')
+          expect(project).to have_readme_content('This is a test project')
+        end
       end
     end
   end

qa/qa/specs/features/browser_ui/3_create/repository/push_over_http_spec.rb

@@ -12,8 +12,10 @@ module QA
           push.commit_message = 'Add README.md'
         end.project.visit!
 
-        expect(page).to have_content('README.md')
-        expect(page).to have_content('This is a test project')
+        Page::Project::Show.perform do |project|
+          expect(project).to have_file('README.md')
+          expect(project).to have_readme_content('This is a test project')
+        end
       end
     end
   end

spec/frontend/repository/components/preview/__snapshots__/index_spec.js.snap

@@ -27,6 +27,7 @@ exports[`Repository file preview component renders file HTML 1`] = `
    
   <div
     class="blob-viewer"
+    data-qa-selector="blob_viewer_content"
   >
     <div>
       <div