Use qa selectors for secret variables

The problem of using .js-ci-variable-input-value is that,
whenever the value is hidden, then this selector won't be set,
instead, .js-secret-value-placeholder would be set.

If we just fill the value, the value is revealed. But if
we visit this later, the values were be hidden. This means
we don't have a consistent way to count the values.

Adding an unique qa selector to both revealed and hidden
values would make it easier to track the values.

To make it look more consistent, let's also do the same
for the key.

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') }

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