Remove stubbed `vue_group_members_list` FF

Also update selectors
Preparation for enabling the `vue_group_members_list` feature flag

app/assets/javascripts/vue_shared/components/members/table/members_table.vue

@@ -48,6 +48,7 @@ export default {
   <div>
     <gl-table
       class="members-table"
+      data-testid="members-table"
       head-variant="white"
       stacked="lg"
       :fields="filteredFields"

app/views/projects/project_members/_team.html.haml

@@ -16,7 +16,7 @@
             = sprite_icon('search', css_class: 'gl-vertical-align-middle!')
         = label_tag :sort_by, _('Sort by'), class: 'col-form-label label-bold px-2'
         = render 'shared/members/sort_dropdown'
-  %ul.content-list.members-list{ data: { qa_selector: 'members_list' } }
+  %ul.content-list.members-list{ data: { qa_selector: 'members_list', testid: 'members-table' } }
     = render partial: 'shared/members/member',
              collection: members, as: :member,
              locals: { membership_source: project,

app/views/shared/members/_filter_2fa_dropdown.html.haml

 - filter = params[:two_factor] || 'everyone'
 - filter_options = { 'everyone' => _('Everyone'), 'enabled' => _('Enabled'), 'disabled' => _('Disabled') }
-.dropdown.inline.member-filter-2fa-dropdown
-  = dropdown_toggle(filter_options[filter], { toggle: 'dropdown' })
+.dropdown.inline.member-filter-2fa-dropdown{ data: { testid: 'member-filter-2fa-dropdown' } }
+  = dropdown_toggle(filter_options[filter], { toggle: 'dropdown', testid: 'dropdown-toggle' })
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
     %li.dropdown-header
       = _("Filter by two-factor authentication")

app/views/shared/members/_invite_member.html.haml

@@ -5,7 +5,7 @@
 - import_path = local_assigns[:import_path]
 .row
   .col-sm-12
-    = form_tag submit_url, class: 'invite-users-form', method: :post do
+    = form_tag submit_url, class: 'invite-users-form', data: { testid: 'invite-users-form' }, method: :post do
       .form-group
         = label_tag :user_ids, _("GitLab member or Email address"), class: "label-bold"
         = users_select_tag(:user_ids, multiple: true, class: 'input-clamp qa-member-select-field', scope: :all, email_user: true, placeholder: 'Search for members to update or invite')

app/views/shared/members/_search_field.html.haml

@@ -2,5 +2,5 @@
 
 .search-control-wrap.gl-relative
   = search_field_tag name, params[name], { placeholder: _('Search'), class: 'form-control', spellcheck: false }
-  %button.user-search-btn.border-left.gl-display-flex.gl-align-items-center.gl-justify-content-center{ type: 'submit', 'aria': { label: _('Submit search') } }
+  %button.user-search-btn.border-left.gl-display-flex.gl-align-items-center.gl-justify-content-center{ type: 'submit', 'aria': { label: _('Submit search') }, data: { testid: 'user-search-submit' } }
     = sprite_icon('search')

app/views/shared/members/_sort_dropdown.html.haml

-.dropdown.inline.qa-user-sort-dropdown
-  = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
+.dropdown.inline.qa-user-sort-dropdown{ data: { testid: 'user-sort-dropdown' } }
+  = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown', testid: 'dropdown-toggle' })
   %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
     %li.dropdown-header
       = _("Sort by")
@@ -8,12 +8,12 @@
         = link_to filter_group_project_member_path(sort: value), class: ("is-active" if @sort == value) do
           = title
     %li.divider
-    %li{ data: { 'qa-selector': 'filter-members-with-inherited-permissions' } }
+    %li{ data: { testid: 'filter-members-with-inherited-permissions' } }
       = link_to filter_group_project_member_path(with_inherited_permissions: nil), class: ("is-active" unless params[:with_inherited_permissions].present?) do
         = _("Show all members")
-    %li{ data: { 'qa-selector': 'filter-members-with-inherited-permissions' } }
+    %li{ data: { testid: 'filter-members-with-inherited-permissions' } }
       = link_to filter_group_project_member_path(with_inherited_permissions: 'exclude'), class: ("is-active" if params[:with_inherited_permissions] == 'exclude') do
         = _("Show only direct members")
-    %li{ data: { 'qa-selector': 'filter-members-with-inherited-permissions' } }
+    %li{ data: { testid: 'filter-members-with-inherited-permissions' } }
       = link_to filter_group_project_member_path(with_inherited_permissions: 'only'), class: ("is-active" if params[:with_inherited_permissions] == 'only') do
         = _("Show only inherited members")

spec/features/admin/admin_groups_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 RSpec.describe 'Admin Groups' do
   include Select2Helper
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let(:internal) { Gitlab::VisibilityLevel::INTERNAL }
   let(:user) { create :user }
@@ -11,8 +12,6 @@ RSpec.describe 'Admin Groups' do
   let!(:current_user) { create(:admin) }
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
     sign_in(current_user)
     stub_application_setting(default_group_visibility: internal)
   end
@@ -176,7 +175,7 @@ RSpec.describe 'Admin Groups' do
 
       click_button 'Invite'
 
-      page.within '[data-qa-selector="members_list"]' do
+      page.within members_table do
         expect(page).to have_content(current_user.name)
         expect(page).to have_content('Developer')
       end

spec/features/groups/members/filter_members_spec.rb

@@ -2,16 +2,19 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Groups > Members > Filter members' do
+RSpec.describe 'Groups > Members > Filter members', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:user)              { create(:user) }
   let(:nested_group_user) { create(:user) }
   let(:user_with_2fa)     { create(:user, :two_factor_via_otp) }
   let(:group)             { create(:group) }
   let(:nested_group)      { create(:group, parent: group) }
 
-  before do
-    stub_feature_flags(vue_group_members_list: false)
+  two_factor_auth_dropdown_toggle_selector = '[data-testid="member-filter-2fa-dropdown"] [data-testid="dropdown-toggle"]'
+  active_inherited_members_filter_selector = '[data-testid="filter-members-with-inherited-permissions"] a.is-active'
 
+  before do
     group.add_owner(user)
     group.add_maintainer(user_with_2fa)
     nested_group.add_maintainer(nested_group_user)
@@ -24,23 +27,23 @@ RSpec.describe 'Groups > Members > Filter members' do
 
     expect(member(0)).to include(user.name)
     expect(member(1)).to include(user_with_2fa.name)
-    expect(page).to have_css('.member-filter-2fa-dropdown .dropdown-toggle-text', text: 'Everyone')
+    expect(page).to have_css(two_factor_auth_dropdown_toggle_selector, text: 'Everyone')
   end
 
   it 'shows only 2FA members' do
     visit_members_list(group, two_factor: 'enabled')
 
     expect(member(0)).to include(user_with_2fa.name)
-    expect(members_list.size).to eq(1)
-    expect(page).to have_css('.member-filter-2fa-dropdown .dropdown-toggle-text', text: 'Enabled')
+    expect(all_rows.size).to eq(1)
+    expect(page).to have_css(two_factor_auth_dropdown_toggle_selector, text: 'Enabled')
   end
 
   it 'shows only non 2FA members' do
     visit_members_list(group, two_factor: 'disabled')
 
     expect(member(0)).to include(user.name)
-    expect(members_list.size).to eq(1)
-    expect(page).to have_css('.member-filter-2fa-dropdown .dropdown-toggle-text', text: 'Disabled')
+    expect(all_rows.size).to eq(1)
+    expect(page).to have_css(two_factor_auth_dropdown_toggle_selector, text: 'Disabled')
   end
 
   it 'shows inherited members by default' do
@@ -49,35 +52,31 @@ RSpec.describe 'Groups > Members > Filter members' do
     expect(member(0)).to include(user.name)
     expect(member(1)).to include(user_with_2fa.name)
     expect(member(2)).to include(nested_group_user.name)
-    expect(members_list.size).to eq(3)
+    expect(all_rows.size).to eq(3)
 
-    expect(page).to have_css('[data-qa-selector="filter-members-with-inherited-permissions"] a.is-active', text: 'Show all members')
+    expect(page).to have_css(active_inherited_members_filter_selector, text: 'Show all members', visible: false)
   end
 
   it 'shows only group members' do
     visit_members_list(nested_group, with_inherited_permissions: 'exclude')
     expect(member(0)).to include(nested_group_user.name)
-    expect(members_list.size).to eq(1)
-    expect(page).to have_css('[data-qa-selector="filter-members-with-inherited-permissions"] a.is-active', text: 'Show only direct members')
+    expect(all_rows.size).to eq(1)
+    expect(page).to have_css(active_inherited_members_filter_selector, text: 'Show only direct members', visible: false)
   end
 
   it 'shows only inherited members' do
     visit_members_list(nested_group, with_inherited_permissions: 'only')
     expect(member(0)).to include(user.name)
     expect(member(1)).to include(user_with_2fa.name)
-    expect(members_list.size).to eq(2)
-    expect(page).to have_css('[data-qa-selector="filter-members-with-inherited-permissions"] a.is-active', text: 'Show only inherited members')
+    expect(all_rows.size).to eq(2)
+    expect(page).to have_css(active_inherited_members_filter_selector, text: 'Show only inherited members', visible: false)
   end
 
   def visit_members_list(group, options = {})
     visit group_group_members_path(group.to_param, options)
   end
 
-  def members_list
-    page.all('ul.content-list > li')
-  end
-
   def member(number)
-    members_list[number].text
+    all_rows[number].text
   end
 end

spec/features/groups/members/leave_group_spec.rb

@@ -3,14 +3,14 @@
 require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Leave group' do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:user) { create(:user) }
   let(:other_user) { create(:user) }
   let(:group) { create(:group) }
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
-    gitlab_sign_in(user)
+    sign_in(user)
   end
 
   it 'guest leaves the group' do
@@ -61,7 +61,7 @@ RSpec.describe 'Groups > Members > Leave group' do
     expect(group.users).not_to include(user)
   end
 
-  it 'owner can not leave the group if they are the last owner' do
+  it 'owner can not leave the group if they are the last owner', :js do
     group.add_owner(user)
 
     visit group_path(group)
@@ -70,7 +70,7 @@ RSpec.describe 'Groups > Members > Leave group' do
 
     visit group_group_members_path(group)
 
-    expect(find(:css, '.project-members-page li', text: user.name)).to have_no_selector(:css, 'a.btn-danger')
+    expect(members_table).not_to have_selector 'button[title="Leave"]'
   end
 
   it 'owner can not leave the group by url param if they are the last owner', :js do

spec/features/groups/members/list_members_spec.rb

@@ -2,9 +2,8 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Groups > Members > List members' do
-  include Select2Helper
-  include Spec::Support::Helpers::Features::ListRowsHelpers
+RSpec.describe 'Groups > Members > List members', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let(:user1) { create(:user, name: 'John Doe') }
   let(:user2) { create(:user, name: 'Mary Jane') }
@@ -12,8 +11,6 @@ RSpec.describe 'Groups > Members > List members' do
   let(:nested_group) { create(:group, parent: group) }
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
     sign_in(user1)
   end
 
@@ -42,10 +39,12 @@ RSpec.describe 'Groups > Members > List members' do
       group.add_developer(user2)
     end
 
-    subject { visit group_group_members_path(group) }
+    it 'shows the status' do
+      create(:user_status, user: user2, emoji: 'smirk', message: 'Authoring this object')
+
+      visit group_group_members_path(nested_group)
 
-    it_behaves_like 'showing user status' do
-      let(:user_with_status) { user2 }
+      expect(first_row).to have_selector('gl-emoji[data-name="smirk"]')
     end
   end
 end

spec/features/groups/members/manage_groups_spec.rb

@@ -4,13 +4,11 @@ require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Manage groups', :js do
   include Select2Helper
-  include Spec::Support::Helpers::Features::ListRowsHelpers
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let_it_be(:user) { create(:user) }
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
     sign_in(user)
   end
 
@@ -51,7 +49,6 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
     end
 
     before do
-      travel_to Time.now.utc.beginning_of_day
       group_link.update!(additional_link_attrs)
 
       shared_group.add_owner(user)
@@ -63,8 +60,12 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
 
       expect(page).to have_content(shared_with_group.name)
 
-      accept_confirm do
-        find(:css, '#tab-groups li', text: shared_with_group.name).find(:css, 'a.btn-danger').click
+      page.within(first_row) do
+        click_button 'Remove group'
+      end
+
+      page.within('[role="dialog"]') do
+        click_button('Remove group')
       end
 
       expect(page).not_to have_content(shared_with_group.name)
@@ -75,7 +76,7 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
 
       page.within(first_row) do
         click_button('Developer')
-        click_link('Maintainer')
+        click_button('Maintainer')
 
         wait_for_requests
 
@@ -86,33 +87,30 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
     it 'updates expiry date' do
       click_groups_tab
 
-      expires_at_field = "member_expires_at_#{shared_with_group.id}"
-      fill_in "member_expires_at_#{shared_with_group.id}", with: 3.days.from_now.to_date
+      page.within first_row do
+        fill_in 'Expiration date', with: 5.days.from_now.to_date
+        find_field('Expiration date').native.send_keys :enter
 
-      find_field(expires_at_field).native.send_keys :enter
-      wait_for_requests
+        wait_for_requests
 
-      page.within(find('li.group_member')) do
-        expect(page).to have_content('Expires in 3 days')
+        expect(page).to have_content(/in \d days/)
       end
     end
 
     context 'when expiry date is set' do
-      let(:additional_link_attrs) { { expires_at: 3.days.from_now.to_date } }
+      let(:additional_link_attrs) { { expires_at: 5.days.from_now.to_date } }
 
       it 'clears expiry date' do
         click_groups_tab
 
-        page.within(find('li.group_member')) do
-          expect(page).to have_content('Expires in 3 days')
+        page.within first_row do
+          expect(page).to have_content(/in \d days/)
 
-          page.within(find('.js-edit-member-form')) do
-            find('.js-clear-input').click
-          end
+          find('[data-testid="clear-button"]').click
 
           wait_for_requests
 
-          expect(page).not_to have_content('Expires in')
+          expect(page).to have_content('No expiration set')
         end
       end
     end
@@ -128,6 +126,7 @@ RSpec.describe 'Groups > Members > Manage groups', :js do
   end
 
   def click_groups_tab
+    expect(page).to have_link 'Groups'
     click_link "Groups"
   end
 end

spec/features/groups/members/manage_members_spec.rb

@@ -4,15 +4,13 @@ require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Manage members' do
   include Select2Helper
-  include Spec::Support::Helpers::Features::ListRowsHelpers
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let(:user1) { create(:user, name: 'John Doe') }
   let(:user2) { create(:user, name: 'Mary Jane') }
   let(:group) { create(:group) }
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
     sign_in(user1)
   end
 
@@ -24,7 +22,7 @@ RSpec.describe 'Groups > Members > Manage members' do
 
     page.within(second_row) do
       click_button('Developer')
-      click_link('Owner')
+      click_button('Owner')
 
       expect(page).to have_button('Owner')
     end
@@ -71,11 +69,14 @@ RSpec.describe 'Groups > Members > Manage members' do
     visit group_group_members_path(group)
 
     # Open modal
-    find(:css, '.project-members-page li', text: user2.name).find(:css, 'button.btn-danger').click
-
-    expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+    page.within(second_row) do
+      click_button 'Remove member'
+    end
 
-    click_on('Remove member')
+    page.within('[role="dialog"]') do
+      expect(page).to have_unchecked_field 'Also unassign this user from related issues and merge requests'
+      click_button('Remove member')
+    end
 
     wait_for_requests
 
@@ -103,16 +104,17 @@ RSpec.describe 'Groups > Members > Manage members' do
 
     add_user('test@example.com', 'Reporter')
 
-    click_link('Invited')
+    expect(page).to have_link 'Invited'
+    click_link 'Invited'
 
-    page.within('.content-list.members-list') do
+    page.within(members_table) do
       expect(page).to have_content('test@example.com')
       expect(page).to have_content('Invited')
       expect(page).to have_button('Reporter')
     end
   end
 
-  it 'guest can not manage other users' do
+  it 'guest can not manage other users', :js do
     group.add_guest(user1)
     group.add_developer(user2)
 
@@ -126,7 +128,7 @@ RSpec.describe 'Groups > Members > Manage members' do
       expect(page).not_to have_button 'Developer'
 
       # Can not remove user2
-      expect(page).not_to have_css('a.btn-danger')
+      expect(page).not_to have_selector 'button[title="Remove member"]'
     end
   end
 

spec/features/groups/members/master_adds_member_with_expiration_date_spec.rb

@@ -4,17 +4,13 @@ require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Owner adds member with expiration date', :js do
   include Select2Helper
-  include ActiveSupport::Testing::TimeHelpers
+  include Spec::Support::Helpers::Features::MembersHelpers
 
   let_it_be(:user1) { create(:user, name: 'John Doe') }
   let_it_be(:group) { create(:group) }
   let(:new_member) { create(:user, name: 'Mary Jane') }
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
-    travel_to Time.now.utc.beginning_of_day
-
     group.add_owner(user1)
     sign_in(user1)
   end
@@ -22,17 +18,17 @@ RSpec.describe 'Groups > Members > Owner adds member with expiration date', :js
   it 'expiration date is displayed in the members list' do
     visit group_group_members_path(group)
 
-    page.within '.invite-users-form' do
+    page.within invite_users_form do
       select2(new_member.id, from: '#user_ids', multiple: true)
 
-      fill_in 'expires_at', with: 3.days.from_now.to_date
+      fill_in 'expires_at', with: 5.days.from_now.to_date
       find_field('expires_at').native.send_keys :enter
 
       click_on 'Invite'
     end
 
-    page.within "#group_member_#{group_member_id}" do
-      expect(page).to have_content('Expires in 3 days')
+    page.within second_row do
+      expect(page).to have_content(/in \d days/)
     end
   end
 
@@ -40,32 +36,28 @@ RSpec.describe 'Groups > Members > Owner adds member with expiration date', :js
     group.add_developer(new_member)
     visit group_group_members_path(group)
 
-    page.within "#group_member_#{group_member_id}" do
-      fill_in 'Expiration date', with: 3.days.from_now.to_date
+    page.within second_row do
+      fill_in 'Expiration date', with: 5.days.from_now.to_date
       find_field('Expiration date').native.send_keys :enter
 
       wait_for_requests
 
-      expect(page).to have_content('Expires in 3 days')
+      expect(page).to have_content(/in \d days/)
     end
   end
 
   it 'clears expiration date' do
-    create(:group_member, :developer, user: new_member, group: group, expires_at: 3.days.from_now.to_date)
+    create(:group_member, :developer, user: new_member, group: group, expires_at: 5.days.from_now.to_date)
     visit group_group_members_path(group)
 
-    page.within "#group_member_#{group_member_id}" do
-      expect(page).to have_content('Expires in 3 days')
+    page.within second_row do
+      expect(page).to have_content(/in \d days/)
 
-      find('.js-clear-input').click
+      find('[data-testid="clear-button"]').click
 
       wait_for_requests
 
-      expect(page).not_to have_content('Expires in')
+      expect(page).to have_content('No expiration set')
     end
   end
-
-  def group_member_id
-    group.members.find_by(user_id: new_member).id
-  end
 end

spec/features/groups/members/master_manages_access_requests_spec.rb

@@ -3,10 +3,6 @@
 require 'spec_helper'
 
 RSpec.describe 'Groups > Members > Maintainer manages access requests' do
-  before do
-    stub_feature_flags(vue_group_members_list: false)
-  end
-
   it_behaves_like 'Maintainer manages access requests' do
     let(:has_tabs) { true }
     let(:entity) { create(:group, :public) }

spec/features/groups/members/search_members_spec.rb

@@ -2,7 +2,9 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Search group member' do
+RSpec.describe 'Search group member', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:user) { create :user }
   let(:member) { create :user }
 
@@ -14,8 +16,6 @@ RSpec.describe 'Search group member' do
   end
 
   before do
-    stub_feature_flags(vue_group_members_list: false)
-
     sign_in(user)
     visit group_group_members_path(guest_group)
   end
@@ -23,11 +23,10 @@ RSpec.describe 'Search group member' do
   it 'renders member users' do
     page.within '[data-testid="user-search-form"]' do
       fill_in 'search', with: member.name
-      find('.user-search-btn').click
+      find('[data-testid="user-search-submit"]').click
     end
 
-    group_members_list = find('[data-qa-selector="members_list"]')
-    expect(group_members_list).to have_content(member.name)
-    expect(group_members_list).not_to have_content(user.name)
+    expect(members_table).to have_content(member.name)
+    expect(members_table).not_to have_content(user.name)
   end
 end

spec/features/groups/members/sort_members_spec.rb

@@ -2,14 +2,16 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Groups > Members > Sort members' do
+RSpec.describe 'Groups > Members > Sort members', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:owner)     { create(:user, name: 'John Doe') }
   let(:developer) { create(:user, name: 'Mary Jane', last_sign_in_at: 5.days.ago) }
   let(:group)     { create(:group) }
 
-  before do
-    stub_feature_flags(vue_group_members_list: false)
+  dropdown_toggle_selector = '[data-testid="user-sort-dropdown"] [data-testid="dropdown-toggle"]'
 
+  before do
     create(:group_member, :owner, user: owner, group: group, created_at: 5.days.ago)
     create(:group_member, :developer, user: developer, group: group, created_at: 3.days.ago)
 
@@ -19,84 +21,76 @@ RSpec.describe 'Groups > Members > Sort members' do
   it 'sorts alphabetically by default' do
     visit_members_list(sort: nil)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Name, ascending')
   end
 
   it 'sorts by access level ascending' do
     visit_members_list(sort: :access_level_asc)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, ascending')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Access level, ascending')
   end
 
   it 'sorts by access level descending' do
     visit_members_list(sort: :access_level_desc)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, descending')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Access level, descending')
   end
 
   it 'sorts by last joined' do
     visit_members_list(sort: :last_joined)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Last joined')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Last joined')
   end
 
   it 'sorts by oldest joined' do
     visit_members_list(sort: :oldest_joined)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest joined')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Oldest joined')
   end
 
   it 'sorts by name ascending' do
     visit_members_list(sort: :name_asc)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Name, ascending')
   end
 
   it 'sorts by name descending' do
     visit_members_list(sort: :name_desc)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, descending')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Name, descending')
   end
 
   it 'sorts by recent sign in', :clean_gitlab_redis_shared_state do
     visit_members_list(sort: :recent_sign_in)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Recent sign in')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Recent sign in')
   end
 
   it 'sorts by oldest sign in', :clean_gitlab_redis_shared_state do
     visit_members_list(sort: :oldest_sign_in)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest sign in')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Oldest sign in')
   end
 
   def visit_members_list(sort:)
     visit group_group_members_path(group.to_param, sort: sort)
   end
-
-  def first_member
-    page.all('ul.content-list > li').first.text
-  end
-
-  def second_member
-    page.all('ul.content-list > li').last.text
-  end
 end

spec/support/helpers/features/members_table_helpers.rb

+# frozen_string_literal: true
+
+module Spec
+  module Support
+    module Helpers
+      module Features
+        module MembersHelpers
+          def members_table
+            page.find('[data-testid="members-table"]')
+          end
+
+          def all_rows
+            page.within(members_table) do
+              page.all('tbody > tr')
+            end
+          end
+
+          def first_row
+            all_rows[0]
+          end
+
+          def second_row
+            all_rows[1]
+          end
+
+          def invite_users_form
+            page.find('[data-testid="invite-users-form"]')
+          end
+        end
+      end
+    end
+  end
+end

spec/support/shared_examples/features/master_manages_access_requests_shared_example.rb

 # frozen_string_literal: true
 
 RSpec.shared_examples 'Maintainer manages access requests' do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:user) { create(:user) }
   let(:maintainer) { create(:user) }
 
@@ -26,7 +28,7 @@ RSpec.shared_examples 'Maintainer manages access requests' do
 
     expect_no_visible_access_request(entity, user)
 
-    page.within('[data-qa-selector="members_list"]') do
+    page.within(members_table) do
       expect(page).to have_content user.name
     end
   end
@@ -35,7 +37,7 @@ RSpec.shared_examples 'Maintainer manages access requests' do
     expect_visible_access_request(entity, user)
 
     # Open modal
-    click_on 'Deny access request'
+    click_on 'Deny access'
 
     expect(page).not_to have_field "Also unassign this user from related issues and merge requests"