Improving pipeline editor E2E test

app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue

@@ -98,6 +98,7 @@ export default {
         class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex"
         :class="buttonClass"
         :title="__('Toggle sidebar')"
+        data-qa-selector="toggle_sidebar_collapse_button"
         @click="toggleDrawer"
       >
         <span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">
@@ -105,7 +106,12 @@ export default {
         </span>
         <gl-icon data-testid="toggle-icon" :name="buttonIconName" />
       </gl-button>
-      <div v-if="isExpanded" class="gl-h-full gl-p-5" data-testid="drawer-content">
+      <div
+        v-if="isExpanded"
+        class="gl-h-full gl-p-5"
+        data-testid="drawer-content"
+        data-qa-selector="drawer_content"
+      >
         <getting-started-card class="gl-mb-4" />
         <first-pipeline-card class="gl-mb-4" />
         <visualize-and-lint-card class="gl-mb-4" />

app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue

@@ -247,6 +247,7 @@ export default {
     <gl-infinite-scroll
       :fetched-items="branches.length"
       :max-list-height="250"
+      data-qa-selector="branch_menu_container"
       @bottomReached="fetchNextBranches"
     >
       <template #items>
@@ -255,7 +256,7 @@ export default {
           :key="branch"
           :is-checked="currentBranch === branch"
           :is-check-item="true"
-          data-qa-selector="menu_branch_button"
+          data-qa-selector="branch_menu_item_button"
           @click="selectBranch(branch)"
         >
           {{ branch }}

app/assets/javascripts/vue_shared/components/source_editor.vue

@@ -96,6 +96,7 @@ export default {
     :id="`source-editor-${fileGlobalId}`"
     ref="editor"
     data-editor-loading
+    data-qa-selector="source_editor_container"
     @[$options.readyEvent]="$emit($options.readyEvent)"
   >
     <pre class="editor-loading-content">{{ value }}</pre>

qa/qa/page/project/pipeline_editor/show.rb

@@ -6,37 +6,59 @@ module QA
       module PipelineEditor
         class Show < QA::Page::Base
           view 'app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue' do
-            element :branch_selector_button
-            element :menu_branch_button
+            element :branch_selector_button, require: true
+            element :branch_menu_item_button
+            element :branch_menu_container
           end
 
           view 'app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue' do
-            element :target_branch_field
+            element :target_branch_field, require: true
           end
 
-          def has_branch_selector_button?
-            has_element? :branch_selector_button
+          view 'app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue' do
+            element :toggle_sidebar_collapse_button
+            element :drawer_content
           end
 
-          def click_branch_selector_button
-            wait_until(reload: false) do
-              has_element?(:branch_selector_button)
-            end
-            click_element(:branch_selector_button, skip_finished_loading_check: true)
+          view 'app/assets/javascripts/vue_shared/components/source_editor.vue' do
+            element :source_editor_container, require: true
           end
 
-          def select_branch_from_dropdown(branch_to_switch_to)
-            wait_until(reload: false) do
-              has_element?(:menu_branch_button)
-            end
-            click_element(:menu_branch_button, text: branch_to_switch_to, skip_finished_loading_check: true)
+          def initialize
+            super
+
+            wait_for_requests
+            close_toggle_sidebar
+          end
+
+          def open_branch_selector_dropdown
+            click_element(:branch_selector_button)
+          end
+
+          def select_branch_from_dropdown(branch_name)
+            wait_for_animated_element(:branch_menu_container)
+            click_element(:branch_menu_item_button, text: branch_name)
+
+            wait_for_requests
           end
 
           def target_branch_name
-            wait_until(reload: false) do
-              has_element?(:target_branch_field)
-            end
-            find_element(:target_branch_field, skip_finished_loading_check: true).value
+            find_element(:target_branch_field).value
+          end
+
+          def editing_content
+            find_element(:source_editor_container).text
+          end
+
+          private
+
+          # If the page thinks user has never opened pipeline editor before
+          # It will expand pipeline editor sidebar by default
+          # Collapse the sidebar if it is expanded
+          def close_toggle_sidebar
+            return unless has_element?(:drawer_content)
+
+            click_element(:toggle_sidebar_collapse_button)
           end
         end
       end

qa/qa/specs/features/browser_ui/4_verify/pipeline/pipeline_editor_branch_switcher_spec.rb

@@ -2,7 +2,9 @@
 
 module QA
   RSpec.describe 'Verify' do
-    describe 'Pipeline editor', :requires_admin do
+    describe 'Pipeline editor' do
+      let(:random_test_string) { SecureRandom.hex(10) }
+
       let(:project) do
         Resource::Project.fabricate_via_api! do |project|
           project.name = 'pipeline-editor-project'
@@ -17,70 +19,71 @@ module QA
             [
               {
                 file_path: '.gitlab-ci.yml',
-                content: default_file_content
+                content: <<~YAML
+                  stages:
+                    - test
+
+                  initialize:
+                    stage: test
+                    script:
+                      - echo "I am now on branch #{project.default_branch}"
+                YAML
               }
             ]
           )
         end
       end
 
-      let!(:production_push) do
-        Resource::Repository::Push.fabricate! do |push|
-          push.repository_http_uri = project.repository_http_location.uri
-          push.branch_name = 'production'
-          push.file_name = '.gitlab-ci.yml'
-          push.file_content = production_file_content
-        end
-      end
-
-      let(:default_file_content) do
-        <<~YAML
-          stages:
-            - test
-          
-          initialize:
-            stage: test
-            script:
-              - echo "initialized in #{project.default_branch}"
-        YAML
-      end
+      let!(:test_branch) do
+        Resource::Repository::ProjectPush.fabricate! do |resource|
+          resource.project = project
+          resource.branch_name = random_test_string
+          resource.file_name = '.gitlab-ci.yml'
+          resource.file_content = <<~YAML
+            stages:
+              - test
 
-      let(:production_file_content) do
-        <<~YAML
-          stages:
-            - test
-          
-          initialize:
-            stage: test
-            script:
-              - echo "initialized in production"
-        YAML
+            initialize:
+              stage: test
+              script:
+                - echo "I am now on branch #{random_test_string}"
+          YAML
+        end
       end
 
       before do
         Flow::Login.sign_in
         project.visit!
-        Page::Project::Menu.perform(&:go_to_pipeline_editor)
+
+        # Project push sometimes takes a while to complete
+        # Making sure new branch is pushed successfully prior to interacting
+        Support::Retrier.retry_until(max_duration: 15, sleep_interval: 3, reload_page: false, message: 'Ensuring project has branch') do
+          project.has_branch?(random_test_string)
+        end
       end
 
       after do
         project.remove_via_api!
-        Page::Main::Menu.perform(&:sign_out)
       end
 
       it 'can switch branches and target branch field updates accordingly', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/quality/test_cases/1891' do
+        Page::Project::Menu.perform(&:go_to_pipeline_editor)
         Page::Project::PipelineEditor::Show.perform do |show|
-          expect(show).to have_branch_selector_button
-
-          show.click_branch_selector_button
-          show.select_branch_from_dropdown(production_push.branch_name)
+          show.open_branch_selector_dropdown
+          show.select_branch_from_dropdown(random_test_string)
 
-          expect(show.target_branch_name).to eq(production_push.branch_name)
+          aggregate_failures do
+            expect(show.target_branch_name).to eq(random_test_string), 'Target branch field is not showing expected branch name.'
+            expect(show.editing_content).to have_content(random_test_string), 'Editor content does not include expected test string.'
+          end
 
-          show.click_branch_selector_button
+          show.open_branch_selector_dropdown
           show.select_branch_from_dropdown(project.default_branch)
 
-          expect(show.target_branch_name).to eq(project.default_branch)
+          aggregate_failures do
+            expect(show.target_branch_name).to eq(project.default_branch), 'Target branch field is not showing expected branch name.'
+            expect(show.editing_content).to have_content(project.default_branch), 'Editor content does not include expected test string.'
+          end
         end
       end
     end

spec/frontend/vue_shared/components/__snapshots__/source_editor_spec.js.snap

@@ -3,6 +3,7 @@
 exports[`Source Editor component rendering matches the snapshot 1`] = `
 <div
   data-editor-loading=""
+  data-qa-selector="source_editor_container"
   id="source-editor-snippet_777"
 >
   <pre