MM-62954 E2E/Playwright shared library (#30177)

* feat: Add package.json for Playwright library with dependencies

* feat: Add explicit exports for test.config in playwright-lib package

* feat: Add initialization setup for Mattermost E2E testing with admin and user client

* fix: Update package dependencies and resolve TypeScript build errors

* feat: Update package exports for test.config to support both CommonJS and ESM

* playwright shared library

* add README, fix pipeline

* keep file structures, move report up to playwright

* minimize API, use the prerelease versions of client and types

* bump version

* update package*.json

* resolve merge conflict

* update depedencies and merge conflicts

* update readme and fix ci

* remove unnecessary export and list all external packages

* fix import for Client4

e2e-tests/playwright/lib/src/visual/index.ts

@@ -0,0 +1,45 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import os from 'node:os';
+
+import chalk from 'chalk';
+import {TestInfo, expect} from '@playwright/test';
+
+import snapshotWithPercy from './percy';
+
+import {duration, illegalRe, wait} from '@/util';
+import {testConfig} from '@/test_config';
+import {ScreenshotOptions, TestArgs} from '@/types';
+
+export async function matchSnapshot(testInfo: TestInfo, testArgs: TestArgs, options: ScreenshotOptions = {}) {
+    if (os.platform() !== 'linux') {
+        // eslint-disable-next-line no-console
+        console.log(
+            chalk.yellow(
+                `^ Warning: No visual test performed. Run in Linux or Playwright docker image to match snapshot.`,
+            ),
+        );
+        return;
+    }
+
+    if (testConfig.snapshotEnabled || testConfig.percyEnabled) {
+        await testArgs.page.waitForLoadState('networkidle');
+        await testArgs.page.waitForLoadState('domcontentloaded');
+        await wait(duration.half_sec);
+    }
+
+    if (testConfig.snapshotEnabled) {
+        // Visual test with built-in snapshot
+        const filename = testInfo.title.trim().replace(illegalRe, '').replace(/\s/g, '-').trim().toLowerCase();
+        await expect(testArgs.page).toHaveScreenshot(`${filename}.png`, {fullPage: true, ...options});
+    }
+
+    if (testConfig.percyEnabled) {
+        // Used to easily identify the screenshot when viewing from third-party service provider.
+        const name = `[${testInfo.project.name}, ${testArgs?.viewport?.width}px] > ${testInfo.file} > ${testInfo.title}`;
+
+        // Visual test with Percy
+        await snapshotWithPercy(name, testArgs);
+    }
+}

e2e-tests/playwright/lib/src/visual/percy.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import percySnapshot from '@percy/playwright';
+
+import {testConfig} from '@/test_config';
+import {TestArgs} from '@/types';
+
+export default async function snapshotWithPercy(name: string, testArgs: TestArgs) {
+    if (testArgs.browserName === 'chromium' && testConfig.percyEnabled && testArgs.viewport) {
+        const {page, viewport} = testArgs;
+
+        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>"`);
+        }
+    }
+}