diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index 440623b34f5..571eb28f195 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -17,14 +17,14 @@
   .ci-variable-row-body
     %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id }
     %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
-    %input.js-ci-variable-input-key.ci-variable-body-item.form-control{ type: "text",
+    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control{ type: "text",
       name: key_input_name,
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
     .ci-variable-body-item
-      .form-control.js-secret-value-placeholder{ class: ('hide' unless id) }
+      .form-control.js-secret-value-placeholder.qa-ci-variable-input-value{ class: ('hide' unless id) }
         = '*' * 20
-      %textarea.js-ci-variable-input-value.js-secret-value.form-control{ class: ('hide' if id),
+      %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
         rows: 1,
         name: value_input_name,
         placeholder: s_('CiVariables|Input variable value') }
diff --git a/qa/qa/page/project/settings/secret_variables.rb b/qa/qa/page/project/settings/secret_variables.rb
index 89f1424a5fa..ba3633cff9e 100644
--- a/qa/qa/page/project/settings/secret_variables.rb
+++ b/qa/qa/page/project/settings/secret_variables.rb
@@ -7,10 +7,8 @@ module QA
 
           view 'app/views/ci/variables/_variable_row.html.haml' do
             element :variable_row, '.ci-variable-row-body'
-            element :variable_key, '.js-ci-variable-input-key'
-            element :variable_value, '.js-ci-variable-input-value'
-            element :key_placeholder, 'Input variable key'
-            element :value_placeholder, 'Input variable value'
+            element :variable_key, '.qa-ci-variable-input-key'
+            element :variable_value, '.qa-ci-variable-input-value'
           end
 
           view 'app/views/ci/variables/_index.html.haml' do
@@ -19,10 +17,13 @@ module QA
           end
 
           def fill_variable(key, value)
-            all('.js-ci-variable-input-key')[-1].set(key)
+            keys = all('.qa-ci-variable-input-key')
+            index = keys.size - 1
+
             # After we fill the key, JS would generate another field so
-            # we need to fill the one before last one instead of last one
-            all('.js-ci-variable-input-value')[-2].set(value)
+            # we need to use the same index to find the corresponding one.
+            keys[index].set(key)
+            all('.qa-ci-variable-input-value')[index].set(value)
           end
 
           def save_variables
@@ -35,7 +36,7 @@ module QA
 
           def variable_value(key)
             within('.ci-variable-row-body', text: key) do
-              find('.js-ci-variable-input-value').value
+              find('.qa-ci-variable-input-value').value
             end
           end
         end