MM-52642 CLD-6352 MM-54007 Prepare setup for Playwright pipeline (#24647)

* pipeline(playwright): prepare setup for playwright

* feedback address

* clean up readme

* Fix docker-compose command and definition for dashboard

* fix the dashboard

* ignore dashboard when formatting

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Mario Vitale <mvitale1989@hotmail.com>

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

@@ -63,6 +63,7 @@ const onPremServerConfig = (): Partial<TestAdminConfig> => {
         },
         TeamSettings: {
             EnableOpenServer: true,
+            MaxUsersPerTeam: 2000,
         },
     };
 };

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

@@ -11,14 +11,12 @@ export default class ChannelsCenterView {
     readonly container: Locator;
 
     readonly header;
-    readonly headerMobile;
     readonly postCreate;
 
     constructor(container: Locator) {
         this.container = container;
 
         this.header = new components.ChannelsHeader(this.container.locator('.channel-header'));
-        this.headerMobile = new components.ChannelsHeaderMobile(this.container.locator('.navbar'));
         this.postCreate = new components.ChannelsPostCreate(container.getByTestId('post-create'));
     }
 

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

@@ -1,22 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {expect, Locator} from '@playwright/test';
-
-export default class ChannelsHeaderMobile {
-    readonly container: Locator;
-
-    constructor(container: Locator) {
-        this.container = container;
-    }
-
-    async toBeVisible() {
-        await expect(this.container).toBeVisible();
-    }
-
-    async toggleSidebar() {
-        await this.container.getByRole('button', {name: 'Toggle sidebar Menu Icon'}).click();
-    }
-}
-
-export {ChannelsHeaderMobile};

e2e-tests/playwright/support/ui/components/index.ts

@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import {ChannelsHeader} from './channels/header';
-import {ChannelsHeaderMobile} from './channels/header_mobile';
 import {ChannelsAppBar} from './channels/app_bar';
 import {ChannelsPostCreate} from './channels/post_create';
 import {ChannelsPost} from './channels/post';
@@ -27,7 +26,6 @@ const components = {
     ChannelsSidebarRight,
     ChannelsAppBar,
     ChannelsHeader,
-    ChannelsHeaderMobile,
     ChannelsPostCreate,
     ChannelsPost,
     FindChannelsModal,
@@ -49,7 +47,6 @@ export {
     ChannelsSidebarRight,
     ChannelsAppBar,
     ChannelsHeader,
-    ChannelsHeaderMobile,
     ChannelsPostCreate,
     ChannelsPost,
     FindChannelsModal,

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

@@ -7,11 +7,12 @@ import chalk from 'chalk';
 import {expect, TestInfo} from '@playwright/test';
 
 import {illegalRe} from '@e2e-support/util';
-import testConfig, {TestArgs} from '@e2e-test.config';
+import testConfig from '@e2e-test.config';
+import {ScreenshotOptions, TestArgs} from '@e2e-types';
 
 import snapshotWithPercy from './percy';
 
-export async function matchSnapshot(testInfo: TestInfo, testArgs: TestArgs) {
+export async function matchSnapshot(testInfo: TestInfo, testArgs: TestArgs, options: ScreenshotOptions = {}) {
     if (os.platform() !== 'linux') {
         // eslint-disable-next-line no-console
         console.log(
@@ -25,7 +26,7 @@ export async function matchSnapshot(testInfo: TestInfo, testArgs: TestArgs) {
     if (testConfig.snapshotEnabled) {
         // Visual test with built-in snapshot
         const filename = testInfo.title.replace(illegalRe, '').replace(/\s/g, '-').trim().toLowerCase();
-        expect(await testArgs.page.screenshot({fullPage: true})).toMatchSnapshot(`${filename}.png`);
+        await expect(testArgs.page).toHaveScreenshot(`${filename}.png`, {fullPage: true, ...options});
     }
 
     if (testConfig.percyEnabled) {

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

@@ -3,7 +3,8 @@
 
 import percySnapshot from '@percy/playwright';
 
-import testConfig, {TestArgs} from '@e2e-test.config';
+import testConfig from '@e2e-test.config';
+import {TestArgs} from '@e2e-types';
 
 export default async function snapshotWithPercy(name: string, testArgs: TestArgs) {
     if (testArgs.browserName === 'chromium' && testConfig.percyEnabled && testArgs.viewport) {