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();
 });

e2e-tests/playwright/specs/functional/channels/custom_profile_attributes/custom_attributes.spec.ts

@@ -16,7 +16,6 @@ import {
     deleteCustomProfileAttributes,
     verifyAttributeInPopover,
     verifyAttributeNotInPopover,
-    openProfilePopover,
     updateCustomProfileAttributeVisibility,
     TEST_PHONE,
     TEST_URL,
@@ -129,7 +128,8 @@ test('MM-T5773 Display custom profile attributes in profile popover @custom_prof
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 3. Open the profile popover for the user's post
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify each custom attribute is displayed correctly
     for (const attribute of customAttributes) {
@@ -158,7 +158,8 @@ test('MM-T5774 Do not display custom profile attributes if none exist @custom_pr
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 3. Open the profile popover for the user's post
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify custom attributes are not displayed
     for (const attribute of customAttributes) {
@@ -185,7 +186,8 @@ test('MM-T5775 Update custom profile attributes when changed @custom_profile_att
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 3. Open the profile popover for the user's post
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify each custom attribute is displayed correctly
     for (const attribute of customAttributes) {
@@ -213,7 +215,7 @@ test('MM-T5775 Update custom profile attributes when changed @custom_profile_att
     await setupCustomProfileAttributeValues(userClient, updatedAttributes, attributeFieldsMap);
 
     // 6. Open the profile popover again
-    await openProfilePopover(channelsPage);
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify updated attributes are displayed correctly
     for (const attribute of updatedAttributes) {
@@ -250,7 +252,8 @@ test('MM-T5776 Hide custom profile attributes when visibility is set to hidden @
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 4. Open the profile popover for the user's post
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify the Department attribute is not displayed
     await verifyAttributeNotInPopover(channelsPage, 'Department');
@@ -283,7 +286,8 @@ test('MM-T5777 Always display custom profile attributes with visibility set to a
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 4. Open the profile popover for the user's post
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify custom attributes are displayed correctly
     for (const attribute of customAttributes) {
@@ -319,7 +323,8 @@ test('MM-T5778 Display phone and URL type custom profile attributes correctly @c
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 3. Open the profile popover for the other user
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify the Phone attribute is displayed correctly
     await verifyAttributeInPopover(channelsPage, 'Phone', TEST_PHONE);
@@ -349,7 +354,8 @@ test('MM-T5779 Verify phone and URL attributes are clickable in profile popover
     await channelsPage.postMessage(TEST_MESSAGE);
 
     // 3. Open the profile popover for the other user
-    await openProfilePopover(channelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Verify the Phone attribute has a clickable link with tel: protocol
     const popover = channelsPage.userProfilePopover.container;

e2e-tests/playwright/specs/functional/channels/custom_profile_attributes/helpers.ts

@@ -213,21 +213,6 @@ export async function editMultiselectAttribute(
     await page.waitForTimeout(500); // Wait for save to complete
 }
 
-/**
- * Helper function to open the profile popover for the test user
- * @param {ChannelsPage} channelsPage - The Playwright channels page object
- */
-export async function openProfilePopover(channelsPage: ChannelsPage): Promise<void> {
-    // Find and click the last post's user avatar to open the profile popover
-    const lastPost = await channelsPage.getLastPost();
-    await lastPost.hover();
-    await lastPost.profileIcon.click();
-
-    // Wait for the profile popover to be visible
-    const popover = channelsPage.userProfilePopover;
-    await expect(popover.container).toBeVisible();
-}
-
 /**
  * Helper function to verify an attribute exists in the profile settings
  * @param {Page} page - The Playwright page object

e2e-tests/playwright/specs/functional/channels/custom_profile_attributes/user_settings.spec.ts

@@ -17,7 +17,6 @@ import {
     verifyAttributesExistInSettings,
     verifyAttributeInPopover,
     verifyAttributeNotInPopover,
-    openProfilePopover,
     editTextAttribute,
     editSelectAttribute,
     editMultiselectAttribute,
@@ -171,7 +170,8 @@ test('MM-T5768 Editing Custom Profile Attributes @custom_profile_attributes', as
     await otherChannelsPage.goto();
 
     // 9. View the test user's profile popover
-    await openProfilePopover(otherChannelsPage);
+    const lastPost = await otherChannelsPage.getLastPost();
+    await otherChannelsPage.openProfilePopover(lastPost);
 
     // * Profile popover shows updated custom attributes
     await verifyAttributeInPopover(otherChannelsPage, 'Department', TEST_UPDATED_DEPARTMENT);
@@ -220,7 +220,8 @@ test('MM-T5769 Clearing Custom Profile Attributes @custom_profile_attributes', a
     await otherChannelsPage.goto();
 
     // 7. View the test user's profile popover
-    await openProfilePopover(otherChannelsPage);
+    const lastPost = await channelsPage.getLastPost();
+    await channelsPage.openProfilePopover(lastPost);
 
     // * Department attribute is not displayed in the profile popover
     await verifyAttributeNotInPopover(otherChannelsPage, 'Department');
@@ -311,7 +312,8 @@ test('MM-T5771 Editing Phone and URL Type Custom Profile Attributes @custom_prof
     await otherChannelsPage.goto();
 
     // 8. View the test user's profile popover
-    await openProfilePopover(otherChannelsPage);
+    const lastPost = await otherChannelsPage.getLastPost();
+    await otherChannelsPage.openProfilePopover(lastPost);
 
     // * Profile popover shows updated attributes
     await verifyAttributeInPopover(otherChannelsPage, 'Phone', TEST_UPDATED_PHONE);

e2e-tests/playwright/specs/functional/channels/drafts/drafts_on_deleted_message.spec.ts

@@ -41,7 +41,7 @@ test('MM-T5435_1 Global Drafts link in sidebar should be hidden when another use
     // # Post a message as a user
     const sidebarRight = channelsPage.sidebarRight;
     await sidebarRight.toBeVisible();
-    await sidebarRight.postCreate.postMessage('Replying to a thread');
+    await sidebarRight.postMessage('Replying to a thread');
 
     // # Write a message in the reply thread but don't send it now so that it becomes a draft
     const draftMessageByUser = 'I should be in drafts by User';
@@ -86,7 +86,7 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
     await channelsPage.toBeVisible();
 
     // # Post a message in the channel
-    await channelsPage.centerView.postCreate.postMessage('Message which will be deleted');
+    await channelsPage.postMessage('Message which will be deleted');
 
     // # Start a thread by clicking on reply menuitem from post options menu
     const post = await channelsPage.getLastPost();
@@ -98,7 +98,7 @@ test('MM-T5435_2 Global Drafts link in sidebar should be hidden when user delete
     await sidebarRight.toBeVisible();
 
     // # Post a message in the thread
-    await sidebarRight.postCreate.postMessage('Replying to a thread');
+    await sidebarRight.postMessage('Replying to a thread');
 
     // # Write a message in the reply thread but don't send it
     await sidebarRight.postCreate.writeMessage('I should be in drafts');

e2e-tests/playwright/specs/functional/channels/edit_file_attachments/edit_file_attachment.spec.ts

@@ -13,7 +13,7 @@ test('MM-T5654_1 should be able to add attachments while editing a post', async
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage);
+    await channelsPage.postMessage(originalMessage);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -41,7 +41,7 @@ test('MM-T5654_2 should be able to add attachments while editing a threaded post
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage);
+    await channelsPage.postMessage(originalMessage);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -54,7 +54,7 @@ test('MM-T5654_2 should be able to add attachments while editing a threaded post
     await channelsPage.postDotMenu.replyMenuItem.click();
     await channelsPage.sidebarRight.toBeVisible();
     await channelsPage.sidebarRight.postCreate.toBeVisible();
-    await channelsPage.sidebarRight.postCreate.postMessage('Replying to the post');
+    await channelsPage.sidebarRight.postMessage('Replying to the post');
     await channelsPage.sidebarRight.toContainText('Replying to the post');
 
     const replyPost = await channelsPage.sidebarRight.getLastPost();
@@ -119,7 +119,7 @@ test('MM-T5654_3 should be able to edit post message originally containing files
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage, ['sample_text_file.txt']);
+    await channelsPage.postMessage(originalMessage, ['sample_text_file.txt']);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -147,7 +147,7 @@ test('MM-T5654_4 should be able to add files when editing a post', async ({pw})
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage);
+    await channelsPage.postMessage(originalMessage);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -192,11 +192,7 @@ test('MM-5654_5 should be able to remove attachments while editing a post', asyn
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage, [
-        'sample_text_file.txt',
-        'mattermost.png',
-        'archive.zip',
-    ]);
+    await channelsPage.postMessage(originalMessage, ['sample_text_file.txt', 'mattermost.png', 'archive.zip']);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -232,7 +228,7 @@ test('MM-T5655_1 removing message content and files should delete the post', asy
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage, ['sample_text_file.txt']);
+    await channelsPage.postMessage(originalMessage, ['sample_text_file.txt']);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -266,11 +262,7 @@ test('MM-T5655_2 should be able to remove all files when editing a post', async
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage, [
-        'sample_text_file.txt',
-        'mattermost.png',
-        'archive.zip',
-    ]);
+    await channelsPage.postMessage(originalMessage, ['sample_text_file.txt', 'mattermost.png', 'archive.zip']);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();
@@ -309,7 +301,7 @@ test('MM-T5656_1 should be able to restore previously edited post version that c
 
     await channelsPage.goto();
     await channelsPage.toBeVisible();
-    await channelsPage.centerView.postCreate.postMessage(originalMessage, ['sample_text_file.txt']);
+    await channelsPage.postMessage(originalMessage, ['sample_text_file.txt']);
 
     const post = await channelsPage.getLastPost();
     await post.toBeVisible();

e2e-tests/playwright/specs/functional/channels/gif_picker/gif_picker_search.spec.ts

@@ -53,7 +53,7 @@ test.fixme(
         await channelsPage.toBeVisible();
 
         // # Send a message
-        await channelsPage.centerView.postCreate.postMessage('Message to open RHS');
+        await channelsPage.postMessage('Message to open RHS');
 
         // # Open the last post sent in RHS
         const lastPost = await channelsPage.getLastPost();

e2e-tests/playwright/specs/functional/channels/scheduled_drafts/create_scheduled_draft.spec.ts

@@ -53,7 +53,7 @@ test('MM-T5643_6 should create a scheduled message under a thread post ', async
     await channelsPage.goto();
     await channelsPage.toBeVisible();
 
-    await channelsPage.centerView.postCreate.postMessage('Root Message');
+    await channelsPage.postMessage('Root Message');
 
     // # Start a thread by clicking on reply menuitem from post options menu
     const post = await channelsPage.getLastPost();
@@ -63,7 +63,7 @@ test('MM-T5643_6 should create a scheduled message under a thread post ', async
     await sidebarRight.toBeVisible();
 
     // # Post a message in the thread
-    await sidebarRight.postCreate.postMessage('Replying to a thread');
+    await sidebarRight.postMessage('Replying to a thread');
 
     // # Write a message in the reply thread but don't send it
     await sidebarRight.postCreate.writeMessage(draftMessage);

e2e-tests/playwright/specs/functional/channels/settings/notifications/highlight_without_notification.spec.ts

@@ -23,7 +23,7 @@ test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on t
     await channelsPage.goto();
     await channelsPage.toBeVisible();
 
-    await channelsPage.centerView.postCreate.postMessage('Hello World');
+    await channelsPage.postMessage('Hello World');
 
     // # Open settings modal
     const settingsModal = await channelsPage.globalHeader.openSettings();
@@ -97,7 +97,7 @@ test('MM-T5465-2 Should highlight the keywords when a message is sent with the k
 
     // # Post a message without the keyword
     const messageWithoutKeyword = 'This message does not contain the keyword';
-    await channelsPage.centerView.postCreate.postMessage(messageWithoutKeyword);
+    await channelsPage.postMessage(messageWithoutKeyword);
     const lastPostWithoutHighlight = await channelsPage.getLastPost();
 
     // * Verify that the keywords are not highlighted
@@ -108,7 +108,7 @@ test('MM-T5465-2 Should highlight the keywords when a message is sent with the k
 
     // # Post a message with the keyword
     const messageWithKeyword = `This message contains the keyword ${keywords[3]}`;
-    await channelsPage.centerView.postCreate.postMessage(messageWithKeyword);
+    await channelsPage.postMessage(messageWithKeyword);
     const lastPostWithHighlight = await channelsPage.getLastPost();
 
     // * Verify that the keywords are highlighted
@@ -151,7 +151,7 @@ test('MM-T5465-3 Should highlight the keywords when a message is sent with the k
 
     // # Post a message without the keyword
     const messageWithoutKeyword = 'This message does not contain the keyword';
-    await channelsPage.centerView.postCreate.postMessage(messageWithoutKeyword);
+    await channelsPage.postMessage(messageWithoutKeyword);
     const lastPostWithoutHighlight = await channelsPage.getLastPost();
 
     // # Open the message in the RHS
@@ -162,7 +162,7 @@ test('MM-T5465-3 Should highlight the keywords when a message is sent with the k
 
     // # Post a message with the keyword in the RHS
     const messageWithKeyword = `This message contains the keyword ${keywords[3]}`;
-    await channelsPage.sidebarRight.postCreate.postMessage(messageWithKeyword);
+    await channelsPage.sidebarRight.postMessage(messageWithKeyword);
 
     // * Verify that the keywords are highlighted
     const lastPostWithHighlightInRHS = await channelsPage.sidebarRight.getLastPost();