Playwright/E2E: Upgrade to playwright@1.43 and its dependencies (#26833)

* chore: upgrade to playwright@1.43 and its dependencies

* fix lint

* attempt to fix lint error on console

e2e-tests/.ci/server.generate.sh

@@ -224,7 +224,7 @@ $(if mme2e_is_token_in_list "webhook-interactions" "$ENABLED_DOCKER_SERVICES"; t
 $(if mme2e_is_token_in_list "playwright" "$ENABLED_DOCKER_SERVICES"; then
     echo '
   playwright:
-    image: mcr.microsoft.com/playwright:v1.42.1-jammy
+    image: mcr.microsoft.com/playwright:v1.43.0-jammy
     entrypoint: ["/bin/bash", "-c"]
     command: ["until [ -f /var/run/mm_terminate ]; do sleep 5; done"]
     env_file:

e2e-tests/.ci/server.run_playwright.sh

@@ -12,6 +12,10 @@ mkdir -p logs
 touch logs/mattermost.log
 EOF
 
+# Install webapp dependencies
+mme2e_log "Prepare Playwright: install webapp dependencies"
+${MME2E_DC_SERVER} exec -T -u "$MME2E_UID" -- playwright bash -c "cd webapp && npm install --cache /tmp/empty-cache"
+
 # Install Playwright dependencies
 mme2e_log "Prepare Playwright: install dependencies"
 ${MME2E_DC_SERVER} exec -T -u "$MME2E_UID" -- playwright bash -c "cd e2e-tests/playwright && rm -rf node_modules && PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install --cache /tmp/empty-cache"

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.42.1-jammy /bin/bash
+docker run -it --rm -v "$(pwd):/mattermost/" --ipc=host mcr.microsoft.com/playwright:v1.43.0-jammy /bin/bash
 ```
 
 #### 2. Inside the docker container
@@ -57,7 +57,7 @@ export PW_HEADLESS=true
 cd mattermost/e2e-tests/playwright
 
 # Install npm packages. Use "npm ci" to match the automated environment
-PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm ci
+export PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm ci
 
 # Run specific test. See https://playwright.dev/docs/test-cli.
 npm run test -- login --project=chrome

e2e-tests/playwright/global_setup.ts

@@ -107,8 +107,8 @@ async function printClientInfo(client: Client) {
     const {LogSettings, ServiceSettings} = await client.getConfig();
     // eslint-disable-next-line no-console
     console.log(`Notable Server Config:
-  - ServiceSettings.EnableSecurityFixAlert  = ${ServiceSettings.EnableSecurityFixAlert}
-  - LogSettings.EnableDiagnostics           = ${LogSettings.EnableDiagnostics}`);
+  - ServiceSettings.EnableSecurityFixAlert  = ${ServiceSettings?.EnableSecurityFixAlert}
+  - LogSettings.EnableDiagnostics           = ${LogSettings?.EnableDiagnostics}`);
 }
 
 async function ensurePluginsLoaded(client: Client) {

e2e-tests/playwright/package.json

@@ -15,12 +15,12 @@
         "postinstall": "script/post_install.sh"
     },
     "dependencies": {
-        "@axe-core/playwright": "4.8.5",
-        "@percy/cli": "1.28.1",
-        "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.42.1",
+        "@axe-core/playwright": "4.9.0",
+        "@percy/cli": "1.28.3",
+        "@percy/playwright": "1.0.5",
+        "@playwright/test": "1.43.1",
         "async-wait-until": "2.0.12",
-        "axe-core": "4.8.4",
+        "axe-core": "4.9.0",
         "chalk": "4.1.2",
         "deepmerge": "4.3.1",
         "dotenv": "16.4.5",
@@ -35,6 +35,6 @@
         "cross-env": "7.0.3",
         "eslint": "8.57.0",
         "prettier": "3.2.5",
-        "typescript": "5.4.2"
+        "typescript": "5.4.5"
     }
 }

e2e-tests/playwright/support/server/default_config.ts

@@ -81,7 +81,7 @@ const onPremServerConfig = (): Partial<TestAdminConfig> => {
 };
 
 // Should be based only from the generated default config from ./server via "make config-reset"
-// Based on v9.7 server
+// Based on v9.8 server
 const defaultServerConfig: AdminConfig = {
     ServiceSettings: {
         SiteURL: '',
@@ -195,7 +195,7 @@ const defaultServerConfig: AdminConfig = {
         AllowSyncedDrafts: true,
         UniqueEmojiReactionLimitPerPost: 50,
         RefreshPostStatsRunTime: '00:00',
-        MaximumPayloadSizeBytes: 100000,
+        MaximumPayloadSizeBytes: 300000,
     },
     TeamSettings: {
         SiteName: 'Mattermost',
@@ -319,6 +319,7 @@ const defaultServerConfig: AdminConfig = {
         AmazonS3SSE: false,
         AmazonS3Trace: false,
         AmazonS3RequestTimeoutMilliseconds: 30000,
+        AmazonS3UploadPartSizeBytes: 5242880,
         DedicatedExportStore: false,
         ExportDriverName: 'local',
         ExportDirectory: './data/',
@@ -334,6 +335,7 @@ const defaultServerConfig: AdminConfig = {
         ExportAmazonS3Trace: false,
         ExportAmazonS3RequestTimeoutMilliseconds: 30000,
         ExportAmazonS3PresignExpiresSeconds: 21600,
+        ExportAmazonS3UploadPartSizeBytes: 104857600,
     },
     EmailSettings: {
         EnableSignUpWithEmail: true,
@@ -724,7 +726,9 @@ const defaultServerConfig: AdminConfig = {
         ConsumePostHook: false,
         CloudAnnualRenewals: false,
         CloudDedicatedExportUI: false,
+        ChannelBookmarks: false,
         WebSocketEventScope: false,
+        NotificationMonitoring: true,
     },
     ImportSettings: {
         Directory: './import',

e2e-tests/playwright/support/ui/components/channels/post_dot_menu.ts

@@ -15,6 +15,7 @@ export default class PostDotMenu {
     readonly removeFromSavedMenuItem;
     readonly pinToChannelMenuItem;
     readonly unpinFromChannelMenuItem;
+    readonly moveThreadMenuItem;
     readonly copyLinkMenuItem;
     readonly editMenuItem;
     readonly copyTextMenuItem;
@@ -34,6 +35,7 @@ export default class PostDotMenu {
         this.removeFromSavedMenuItem = getMenuItem('Remove from Saved');
         this.pinToChannelMenuItem = getMenuItem('Pin to Channel');
         this.unpinFromChannelMenuItem = getMenuItem('Unpin from Channel');
+        this.moveThreadMenuItem = getMenuItem('Move Thread');
         this.copyLinkMenuItem = getMenuItem('Copy Link');
         this.editMenuItem = getMenuItem('Edit');
         this.copyTextMenuItem = getMenuItem('Copy Text');

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

@@ -11,7 +11,7 @@ export default class NotificationsSettings {
 
     constructor(container: Locator) {
         this.container = container;
-        this.keysWithHighlightDesc = container.locator('#keysWithHighlightDesc');
+        this.keysWithHighlightDesc = container.locator('#keywordsAndHighlightDesc');
     }
 
     async toBeVisible() {

e2e-tests/playwright/support/visual/percy.ts

@@ -8,16 +8,14 @@ import {TestArgs} from '@e2e-types';
 
 export default async function snapshotWithPercy(name: string, testArgs: TestArgs) {
     if (testArgs.browserName === 'chromium' && testConfig.percyEnabled && testArgs.viewport) {
-        if (!testConfig.percyToken) {
-            // eslint-disable-next-line no-console
-            console.error('Error: Token is missing! Please set using: "export PERCY_TOKEN=<change_me>"');
-        }
-
         const {page, viewport} = testArgs;
 
-        // Ignore since percy is using Playwright.Page
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        await percySnapshot(page, name, {widths: [viewport.width], minHeight: viewport.height});
+        try {
+            await percySnapshot(page, name, {widths: [viewport.width], minHeight: viewport.height});
+        } catch (error) {
+            // log an error for debugging
+            // eslint-disable-next-line no-console
+            console.log(`${error}\nIn addition, check if token is properly set by "export PERCY_TOKEN=<change_me>"`);
+        }
     }
 }

e2e-tests/playwright/test.config.ts

@@ -31,7 +31,6 @@ const config: TestConfig = {
     // Visual tests
     snapshotEnabled: parseBool(process.env.PW_SNAPSHOT_ENABLE, false),
     percyEnabled: parseBool(process.env.PW_PERCY_ENABLE, false),
-    percyToken: process.env.PERCY_TOKEN,
 };
 
 function parseBool(actualValue: string | undefined, defaultValue: boolean) {

e2e-tests/playwright/tests/accessibility/channels/intro_channel.spec.ts

@@ -26,7 +26,9 @@ test('Base channel accessibility', async ({pw, pages, axe}) => {
 
 test('Post actions tab support', async ({pw, pages, axe}) => {
     // # Create and sign in a new user
-    const {user} = await pw.initSetup();
+    const {user, adminClient} = await pw.initSetup();
+    const config = await adminClient.getConfig();
+    const license = await adminClient.getClientLicenseOld();
 
     // # Log in a user in new browser context
     const {page} = await pw.testBrowser.login(user);
@@ -85,9 +87,19 @@ test('Post actions tab support', async ({pw, pages, axe}) => {
     await channelsPage.postDotMenu.saveMenuItem.press('ArrowDown');
     await expect(channelsPage.postDotMenu.pinToChannelMenuItem).toBeFocused();
 
-    // * Should move focus to Copy Link after arrow down
-    await channelsPage.postDotMenu.pinToChannelMenuItem.press('ArrowDown');
-    await expect(channelsPage.postDotMenu.copyLinkMenuItem).toBeFocused();
+    if (config.FeatureFlags['MoveThreadsEnabled'] && license.IsLicensed === 'true') {
+        // * Should move focus to Move Thread after arrow down
+        await channelsPage.postDotMenu.pinToChannelMenuItem.press('ArrowDown');
+        await expect(channelsPage.postDotMenu.moveThreadMenuItem).toBeFocused();
+
+        // * Should move focus to Copy Link after arrow down
+        await channelsPage.postDotMenu.moveThreadMenuItem.press('ArrowDown');
+        await expect(channelsPage.postDotMenu.copyLinkMenuItem).toBeFocused();
+    } else {
+        // * Should move focus to Copy Link after arrow down
+        await channelsPage.postDotMenu.pinToChannelMenuItem.press('ArrowDown');
+        await expect(channelsPage.postDotMenu.copyLinkMenuItem).toBeFocused();
+    }
 
     // * Should move focus to Edit after arrow down
     await channelsPage.postDotMenu.copyLinkMenuItem.press('ArrowDown');

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

@@ -40,19 +40,19 @@ test('MM-T5465-1 Should add the keyword when enter, comma or tab is pressed on t
     const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
 
     // # Enter keyword 1
-    await keywordsInput.type(keywords[0]);
+    await keywordsInput.fill(keywords[0]);
 
     // # Press Comma on the textbox
     await keywordsInput.press(',');
 
     // # Enter keyword 2
-    await keywordsInput.type(keywords[1]);
+    await keywordsInput.fill(keywords[1]);
 
     // # Press Tab on the textbox
     await keywordsInput.press('Tab');
 
     // # Enter keyword 3
-    await keywordsInput.type(keywords[2]);
+    await keywordsInput.fill(keywords[2]);
 
     // # Press Enter on the textbox
     await keywordsInput.press('Enter');
@@ -94,7 +94,7 @@ test('MM-T5465-2 Should highlight the keywords when a message is sent with the k
 
     // # Enter the keyword
     const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
-    await keywordsInput.type(keywords[3]);
+    await keywordsInput.fill(keywords[3]);
     await keywordsInput.press('Tab');
 
     // # Save the keyword
@@ -150,7 +150,7 @@ test('MM-T5465-3 Should highlight the keywords when a message is sent with the k
 
     // # Enter the keyword
     const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
-    await keywordsInput.type(keywords[3]);
+    await keywordsInput.fill(keywords[3]);
     await keywordsInput.press('Tab');
 
     // # Save the keyword
@@ -208,7 +208,7 @@ test('MM-T5465-4 Highlighted keywords should not appear in the Recent Mentions',
 
     // # Enter the keyword
     const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
-    await keywordsInput.type(keywords[0]);
+    await keywordsInput.fill(keywords[0]);
     await keywordsInput.press('Tab');
 
     // # Save the keyword
@@ -270,7 +270,7 @@ test('MM-T5465-5 Should highlight keywords in message sent from another user', a
 
     // # Enter the keyword
     const keywordsInput = await channelPage.settingsModal.notificationsSettings.getKeywordsInput();
-    await keywordsInput.type(keywords[0]);
+    await keywordsInput.fill(keywords[0]);
     await keywordsInput.press('Tab');
 
     // # Save the keyword

e2e-tests/playwright/types.ts

@@ -30,7 +30,6 @@ export type TestConfig = {
     // Visual tests
     snapshotEnabled: boolean;
     percyEnabled: boolean;
-    percyToken?: string;
 };
 
 // Based on https://github.com/microsoft/playwright/blob/d6ec1ae3994f127e38b866a231a34efc6a4cac0d/packages/playwright/types/test.d.ts#L5692-L5759

webapp/platform/types/src/config.ts

@@ -531,6 +531,7 @@ export type FileSettings = {
     AmazonS3SSE: boolean;
     AmazonS3Trace: boolean;
     AmazonS3RequestTimeoutMilliseconds: number;
+    AmazonS3UploadPartSizeBytes: number;
     DedicatedExportStore: boolean;
     ExportDriverName: string;
     ExportDirectory: string;
@@ -546,6 +547,7 @@ export type FileSettings = {
     ExportAmazonS3Trace: boolean;
     ExportAmazonS3RequestTimeoutMilliseconds: number;
     ExportAmazonS3PresignExpiresSeconds: number;
+    ExportAmazonS3UploadPartSizeBytes: number;
 };
 
 export type EmailSettings = {