Update selectors for QA::Page::Group::Show

app/views/groups/show.html.haml

@@ -15,12 +15,12 @@
         - new_project_label = _("New project")
         - new_subgroup_label = _("New subgroup")
         - if can_create_subgroups
-          .btn-group.new-project-subgroup.droplab-dropdown.js-new-project-subgroup{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
-            %input.btn.btn-success.dropdown-primary.js-new-group-child{ type: "button", value: new_project_label, data: { action: "new-project" } }
-            %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
+          .btn-group.new-project-subgroup.droplab-dropdown.js-new-project-subgroup.qa-new-project-or-subgroup-dropdown{ data: { project_path: new_project_path(namespace_id: @group.id), subgroup_path: new_group_path(parent_id: @group.id) } }
+            %input.btn.btn-success.dropdown-primary.js-new-group-child.qa-new-in-group-button{ type: "button", value: new_project_label, data: { action: "new-project" } }
+            %button.btn.btn-success.dropdown-toggle.js-dropdown-toggle.qa-new-project-or-subgroup-dropdown-toggle{ type: "button", data: { "dropdown-trigger" => "#new-project-or-subgroup-dropdown", 'display' => 'static' } }
               = icon("caret-down", class: "dropdown-btn-icon")
             %ul#new-project-or-subgroup-dropdown.dropdown-menu.dropdown-menu-right{ data: { dropdown: true } }
-              %li.droplab-item-selected{ role: "button", data: { value: "new-project", text: new_project_label } }
+              %li.droplab-item-selected.qa-new-project-option{ role: "button", data: { value: "new-project", text: new_project_label } }
                 .menu-item
                   .icon-container
                     = icon("check", class: "list-item-checkmark")
@@ -28,7 +28,7 @@
                     %strong= new_project_label
                     %span= s_("GroupsTree|Create a project in this group.")
               %li.divider.droplap-item-ignore
-              %li{ role: "button", data: { value: "new-subgroup", text: new_subgroup_label } }
+              %li.qa-new-subgroup-option{ role: "button", data: { value: "new-subgroup", text: new_subgroup_label } }
                 .menu-item
                   .icon-container
                     = icon("check", class: "list-item-checkmark")

qa/qa/page/group/show.rb

@@ -5,14 +5,11 @@ module QA
         include Page::Component::GroupsFilter
 
         view 'app/views/groups/show.html.haml' do
-          element :new_project_or_subgroup_dropdown, '.new-project-subgroup'
-          element :new_project_or_subgroup_dropdown_toggle, '.dropdown-toggle'
-          element :new_project_option, /%li.*data:.*value: "new-project"/
-          element :new_project_button, /%input.*data:.*action: "new-project"/
-          element :new_subgroup_option, /%li.*data:.*value: "new-subgroup"/
-
-          # data-value and data-action get modified by JS for subgroup
-          element :new_subgroup_button, /%input.*\.js-new-group-child/
+          element :new_project_or_subgroup_dropdown
+          element :new_project_or_subgroup_dropdown_toggle
+          element :new_project_option
+          element :new_subgroup_option
+          element :new_in_group_button
         end
 
         view 'app/assets/javascripts/groups/constants.js' do
@@ -24,7 +21,7 @@ module QA
         end
 
         def has_new_project_or_subgroup_dropdown?
-          page.has_css?(element_selector_css(:new_project_or_subgroup_dropdown))
+          has_element?(:new_project_or_subgroup_dropdown)
         end
 
         def has_subgroup?(name)
@@ -36,31 +33,29 @@ module QA
         end
 
         def go_to_new_subgroup
-          click_new('subgroup')
+          select_kind :new_subgroup_option
 
-          find("input[data-action='new-subgroup']").click
+          click_element :new_in_group_button
         end
 
         def go_to_new_project
-          click_new('project')
+          select_kind :new_project_option
 
-          find("input[data-action='new-project']").click
+          click_element :new_in_group_button
         end
 
         private
 
-        def click_new(kind)
-          within '.new-project-subgroup' do
-            css = "li[data-value='new-#{kind}']"
-
+        def select_kind(kind)
+          within_element(:new_project_or_subgroup_dropdown) do
             # May need to click again because it is possible to click the button quicker than the JS is bound
             wait(reload: false) do
-              find('.dropdown-toggle').click
+              click_element :new_project_or_subgroup_dropdown_toggle
 
-              page.has_css?(css)
+              has_element?(kind)
             end
 
-            find(css).click
+            click_element kind
           end
         end
       end