diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index fa35b87ef2b..ba14aaeed2c 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -165,7 +165,7 @@
     <gl-loading-icon
       v-if="isLoading"
       :size="2"
-      class="js-job-loading prepend-top-20"
+      class="js-job-loading qa-loading-animation prepend-top-20"
     />
 
     <template v-else-if="shouldRenderContent">
@@ -217,8 +217,8 @@
         />
 
         <!--job log -->
-        <div 
-          v-if="hasTrace" 
+        <div
+          v-if="hasTrace"
           class="build-trace-container prepend-top-default">
           <log-top-bar
             :class="{
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index accda5d1bd8..ffa6ada3e28 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -42,7 +42,7 @@
   };
 </script>
 <template>
-  <pre class="js-build-trace build-trace">
+  <pre class="js-build-trace build-trace qa-build-trace">
     <code
       class="bash"
       v-html="trace"
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index a2518e2a611..c60052fec50 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -43,7 +43,7 @@ export default {
   computed: {
     cssClass() {
       const className = this.status.group;
-      return className ? `ci-status ci-${className}` : 'ci-status';
+      return className ? `ci-status ci-${className} qa-status-badge` : 'ci-status qa-status-badge';
     },
   },
 };
diff --git a/qa/qa/page/project/job/show.rb b/qa/qa/page/project/job/show.rb
index 5baf6439cfc..d688f15914c 100644
--- a/qa/qa/page/project/job/show.rb
+++ b/qa/qa/page/project/job/show.rb
@@ -4,30 +4,39 @@ module QA::Page
       COMPLETED_STATUSES = %w[passed failed canceled blocked skipped manual].freeze # excludes created, pending, running
       PASSED_STATUS = 'passed'.freeze
 
-      view 'app/views/shared/builds/_build_output.html.haml' do
-        element :build_output, '.js-build-output' # rubocop:disable QA/ElementWithPattern
-        element :loading_animation, '.js-build-refresh' # rubocop:disable QA/ElementWithPattern
+      view 'app/assets/javascripts/jobs/components/job_app.vue' do
+        element :loading_animation
+      end
+
+      view 'app/assets/javascripts/jobs/components/job_log.vue' do
+        element :build_trace
       end
 
       view 'app/assets/javascripts/vue_shared/components/ci_badge_link.vue' do
-        element :status_badge, 'ci-status' # rubocop:disable QA/ElementWithPattern
+        element :status_badge
       end
 
       def completed?
-        COMPLETED_STATUSES.include? find('.ci-status').text
+        COMPLETED_STATUSES.include?(status_badge)
       end
 
       def passed?
-        find('.ci-status').text == PASSED_STATUS
+        status_badge == PASSED_STATUS
       end
 
       def trace_loading?
-        has_css?('.js-build-refresh')
+        has_element?(:loading_animation)
       end
 
       # Reminder: You may wish to wait for a particular job status before checking output
       def output
-        find('.js-build-output').text
+        find_element(:build_trace).text
+      end
+
+      private
+
+      def status_badge
+        find_element(:status_badge).text
       end
     end
   end