MM-63820 chore(e2e): update dependencies and docs (#30807)

* chore(e2e): update dependencies and docs

* update the use of postMessage, expose 8065 on test server and fix flakiness on profile popover

e2e-tests/playwright/specs/functional/channels/account_settings/profile/popover_fields.spec.ts

@@ -3,10 +3,17 @@
 
 import {expect, test} from '@mattermost/playwright-lib';
 
-test('MM-T53377 Profile popover should show correct fields after at-mention autocomplete', async ({pw}) => {
-    // # Initialize with specific config and get admin client
+/**
+ * Verify that profile popover shows correct user information based on privacy settings
+ * and continues to show correct information after at-mention autocomplete is used.
+ *
+ * Precondition:
+ * 1. A test server configured with privacy settings to hide email and full name
+ * 2. Two user accounts, with one user able to see their own information
+ */
+test('Profile popover should show correct fields after at-mention autocomplete @user_profile', async ({pw}) => {
+    // Initialize with user's privacy settings set to hide email and full name
     const {user, adminClient, team} = await pw.initSetup();
-
     await adminClient.patchConfig({
         PrivacySettings: {
             ShowEmailAddress: false,
@@ -14,59 +21,59 @@ test('MM-T53377 Profile popover should show correct fields after at-mention auto
         },
     });
 
-    // # Create and add another user using admin client
+    // Create and add another user using admin client
     const testUser2 = await adminClient.createUser(pw.random.user(), '', '');
     await adminClient.addToTeam(team.id, testUser2.id);
 
-    // # Log in as user in new browser context
+    // 1. Login as the first user
     const {channelsPage} = await pw.testBrowser.login(user);
-
-    // # Visit default channel page
     await channelsPage.goto();
     await channelsPage.toBeVisible();
 
-    // # Send mentions quickly
-    await channelsPage.centerView.postCreate.postMessage(`@${user.username} @${testUser2.username}`);
+    // 2. Post a message with mentions of both users
+    await channelsPage.postMessage(`@${user.username} @${testUser2.username}`);
 
-    // # Open profile popover for current user
-    const firstMention = channelsPage.centerView.container.getByText(`@${user.username}`, {exact: true});
+    // 3. Open profile popover for the current user on first
+    const lastPost = await channelsPage.getLastPost();
+    const firstMention = await lastPost.container.getByText(`@${user.username}`, {exact: true});
     await firstMention.click();
+    const currentUserProfilePopover = channelsPage.userProfilePopover;
 
-    // * Verify all fields are visible for current user
-    const popover = channelsPage.userProfilePopover;
-    await expect(popover.container.getByText(`@${user.username}`)).toBeVisible();
-    await expect(popover.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
-    await expect(popover.container.getByText(user.email)).toBeVisible();
+    // * Verify all fields are visible for current user in the profile popover
+    await expect(currentUserProfilePopover.container.getByText(`@${user.username}`)).toBeVisible(); // TODO: Fix this
+    await expect(currentUserProfilePopover.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
+    await expect(currentUserProfilePopover.container.getByText(user.email)).toBeVisible();
 
-    // # Close profile popover
-    await popover.close();
+    // 4. Close the current user's profile popover
+    await currentUserProfilePopover.close();
 
-    // # Open profile popover for other user
-    const secondMention = channelsPage.centerView.container.getByText(`@${testUser2.username}`, {exact: true});
+    // 5. Open profile popover for the other user on second mention
+    const secondMention = await lastPost.container.getByText(`@${testUser2.username}`, {exact: true});
     await secondMention.click();
+    const otherUserProfilePopover = channelsPage.userProfilePopover;
 
-    // * Verify only username is visible for other user
-    await expect(popover.container.getByText(`@${testUser2.username}`)).toBeVisible();
-    await expect(popover.container.getByText(testUser2.email)).not.toBeVisible();
+    // * Verify only username is visible for other user in the profile popover
+    await expect(otherUserProfilePopover.container.getByText(`@${testUser2.username}`)).toBeVisible();
+    await expect(otherUserProfilePopover.container.getByText(testUser2.email)).not.toBeVisible(); // TODO: Fix this
 
-    // # Close profile popover
-    await popover.close();
+    // 6. Close the other user's profile popover
+    await otherUserProfilePopover.close();
 
-    // # Trigger autocomplete
+    // 7. Start typing an at-mention to trigger autocomplete suggestion
     await channelsPage.centerView.postCreate.writeMessage(`@${user.username}`);
 
-    // # Wait for autocomplete
+    // * Verify autocomplete suggestion appears
     const suggestionList = channelsPage.centerView.postCreate.suggestionList;
     await expect(suggestionList.getByText(`@${user.username}`)).toBeVisible();
 
-    // # Clear textbox
+    // 8. Clear the message box
     await channelsPage.centerView.postCreate.writeMessage('');
 
-    // # Open profile popover for current user again
-    await firstMention.click();
+    // 9. Open profile popover for the current user again
+    const profilePopoverAgain = await channelsPage.openProfilePopover(lastPost);
 
     // * Verify all fields are still visible
-    await expect(popover.container.getByText(`@${user.username}`)).toBeVisible();
-    await expect(popover.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
-    await expect(popover.container.getByText(user.email)).toBeVisible();
+    await expect(profilePopoverAgain.container.getByText(`@${user.username}`)).toBeVisible();
+    await expect(profilePopoverAgain.container.getByText(`${user.first_name} ${user.last_name}`)).toBeVisible();
+    await expect(profilePopoverAgain.container.getByText(user.email)).toBeVisible();
 });