e2e(helpers): Playwright helpers for server views and desktop (#3887)

Author: yasserfaraazkhan

e2e/fixtures/index.ts

@@ -8,7 +8,7 @@ import {test as base, type Page} from '@playwright/test';
 import type {ElectronApplication} from 'playwright';
 import {_electron as electron} from 'playwright';
 
-import {waitForAppReady} from '../helpers/appReadiness';
+import {waitForAppReady, waitForMainWindow, waitForMainWindowChrome} from '../helpers/appReadiness';
 import {electronBinaryPath, appDir, demoConfig, writeConfigFile, type AppConfig} from '../helpers/config';
 import {
     closeElectronApp,
@@ -39,9 +39,9 @@ type Fixtures = {
     electronApp: ElectronApplication;
 
     /**
-     * Side-effect fixture: waits until __e2eAppReady is true in the main process.
-     * Both serverMap and mainWindow depend on this. Playwright deduplicates it —
-     * waitForAppReady() runs exactly once even if both fixtures are requested.
+     * Side-effect fixture: waits until __e2eAppReady is true, then (when config
+     * lists servers) until the main-window server dropdown button is visible.
+     * Both serverMap and mainWindow depend on this. Playwright deduplicates it.
      */
     appReady: void;
 
@@ -139,13 +139,18 @@ export const test = base.extend<Fixtures, WorkerFixtures>({
         await fs.rm(userDataDir, {recursive: true, force: true}).catch(() => {});
     },
 
-    appReady: async ({electronApp}, use) => {
+    appReady: async ({electronApp, appConfig}, use) => {
         await waitForAppReady(electronApp);
 
         // Setup path: the main process is freshly launched and responsive, so
         // the default 3s bound is ample for sub-100ms dropdown closes and still
         // fails fast if app.evaluate hangs. No larger setup timeout is needed.
         await closeOverlayWindowsIfOpen(electronApp);
+
+        if (appConfig.servers.length > 0) {
+            await waitForMainWindowChrome(electronApp, {requireServerDropdown: true});
+        }
+
         await use();
     },
 
@@ -157,31 +162,7 @@ export const test = base.extend<Fixtures, WorkerFixtures>({
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mainWindow: async ({electronApp, appReady: _appReady}, use) => {
-        let win: Page | undefined;
-        const timeoutAt = Date.now() + 30_000;
-
-        while (Date.now() < timeoutAt) {
-            win = electronApp.windows().find((w) => {
-                try {
-                    return w.url().includes('index');
-                } catch {
-                    return false;
-                }
-            });
-
-            if (win) {
-                break;
-            }
-
-            await new Promise((resolve) => setTimeout(resolve, 200));
-        }
-
-        if (!win) {
-            throw new Error(
-                'mainWindow fixture: no window with \'index\' in URL.\n' +
-                `Available: ${electronApp.windows().map((w) => w.url()).join(', ')}`,
-            );
-        }
+        const win = await waitForMainWindow(electronApp);
         await use(win);
     },
 });

e2e/helpers/appMetrics.ts

@@ -0,0 +1,73 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {ElectronApplication} from 'playwright';
+
+/** Shape returned by Electron `app.getAppMetrics()` (subset used by tests). */
+export type AppProcessMetric = {
+    pid: number;
+    type: string;
+    name?: string;
+};
+
+export type AppProcessMetricsSummary = {
+    metrics: AppProcessMetric[];
+    totalCount: number;
+    tabCount: number;
+    nonTabCount: number;
+    types: string[];
+    pids: number[];
+};
+
+/**
+ * Upper bounds for non-Tab processes under the sandboxed E2E launch flags in
+ * `e2e/fixtures/index.ts` (`--disable-gpu`, `--no-zygote`, etc.). These differ
+ * from a normal Task Manager baseline on an end-user install.
+ */
+const NON_TAB_PROCESS_MAX: Partial<Record<NodeJS.Platform, number>> = {
+    darwin: 10,
+    linux: 10,
+    win32: 12,
+};
+
+const DEFAULT_NON_TAB_PROCESS_MAX = 12;
+
+/** Tab/renderer processes for demoConfig (2 servers + main chrome). */
+const TAB_PROCESS_MAX = 30;
+
+export async function getAppProcessMetrics(app: ElectronApplication): Promise<AppProcessMetric[]> {
+    return app.evaluate(({app: electronApp}) => {
+        return electronApp.getAppMetrics().map((metric) => ({
+            pid: metric.pid,
+            type: metric.type,
+            name: metric.name,
+        }));
+    });
+}
+
+export function summarizeAppProcessMetrics(metrics: AppProcessMetric[]): AppProcessMetricsSummary {
+    const tabMetrics = metrics.filter((metric) => metric.type === 'Tab');
+    const nonTabMetrics = metrics.filter((metric) => metric.type !== 'Tab');
+
+    return {
+        metrics,
+        totalCount: metrics.length,
+        tabCount: tabMetrics.length,
+        nonTabCount: nonTabMetrics.length,
+        types: [...new Set(metrics.map((metric) => metric.type))].sort(),
+        pids: metrics.map((metric) => metric.pid),
+    };
+}
+
+export function getNonTabProcessMax(): number {
+    return NON_TAB_PROCESS_MAX[process.platform] ?? DEFAULT_NON_TAB_PROCESS_MAX;
+}
+
+export function getTabProcessMax(): number {
+    return TAB_PROCESS_MAX;
+}
+
+export async function summarizeProcessMetrics(app: ElectronApplication): Promise<AppProcessMetricsSummary> {
+    const metrics = await getAppProcessMetrics(app);
+    return summarizeAppProcessMetrics(metrics);
+}

e2e/helpers/appReadiness.ts

@@ -2,7 +2,67 @@
 // See LICENSE.txt for license information.
 
 import {expect} from '@playwright/test';
-import type {ElectronApplication} from 'playwright';
+import type {ElectronApplication, Page} from 'playwright';
+
+const MAIN_WINDOW_POLL_MS = 200;
+
+export function findMainWindow(app: ElectronApplication): Page | undefined {
+    return app.windows().find((window) => {
+        try {
+            return window.url().includes('index');
+        } catch {
+            return false;
+        }
+    });
+}
+
+/** Resolve the internal main window (index.html wrapper). */
+export async function waitForMainWindow(
+    app: ElectronApplication,
+    options?: {timeout?: number},
+): Promise<Page> {
+    const timeout = options?.timeout ?? 30_000;
+    let mainWindow: Page | undefined;
+
+    await expect.poll(async () => {
+        mainWindow = findMainWindow(app);
+        return mainWindow;
+    }, {
+        timeout,
+        intervals: [MAIN_WINDOW_POLL_MS, 500, 1000],
+        message: 'Main window (index.html) must appear',
+    }).not.toBeUndefined();
+
+    if (!mainWindow) {
+        throw new Error(
+            'Main window was not available.\n' +
+            `Available: ${app.windows().map((window) => window.url()).join(', ')}`,
+        );
+    }
+
+    return mainWindow;
+}
+
+/**
+ * Wait until main-window chrome needed for server management is rendered.
+ * Used when config already lists servers — catches broken wrapper UI that
+ * __e2eAppReady alone would miss.
+ */
+export async function waitForMainWindowChrome(
+    app: ElectronApplication,
+    options?: {requireServerDropdown?: boolean; timeout?: number},
+): Promise<Page> {
+    const timeout = options?.timeout ?? 30_000;
+    const deadline = Date.now() + timeout;
+    const mainWindow = await waitForMainWindow(app, {timeout});
+
+    if (options?.requireServerDropdown) {
+        const remaining = Math.max(0, deadline - Date.now());
+        await mainWindow.waitForSelector('.ServerDropdownButton', {timeout: remaining});
+    }
+
+    return mainWindow;
+}
 
 export async function waitForAppReady(app: ElectronApplication): Promise<void> {
     const timeout = process.platform === 'linux' ? 30_000 : 60_000;

e2e/helpers/blockingOverlays.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {findMainWindow} from './appReadiness';
+import {closeDownloadsDropdownIfOpen} from './downloadsDropdown';
+import {closeOverlayWindowsIfOpen} from './overlayWindows';
+import {activateServerView} from './serverContext';
+import type {ServerView} from './serverView';
+
+/** Close desktop overlays that steal focus from server views (dropdowns, modals). */
+export async function dismissBlockingOverlays(win: ServerView): Promise<void> {
+    await closeDownloadsDropdownIfOpen(win.app);
+    await closeOverlayWindowsIfOpen(win.app);
+    await activateServerView(win.app, win.webContentsId);
+    const mainWindow = findMainWindow(win.app);
+    await mainWindow?.keyboard.press('Escape').catch(() => undefined);
+    await win.keyboard.press('Escape').catch(() => undefined);
+}

e2e/helpers/channelMenu.ts

@@ -28,10 +28,12 @@ export const COPY_LINK_SELECTORS = [
  * The webapp migrated from #channelHeaderDropdownButton to Menu.Button
  * with an aria-label like "off-topic channel menu".
  */
-export async function openChannelHeaderMenu(win: ServerView): Promise<void> {
-    await win.waitForSelector(CHANNEL_HEADER_MENU_TRIGGER, {state: 'visible', timeout: 15_000});
+export async function openChannelHeaderMenu(win: ServerView, timeout = 20_000): Promise<void> {
+    const menuTimeout = Math.min(Math.max(Math.floor(timeout * 0.25), 500), 5_000);
+    const triggerTimeout = Math.max(timeout - menuTimeout, 500);
+    await win.waitForSelector(CHANNEL_HEADER_MENU_TRIGGER, {state: 'visible', timeout: triggerTimeout});
     await win.click(CHANNEL_HEADER_MENU_TRIGGER);
-    await win.waitForSelector('#channelHeaderDropdownMenu, .a11y__popup', {timeout: 5_000});
+    await win.waitForSelector('#channelHeaderDropdownMenu, .a11y__popup', {timeout: menuTimeout});
 }
 
 const SIDEBAR_CHANNEL_MENU_BUTTON = (channelItemSelector: string) => [
@@ -117,34 +119,59 @@ export async function clickCopyLinkInMenu(win: ServerView): Promise<void> {
  * helper only toggles the preference — callers wait for bookmark items later.
  */
 export async function enableBookmarksBar(win: ServerView): Promise<void> {
-    const alreadyVisible = await win.runInRenderer(`
+    const isBookmarksBarVisible = async (): Promise<boolean> => win.runInRenderer(`
         const container = document.querySelector('[data-testid="channel-bookmarks-container"]');
         if (!container) {
             return false;
         }
         const rect = container.getBoundingClientRect();
         return rect.width > 0 && rect.height > 0;
     `);
-    if (alreadyVisible) {
+
+    if (await isBookmarksBarVisible()) {
         return;
     }
 
-    await openChannelHeaderMenu(win);
-    const toggled = await win.runInRenderer(`
-        const items = Array.from(document.querySelectorAll(
-            '[role="menuitem"], .MenuItem, [id^="channel-menu-"]',
-        ));
-        const barItem = items.find((item) => /bookmarks bar/i.test((item.textContent || '').trim()));
-        if (!barItem) {
-            return false;
+    const deadline = Date.now() + 15_000;
+    while (Date.now() < deadline) {
+        const remaining = Math.max(deadline - Date.now(), 1_000);
+        await openChannelHeaderMenu(win, remaining);
+
+        const toggleResult = await win.runInRenderer(`
+            const submenuTrigger = document.querySelector('[id^="channel-menu-"][id$="-bookmarks"]');
+            if (submenuTrigger instanceof HTMLElement) {
+                submenuTrigger.dispatchEvent(new MouseEvent('mouseenter', {bubbles: true}));
+                submenuTrigger.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
+            }
+
+            const items = Array.from(document.querySelectorAll(
+                '[role="menuitem"], .MenuItem, [id^="channel-menu-"]',
+            ));
+            const barItem = items.find((item) => {
+                const text = (item.textContent || '').trim();
+                return /bookmarks bar/i.test(text) && !/add a link|add bookmark|attach file/i.test(text);
+            });
+            if (!barItem) {
+                // Modern webapp: bookmarks live under the Bookmarks submenu and the bar
+                // autoshows once a bookmark exists — no separate Show/Hide toggle.
+                return submenuTrigger ? 'submenu-only' : 'missing';
+            }
+            const label = (barItem.textContent || '').trim().toLowerCase();
+            const checked = barItem.getAttribute('aria-checked');
+            if (label.includes('hide') || checked === 'true') {
+                return 'enabled';
+            }
+            barItem.click();
+            return 'clicked';
+        `, true);
+        await win.keyboard.press('Escape').catch(() => undefined);
+        if (toggleResult === 'enabled' || toggleResult === 'clicked' || toggleResult === 'submenu-only') {
+            return;
         }
-        barItem.click();
-        return true;
-    `, true);
-    if (!toggled) {
-        throw new Error('Bookmarks Bar menu item not found in channel header menu');
+        await new Promise((resolve) => setTimeout(resolve, 300));
     }
-    await win.keyboard.press('Escape');
+
+    throw new Error('Bookmarks Bar menu item not found in channel header menu');
 }
 
 export const TEAM_SIDEBAR_BUTTON = [