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/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);