Playwright/E2E: Upgraded Playwright to 1.41 and fixed tests (#26008)

* upgrade Playwright and fix tests

* fix lint

e2e-tests/playwright/README.md

@@ -45,7 +45,7 @@ npm run test
 Change to root directory, run docker container
 
 ```
-docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.38.1-jammy /bin/bash
+docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.41.1-jammy /bin/bash
 ```
 
 #### 2. Inside the docker container

e2e-tests/playwright/package.json

@@ -15,26 +15,26 @@
         "postinstall": "npx playwright install"
     },
     "dependencies": {
-        "@axe-core/playwright": "4.7.3",
-        "@percy/cli": "1.27.1",
+        "@axe-core/playwright": "4.8.3",
+        "@percy/cli": "1.27.7",
         "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.38.1",
+        "@playwright/test": "1.41.1",
         "async-wait-until": "2.0.12",
-        "axe-core": "4.8.1",
+        "axe-core": "4.8.3",
         "chalk": "4.1.2",
         "deepmerge": "4.3.1",
-        "dotenv": "16.3.1",
+        "dotenv": "16.3.2",
         "form-data": "4.0.0",
         "isomorphic-unfetch": "4.0.2",
         "uuid": "9.0.1"
     },
     "devDependencies": {
-        "@types/uuid": "9.0.4",
-        "@typescript-eslint/eslint-plugin": "6.7.0",
-        "@typescript-eslint/parser": "6.7.0",
+        "@types/uuid": "9.0.7",
+        "@typescript-eslint/eslint-plugin": "6.19.1",
+        "@typescript-eslint/parser": "6.19.1",
         "cross-env": "7.0.3",
-        "eslint": "8.49.0",
-        "prettier": "3.0.3",
-        "typescript": "5.2.2"
+        "eslint": "8.56.0",
+        "prettier": "3.2.4",
+        "typescript": "5.3.3"
     }
 }

e2e-tests/playwright/support/flag.ts

@@ -5,6 +5,7 @@ import os from 'node:os';
 
 import {expect} from '@playwright/test';
 
+import {test} from './test_fixture';
 import {callsPluginId} from './constant';
 import {getAdminClient} from './server/init';
 
@@ -33,3 +34,10 @@ export async function shouldRunInLinux() {
     const platform = os.platform();
     await expect(platform, 'Run in Linux or Playwright docker image only').toBe('linux');
 }
+
+export async function skipIfNoLicense() {
+    const {adminClient} = await getAdminClient();
+    const license = await adminClient.getClientLicenseOld();
+
+    test.skip(license.IsLicensed === 'false', 'Skipping test - server not licensed');
+}

e2e-tests/playwright/support/test_fixture.ts

@@ -3,7 +3,7 @@ import {AxeResults} from 'axe-core';
 import AxeBuilder from '@axe-core/playwright';
 
 import {TestBrowser} from './browser_context';
-import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldRunInLinux} from './flag';
+import {shouldHaveCallsEnabled, shouldHaveFeatureFlag, shouldRunInLinux, skipIfNoLicense} from './flag';
 import {initSetup, getAdminClient} from './server';
 import {hideDynamicChannelsContent, waitForAnimationEnd, waitUntil} from './test_action';
 import {pages} from './ui/pages';
@@ -47,6 +47,7 @@ class PlaywrightExtended {
     readonly shouldHaveCallsEnabled;
     readonly shouldHaveFeatureFlag;
     readonly shouldRunInLinux;
+    readonly skipIfNoLicense;
 
     // ./server
     readonly getAdminClient;
@@ -71,6 +72,7 @@ class PlaywrightExtended {
         this.shouldHaveCallsEnabled = shouldHaveCallsEnabled;
         this.shouldHaveFeatureFlag = shouldHaveFeatureFlag;
         this.shouldRunInLinux = shouldRunInLinux;
+        this.skipIfNoLicense = skipIfNoLicense;
 
         // ./server
         this.initSetup = initSetup;

e2e-tests/playwright/support/ui/components/channels/settings/notification_settings.ts

@@ -7,9 +7,11 @@ type NotificationSettingsSection = 'keysWithHighlight' | 'keysWithNotification';
 
 export default class NotificationsSettings {
     readonly container: Locator;
+    readonly keysWithHighlightDesc: Locator;
 
     constructor(container: Locator) {
         this.container = container;
+        this.keysWithHighlightDesc = container.locator('#keysWithHighlightDesc');
     }
 
     async toBeVisible() {

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

@@ -12,6 +12,9 @@ const keywords = [`AB${getRandomId()}`, `CD${getRandomId()}`, `EF${getRandomId()
 const highlightWithoutNotificationClass = 'non-notification-highlight';
 
 test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on the textbox', async ({pw, pages}) => {
+    // # Skip test if no license
+    await pw.skipIfNoLicense();
+
     const {user} = await pw.initSetup();
 
     // # Log in as a user in new browser context
@@ -55,15 +58,20 @@ test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on t
     await keywordsInput.press('Enter');
 
     // * Verify that the keywords have been added to the collapsed description
-    await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[0])).toBeVisible();
-    await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[1])).toBeVisible();
-    await expect(channelPage.settingsModal.notificationsSettings.container.getByText(keywords[2])).toBeVisible();
+    const keysWithHighlightDesc = channelPage.settingsModal.notificationsSettings.keysWithHighlightDesc;
+    await keysWithHighlightDesc.waitFor();
+    for (const keyword of keywords.slice(0, 3)) {
+        expect(await keysWithHighlightDesc).toContainText(keyword);
+    }
 });
 
 test('MM-T5465-2 Should highlight the keywords when a message is sent with the keyword in center', async ({
     pw,
     pages,
 }) => {
+    // # Skip test if no license
+    await pw.skipIfNoLicense();
+
     const {user} = await pw.initSetup();
 
     // # Log in as a user in new browser context
@@ -117,6 +125,9 @@ test('MM-T5465-2 Should highlight the keywords when a message is sent with the k
 });
 
 test('MM-T5465-3 Should highlight the keywords when a message is sent with the keyword in rhs', async ({pw, pages}) => {
+    // # Skip test if no license
+    await pw.skipIfNoLicense();
+
     const {user} = await pw.initSetup();
 
     // # Log in as a user in new browser context
@@ -172,6 +183,9 @@ test('MM-T5465-3 Should highlight the keywords when a message is sent with the k
 });
 
 test('MM-T5465-4 Highlighted keywords should not appear in the Recent Mentions', async ({pw, pages}) => {
+    // # Skip test if no license
+    await pw.skipIfNoLicense();
+
     const {user} = await pw.initSetup();
 
     // # Log in as a user in new browser context
@@ -212,6 +226,9 @@ test('MM-T5465-4 Highlighted keywords should not appear in the Recent Mentions',
 });
 
 test('MM-T5465-5 Should highlight keywords in message sent from another user', async ({pw, pages}) => {
+    // # Skip test if no license
+    await pw.skipIfNoLicense();
+
     const {adminClient, team, adminUser, user} = await pw.initSetup();
 
     if (!adminUser) {

e2e-tests/playwright/tsconfig.json

@@ -11,9 +11,9 @@
             "@mattermost/types/*": ["../../webapp/platform/types/lib/*"],
             "@e2e-support/*": ["support/*"],
             "@e2e-test.config": ["test.config.ts"],
-            "@e2e-types": ["types.ts"]
-        }
+            "@e2e-types": ["types.ts"],
+        },
     },
     "include": ["./**/*"],
-    "exclude": ["playwright-report"]
+    "exclude": ["playwright-report"],
 }