Merge branch 'e2e-add-qa-selector-checkout-page' into 'master'

Add qa-selector on checkout page

See merge request gitlab-org/gitlab!55428

ee/app/assets/javascripts/subscriptions/new/components/checkout/billing_address.vue

@@ -144,22 +144,35 @@ export default {
           v-autofocusonshow
           :options="countryOptionsWithDefault"
           class="js-country"
+          data-qa-selector="country"
           @change="fetchStates"
         />
       </gl-form-group>
       <gl-form-group :label="$options.i18n.streetAddressLabel" label-size="sm" class="mb-3">
-        <gl-form-input v-model="streetAddressLine1Model" type="text" />
-        <gl-form-input v-model="streetAddressLine2Model" type="text" class="mt-2" />
+        <gl-form-input
+          v-model="streetAddressLine1Model"
+          type="text"
+          data-qa-selector="street_address_1"
+        />
+        <gl-form-input
+          v-model="streetAddressLine2Model"
+          type="text"
+          data-qa-selector="street_address_2"
+        />
       </gl-form-group>
       <gl-form-group :label="$options.i18n.cityLabel" label-size="sm" class="mb-3">
-        <gl-form-input v-model="cityModel" type="text" />
+        <gl-form-input v-model="cityModel" type="text" data-qa-selector="city" />
       </gl-form-group>
       <div class="combined d-flex">
         <gl-form-group :label="$options.i18n.stateLabel" label-size="sm" class="mr-3 w-50">
-          <gl-form-select v-model="countryStateModel" :options="stateOptionsWithDefault" />
+          <gl-form-select
+            v-model="countryStateModel"
+            :options="stateOptionsWithDefault"
+            data-qa-selector="state"
+          />
         </gl-form-group>
         <gl-form-group :label="$options.i18n.zipCodeLabel" label-size="sm" class="w-50">
-          <gl-form-input v-model="zipCodeModel" type="text" />
+          <gl-form-input v-model="zipCodeModel" type="text" data-qa-selector="zip_code" />
         </gl-form-group>
       </div>
     </template>

ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue

@@ -144,7 +144,12 @@ export default {
   >
     <template #body>
       <gl-form-group :label="$options.i18n.selectedPlanLabel" label-size="sm" class="mb-3">
-        <gl-form-select v-model="selectedPlanModel" v-autofocusonshow :options="availablePlans" />
+        <gl-form-select
+          v-model="selectedPlanModel"
+          v-autofocusonshow
+          :options="availablePlans"
+          data-qa-selector="plan_name"
+        />
       </gl-form-group>
       <gl-form-group
         v-if="isShowingGroupSelector"
@@ -157,6 +162,7 @@ export default {
           ref="group-select"
           v-model="selectedGroupModel"
           :options="groupOptionsWithDefault"
+          data-qa-selector="group_name"
         />
       </gl-form-group>
       <gl-form-group
@@ -175,6 +181,7 @@ export default {
             type="number"
             :min="selectedGroupUsers"
             :disabled="!isSetupForCompany"
+            data-qa-selector="number_of_users"
           />
         </gl-form-group>
         <gl-form-group