Update QA ci variables spec

Updated page object and relative
spec to ensure E2E is working
like it should.

app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue

@@ -65,12 +65,6 @@ export default {
     modalActionText() {
       return this.variableBeingEdited ? __('Update variable') : __('Add variable');
     },
-    primaryAction() {
-      return {
-        text: this.modalActionText,
-        attributes: { variant: 'success', disabled: !this.canSubmit },
-      };
-    },
     maskedFeedback() {
       return __('This variable can not be masked');
     },
@@ -120,6 +114,8 @@ export default {
     ref="modal"
     :modal-id="$options.modalId"
     :title="modalActionText"
+    static
+    lazy
     @hidden="resetModalHandler"
   >
     <form>
@@ -127,7 +123,7 @@ export default {
         <gl-form-input
           id="ci-variable-key"
           v-model="variableData.key"
-          data-qa-selector="variable_key"
+          data-qa-selector="ci_variable_key_field"
         />
       </gl-form-group>
 
@@ -142,7 +138,7 @@ export default {
           v-model="variableData.secret_value"
           rows="3"
           max-rows="6"
-          data-qa-selector="variable_value"
+          data-qa-selector="ci_variable_value_field"
         />
       </gl-form-group>
 
@@ -189,7 +185,7 @@ export default {
         <gl-form-checkbox
           ref="masked-ci-variable"
           v-model="variableData.masked"
-          data-qa-selector="variable_masked"
+          data-qa-selector="ci_variable_masked_checkbox"
         >
           {{ __('Mask variable') }}
           <gl-link href="/help/ci/variables/README#masked-variables">
@@ -218,6 +214,7 @@ export default {
         ref="deleteCiVariable"
         category="secondary"
         variant="danger"
+        data-qa-selector="ci_variable_delete_button"
         @click="deleteVarAndClose"
         >{{ __('Delete variable') }}</gl-deprecated-button
       >
@@ -225,6 +222,7 @@ export default {
         ref="updateOrAddVariable"
         :disabled="!canSubmit"
         variant="success"
+        data-qa-selector="ci_variable_save_button"
         @click="updateOrAddVariable"
         >{{ modalActionText }}
       </gl-deprecated-button>

app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue

@@ -26,7 +26,6 @@ export default {
     {
       key: 'value',
       label: s__('CiVariables|Value'),
-      tdClass: 'qa-ci-variable-input-value',
       customStyle: { width: '40%' },
     },
     {
@@ -89,6 +88,7 @@ export default {
       :fields="fields"
       :items="variables"
       tbody-tr-class="js-ci-variable-row"
+      data-qa-selector="ci_variable_table_content"
       sort-by="key"
       sort-direction="asc"
       stacked="lg"
@@ -150,6 +150,7 @@ export default {
         <gl-deprecated-button
           ref="edit-ci-variable"
           v-gl-modal-directive="$options.modalId"
+          data-qa-selector="edit_ci_variable_button"
           @click="editVariable(item)"
         >
           <gl-icon :size="$options.iconSize" name="pencil" />
@@ -168,7 +169,7 @@ export default {
       <gl-deprecated-button
         v-if="tableIsNotEmpty"
         ref="secret-value-reveal-button"
-        data-qa-selector="reveal_ci_variable_value"
+        data-qa-selector="reveal_ci_variable_value_button"
         class="append-right-8"
         @click="toggleValues(!valuesHidden)"
         >{{ valuesButtonText }}</gl-deprecated-button
@@ -176,7 +177,7 @@ export default {
       <gl-deprecated-button
         ref="add-ci-variable"
         v-gl-modal-directive="$options.modalId"
-        data-qa-selector="add_ci_variable"
+        data-qa-selector="add_ci_variable_button"
         variant="success"
         >{{ __('Add Variable') }}</gl-deprecated-button
       >

changelogs/unreleased/update-ci-variable-qa-test.yml

+---
+title: Fix failing ci variable e2e test
+merge_request: 25924
+author:
+type: fixed

qa/qa/page/project/settings/ci_variables.rb

@@ -7,75 +7,47 @@ module QA
         class CiVariables < Page::Base
           include Common
 
-          view 'app/views/ci/variables/_variable_row.html.haml' do
-            element :variable_row, '.ci-variable-row-body' # rubocop:disable QA/ElementWithPattern
-            element :variable_key, '.qa-ci-variable-input-key' # rubocop:disable QA/ElementWithPattern
-            element :variable_value, '.qa-ci-variable-input-value' # rubocop:disable QA/ElementWithPattern
-            element :variable_masked
+          view 'app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue' do
+            element :ci_variable_key_field
+            element :ci_variable_value_field
+            element :ci_variable_masked_checkbox
+            element :ci_variable_save_button
+            element :ci_variable_delete_button
           end
 
-          view 'app/views/ci/variables/_index.html.haml' do
-            element :save_variables, '.js-ci-variables-save-button' # rubocop:disable QA/ElementWithPattern
-            element :reveal_values, '.js-secret-value-reveal-button' # rubocop:disable QA/ElementWithPattern
+          view 'app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue' do
+            element :ci_variable_table_content
+            element :add_ci_variable_button
+            element :edit_ci_variable_button
+            element :reveal_ci_variable_value_button
           end
 
           def fill_variable(key, value, masked)
-            keys = all_elements(:ci_variable_input_key, minimum: 1)
-            index = keys.size - 1
-
-            # After we fill the key, JS would generate another field so
-            # we need to use the same index to find the corresponding one.
-            keys[index].set(key)
-            node = all_elements(:ci_variable_input_value, count: keys.size + 1)[index]
-
-            # Simply run `node.set(value)` is too slow for long text here,
-            # so we need to run JavaScript directly to set the value.
-            # The code was inspired from:
-            # https://github.com/teamcapybara/capybara/blob/679548cea10773d45e32808f4d964377cfe5e892/lib/capybara/selenium/node.rb#L217
-            execute_script("arguments[0].value = #{value.to_json}", node)
-
-            masked_node = all_elements(:variable_masked, count: keys.size + 1)[index]
-            toggle_masked(masked_node, masked)
-          end
-
-          def save_variables
-            find('.js-ci-variables-save-button').click
-          end
-
-          def reveal_variables
-            find('.js-secret-value-reveal-button').click
+            fill_element :ci_variable_key_field, key
+            fill_element :ci_variable_value_field, value
+            click_ci_variable_save_button
           end
 
-          def variable_value(key)
-            within('.ci-variable-row-body', text: key) do
-              find('.qa-ci-variable-input-value').value
-            end
+          def click_add_variable
+            click_element :add_ci_variable_button
           end
 
-          def remove_variable(location: :first)
-            within('.ci-variable-row-body', match: location) do
-              find('button.ci-variable-row-remove-button').click
+          def click_edit_ci_variable
+            within_element(:ci_variable_table_content) do
+              click_element :edit_ci_variable_button
             end
-
-            save_variables
           end
 
-          private
-
-          def toggle_masked(masked_node, masked)
-            wait_until(reload: false) do
-              masked_node.click
-
-              masked ? masked_enabled?(masked_node) : masked_disabled?(masked_node)
-            end
+          def click_ci_variable_save_button
+            click_element :ci_variable_save_button
           end
 
-          def masked_enabled?(masked_node)
-            masked_node[:class].include?('is-checked')
+          def click_reveal_ci_variable_value_button
+            click_element :reveal_ci_variable_value_button
           end
 
-          def masked_disabled?(masked_node)
-            !masked_enabled?(masked_node)
+          def click_ci_variable_delete_button
+            click_element :ci_variable_delete_button
           end
         end
       end

qa/qa/resource/ci_variable.rb

@@ -19,9 +19,8 @@ module QA
 
         Page::Project::Settings::CICD.perform do |setting|
           setting.expand_ci_variables do |page|
+            page.click_add_variable
             page.fill_variable(key, value, masked)
-
-            page.save_variables
           end
         end
       end

qa/qa/specs/features/browser_ui/4_verify/ci_variable/add_remove_ci_variable_spec.rb

@@ -2,7 +2,7 @@
 
 module QA
   context 'Verify' do
-    describe 'Add or Remove CI variable via UI', :smoke, quarantine: { issue: 'https://gitlab.com/gitlab-org/gitlab/issues/207915', type: :stale } do
+    describe 'Add or Remove CI variable via UI', :smoke do
       let!(:project) do
         Resource::Project.fabricate_via_api! do |project|
           project.name = 'project-with-ci-variables'
@@ -10,6 +10,14 @@ module QA
         end
       end
 
+      before(:all) do
+        Runtime::Feature.enable_and_verify('new_variables_ui')
+      end
+
+      after(:all) do
+        Runtime::Feature.remove('new_variables_ui')
+      end
+
       before do
         Flow::Login.sign_in
         add_ci_variable
@@ -19,12 +27,12 @@ module QA
       it 'user adds a CI variable' do
         Page::Project::Settings::CICD.perform do |settings|
           settings.expand_ci_variables do |page|
-            expect(page).to have_field(with: 'VARIABLE_KEY')
-            expect(page).not_to have_field(with: 'some_CI_variable')
+            expect(page).to have_text('VARIABLE_KEY')
+            expect(page).not_to have_text('some_CI_variable')
 
-            page.reveal_variables
+            page.click_reveal_ci_variable_value_button
 
-            expect(page).to have_field(with: 'some_CI_variable')
+            expect(page).to have_text('some_CI_variable')
           end
         end
       end
@@ -32,9 +40,10 @@ module QA
       it 'user removes a CI variable' do
         Page::Project::Settings::CICD.perform do |settings|
           settings.expand_ci_variables do |page|
-            page.remove_variable
+            page.click_edit_ci_variable
+            page.click_ci_variable_delete_button
 
-            expect(page).not_to have_field(with: 'VARIABLE_KEY')
+            expect(page).not_to have_text('VARIABLE_KEY')
           end
         end
       end