Refactor more common Page Objects to use data tags

Common usages within GitLab QA include login page, navbars and layouts

app/views/devise/shared/_signup_box.html.haml

@@ -7,26 +7,26 @@
         = render "devise/shared/error_messages", resource: resource
       .name.form-group
         = f.label :name, _('Full name'), class: 'label-bold'
-        = f.text_field :name, class: "form-control top qa-new-user-name js-block-emoji js-validate-length", :data => { :max_length => max_name_length, :max_length_message => s_("SignUp|Name is too long (maximum is %{max_length} characters).") % { max_length: max_name_length } }, required: true, title: _("This field is required.")
+        = f.text_field :name, class: "form-control top js-block-emoji js-validate-length", :data => { :max_length => max_name_length, :max_length_message => s_("SignUp|Name is too long (maximum is %{max_length} characters).") % { max_length: max_name_length }, :qa_selector => 'new_user_name_field' }, required: true, title: _("This field is required.")
       .username.form-group
         = f.label :username, class: 'label-bold'
-        = f.text_field :username, class: "form-control middle qa-new-user-username js-block-emoji js-validate-length js-validate-username", :data => { :max_length => max_username_length, :max_length_message => s_("SignUp|Username is too long (maximum is %{max_length} characters).") % { max_length: max_username_length } }, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: _("Please create a username with only alphanumeric characters.")
+        = f.text_field :username, class: "form-control middle js-block-emoji js-validate-length js-validate-username", :data => { :max_length => max_username_length, :max_length_message => s_("SignUp|Username is too long (maximum is %{max_length} characters).") % { max_length: max_username_length }, :qa_selector => 'new_user_username_field' }, pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: _("Please create a username with only alphanumeric characters.")
         %p.validation-error.gl-field-error-ignore.field-validation.hide= _('Username is already taken.')
         %p.validation-success.gl-field-error-ignore.field-validation.hide= _('Username is available.')
         %p.validation-pending.gl-field-error-ignore.field-validation.hide= _('Checking username availability...')
       .form-group
         = f.label :email, class: 'label-bold'
-        = f.email_field :email, class: "form-control middle qa-new-user-email", required: true, title: _("Please provide a valid email address.")
+        = f.email_field :email, class: "form-control middle", data: { qa_selector: 'new_user_email_field' }, required: true, title: _("Please provide a valid email address.")
       .form-group
         = f.label :email_confirmation, class: 'label-bold'
-        = f.email_field :email_confirmation, class: "form-control middle qa-new-user-email-confirmation", required: true, title: _("Please retype the email address.")
+        = f.email_field :email_confirmation, class: "form-control middle", data: { qa_selector: 'new_user_email_confirmation_field' }, required: true, title: _("Please retype the email address.")
       .form-group.append-bottom-20#password-strength
         = f.label :password, class: 'label-bold'
-        = f.password_field :password, class: "form-control bottom qa-new-user-password", required: true, pattern: ".{#{@minimum_password_length},}", title: _("Minimum length is %{minimum_password_length} characters.") % { minimum_password_length: @minimum_password_length }
+        = f.password_field :password, class: "form-control bottom", data: { qa_selector: 'new_user_password_field' }, required: true, pattern: ".{#{@minimum_password_length},}", title: _("Minimum length is %{minimum_password_length} characters.") % { minimum_password_length: @minimum_password_length }
         %p.gl-field-hint.text-secondary= _('Minimum length is %{minimum_password_length} characters') % { minimum_password_length: @minimum_password_length }
       - if Gitlab::CurrentSettings.current_application_settings.enforce_terms?
         .form-group
-          = check_box_tag :terms_opt_in, '1', false, required: true, class: 'qa-new-user-accept-terms'
+          = check_box_tag :terms_opt_in, '1', false, required: true, data: { qa_selector: 'new_user_accept_terms_checkbox' }
           = label_tag :terms_opt_in do
             - terms_link = link_to s_("I accept the|Terms of Service and Privacy Policy"), terms_path, target: "_blank"
             - accept_terms_label = _("I accept the %{terms_link}") % { terms_link: terms_link }
@@ -36,4 +36,4 @@
       - if show_recaptcha_sign_up?
         = recaptcha_tags
       .submit-container
-        = f.submit _("Register"), class: "btn-register btn qa-new-user-register-button"
+        = f.submit _("Register"), class: "btn-register btn", data: { qa_selector: 'new_user_register_button' }

app/views/doorkeeper/authorizations/new.html.haml

@@ -46,4 +46,4 @@
             = hidden_field_tag :response_type, @pre_auth.response_type
             = hidden_field_tag :scope, @pre_auth.scope
             = hidden_field_tag :nonce, @pre_auth.nonce
-            = submit_tag _("Authorize"), class: "btn btn-success prepend-left-10"
+            = submit_tag _("Authorize"), class: "btn btn-success prepend-left-10", data: { qa_selector: 'authorization_button' }

qa/qa/page/main/oauth.rb

@@ -5,7 +5,7 @@ module QA
     module Main
       class OAuth < Page::Base
         view 'app/views/doorkeeper/authorizations/new.html.haml' do
-          element :authorization_button, 'submit_tag _("Authorize")' # rubocop:disable QA/ElementWithPattern
+          element :authorization_button
         end
 
         def needs_authorization?
@@ -13,7 +13,7 @@ module QA
         end
 
         def authorize!
-          click_button 'Authorize'
+          click_element :authorization_button
         end
       end
     end

qa/qa/page/main/sign_up.rb

@@ -5,28 +5,28 @@ module QA
     module Main
       class SignUp < Page::Base
         view 'app/views/devise/shared/_signup_box.html.haml' do
-          element :new_user_name
-          element :new_user_username
-          element :new_user_email
-          element :new_user_email_confirmation
-          element :new_user_password
+          element :new_user_name_field
+          element :new_user_username_field
+          element :new_user_email_field
+          element :new_user_email_confirmation_field
+          element :new_user_password_field
           element :new_user_register_button
-          element :new_user_accept_terms
+          element :new_user_accept_terms_checkbox
         end
 
         def sign_up!(user)
-          fill_element :new_user_name, user.name
-          fill_element :new_user_username, user.username
-          fill_element :new_user_email, user.email
-          fill_element :new_user_email_confirmation, user.email
-          fill_element :new_user_password, user.password
+          fill_element :new_user_name_field, user.name
+          fill_element :new_user_username_field, user.username
+          fill_element :new_user_email_field, user.email
+          fill_element :new_user_email_confirmation_field, user.email
+          fill_element :new_user_password_field, user.password
 
-          check_element :new_user_accept_terms if has_element?(:new_user_accept_terms)
+          check_element :new_user_accept_terms_checkbox if has_element?(:new_user_accept_terms_checkbox)
 
           signed_in = retry_until do
             click_element :new_user_register_button
 
-            Page::Main::Menu.act { has_personal_area? }
+            Page::Main::Menu.perform(&:has_personal_area?)
           end
 
           raise "Failed to register and sign in" unless signed_in