e2e improvements

e2e/components/apps/FileExplorer.spec.ts

@@ -50,7 +50,6 @@ import {
   contextMenuIsVisible,
   desktopEntryIsHidden,
   desktopEntryIsVisible,
-  didCaptureConsoleLogs,
   disableWallpaper,
   dragDesktopEntryToFileExplorer,
   dragFileExplorerEntryToDesktop,
@@ -78,7 +77,7 @@ import {
 } from "e2e/functions";
 import { UNKNOWN_ICON } from "components/system/Files/FileManager/icons";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 test.beforeEach(async ({ page }) => loadApp({ page }, { app: "FileExplorer" }));
 test.beforeEach(windowsAreVisible);
@@ -401,8 +400,8 @@ test.describe("has files & folders", () => {
     await fileExplorerEntryIsHidden(TEST_DESKTOP_FILE, { page });
     await desktopEntryIsVisible(TEST_DESKTOP_FILE, { page });
     await dragDesktopEntryToFileExplorer(TEST_DESKTOP_FILE, { page });
-    await desktopEntryIsHidden(TEST_DESKTOP_FILE, { page });
     await fileExplorerEntryIsVisible(TEST_DESKTOP_FILE, { page });
+    await desktopEntryIsHidden(TEST_DESKTOP_FILE, { page });
   });
 });
 
@@ -511,5 +510,3 @@ test.describe("has navigation", () => {
     await windowTitlebarTextIsVisible(/^My PC$/, { page });
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/apps/Terminal.spec.ts

@@ -3,7 +3,6 @@ import directory from "contexts/process/directory";
 import { ROOT_PUBLIC_TEST_FILE, TERMINAL_BASE_CD } from "e2e/constants";
 import {
   captureConsoleLogs,
-  didCaptureConsoleLogs,
   disableWallpaper,
   loadApp,
   sendTabToTerminal,
@@ -20,7 +19,7 @@ import {
   windowsAreVisible,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 test.beforeEach(async ({ page }) => loadApp({ page }, { app: "Terminal" }));
 test.beforeEach(windowsAreVisible);
@@ -304,5 +303,3 @@ test.describe("has tab completion", () => {
     await terminalHasText({ page }, "help", 1, true);
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/apps/index.spec.ts

@@ -7,8 +7,9 @@ import {
   taskbarEntriesAreVisible,
   windowsAreVisible,
 } from "e2e/functions";
+import { TRANSITIONS_IN_MILLISECONDS } from "utils/constants";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs("apps"));
 test.beforeEach(disableWallpaper);
 
 test.describe("can open app", () => {
@@ -26,6 +27,10 @@ test.describe("can open app", () => {
 
       await loadApp({ page }, { app });
 
+      // NOTE: Some apps fully load AFTER the window has transitioned
+      // eslint-disable-next-line playwright/no-wait-for-timeout
+      await page.waitForTimeout(TRANSITIONS_IN_MILLISECONDS.WINDOW * 2);
+
       if (hasWindow) await windowsAreVisible({ page });
       if (!hideTaskbarEntry) await taskbarEntriesAreVisible({ page });
     });

e2e/components/system/Apps.spec.ts

@@ -8,7 +8,6 @@ import {
 import {
   captureConsoleLogs,
   desktopEntriesAreVisible,
-  didCaptureConsoleLogs,
   disableWallpaper,
   dragFirstDesktopEntryToWindow,
   loadContainerTestApp,
@@ -16,7 +15,7 @@ import {
   windowsAreVisible,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 
 test.describe("app container", () => {
@@ -42,5 +41,3 @@ test.describe("app container", () => {
     );
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/system/Desktop.spec.ts

@@ -19,7 +19,6 @@ import {
   desktopEntryIsHidden,
   desktopEntryIsVisible,
   desktopIsVisible,
-  didCaptureConsoleLogs,
   disableWallpaper,
   filterMenuItems,
   loadApp,
@@ -27,7 +26,7 @@ import {
   selectArea,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 test.beforeEach(loadApp);
 test.beforeEach(desktopIsVisible);
@@ -160,5 +159,3 @@ test.describe("has keyboard shortcuts", () => {
     await appIsOpen(/^DevTools$/, page);
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/system/Search.spec.ts

@@ -3,7 +3,6 @@ import { TEST_SEARCH, TEST_SEARCH_RESULT_TITLE } from "e2e/constants";
 import {
   captureConsoleLogs,
   clickSearchButton,
-  didCaptureConsoleLogs,
   disableWallpaper,
   loadApp,
   searchMenuIsHidden,
@@ -12,7 +11,7 @@ import {
   typeInTaskbarSearchBar,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 test.beforeEach(loadApp);
 test.beforeEach(async ({ page }) => clickSearchButton({ page }));
@@ -33,5 +32,3 @@ test.describe("can search", () => {
     ).toPass();
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/system/StartMenu.spec.ts

@@ -12,7 +12,6 @@ import {
   contextMenuEntryIsVisible,
   contextMenuHasCount,
   desktopEntriesAreVisible,
-  didCaptureConsoleLogs,
   disableWallpaper,
   loadApp,
   pressDesktopKeys,
@@ -26,7 +25,7 @@ import {
   startMenuSidebarEntryIsVisible,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 test.beforeEach(loadApp);
 test.beforeEach(async ({ page }) => clickStartButton({ page }));
@@ -137,5 +136,3 @@ test.describe("can close", () => {
     await searchMenuIsVisible({ page });
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/system/Taskbar.spec.ts

@@ -21,7 +21,6 @@ import {
   contextMenuEntryIsVisible,
   contextMenuHasCount,
   contextMenuIsVisible,
-  didCaptureConsoleLogs,
   disableOffscreenCanvas,
   disableWallpaper,
   fileExplorerEntriesAreVisible,
@@ -43,7 +42,7 @@ import {
   windowIsTransparent,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 
 test.describe("elements", () => {
@@ -195,5 +194,3 @@ test.describe("entries", () => {
     });
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/system/Wallpaper.spec.ts

@@ -9,7 +9,6 @@ import {
   clickFileExplorerEntry,
   contextMenuIsVisible,
   desktopIsVisible,
-  didCaptureConsoleLogs,
   disableWallpaper,
   fileExplorerEntriesAreVisible,
   loadApp,
@@ -19,12 +18,13 @@ import {
   windowsAreVisible,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 
 test("has background", loadAppWithCanvas);
 
 test("can change background", async ({ headless, browserName, page }) => {
   await loadAppWithCanvas({ browserName, headless, page });
+  await sessionIsWriteable({ page });
 
   const pictureSlideshowResponse = await mockPictureSlideshowRequest({ page });
 
@@ -32,7 +32,6 @@ test("can change background", async ({ headless, browserName, page }) => {
   await contextMenuIsVisible({ page });
   await backgroundCanvasMaybeIsVisible({ browserName, headless, page });
   await clickContextMenuEntry(/^Background$/, { page });
-  await sessionIsWriteable({ page });
   await clickContextMenuEntry(/^Picture Slideshow$/, { page });
 
   await pictureSlideshowResponse();
@@ -70,5 +69,3 @@ test.describe("can set background", () => {
     await canvasBackgroundIsHidden({ page });
   });
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/components/system/Window.spec.ts

@@ -9,7 +9,6 @@ import {
   clickCloseWindow,
   clickMaximizeWindow,
   clickMinimizeWindow,
-  didCaptureConsoleLogs,
   disableWallpaper,
   doubleClickWindowTitlebar,
   doubleClickWindowTitlebarIcon,
@@ -27,7 +26,7 @@ import {
   windowsAreVisible,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(disableWallpaper);
 test.beforeEach(loadTestApp);
 test.beforeEach(windowsAreVisible);
@@ -117,5 +116,3 @@ test("can resize", async ({ page }) => {
   expect(finalWidth).toEqual(initialWidth - RESIZE_OFFSET);
   expect(finalHeight).toEqual(initialHeight - RESIZE_OFFSET);
 });
-
-test.afterEach(didCaptureConsoleLogs);

e2e/constants.ts

@@ -10,19 +10,54 @@ declare global {
   }
 }
 
-export const EXCLUDED_CONSOLE_LOGS = (browserName: string): string[] => {
+export const EXCLUDED_CONSOLE_LOGS = (
+  browserName: string,
+  testName?: string
+): string[] => {
+  // Generic messages
   const excludedConsoleLogs = [
-    // Generic messages
-    "Download the React DevTools for a better development experience",
     "[HMR] connected",
-    "[Fast Refresh] rebuilding",
-    "chrome://juggler",
     "No available adapters.",
     "not used within a few seconds",
-    // Marked
-    "mangle parameter is enabled by default, but is deprecated",
+    "[Fast Refresh] rebuilding",
+    "[Fast Refresh] done in",
+    "[Fast Refresh] performing full reload",
+    "Cannot update a component (`Unknown`) while rendering a different component",
   ];
 
+  if (testName === "apps") {
+    excludedConsoleLogs.push(
+      // Browser
+      "Cookie “AEC” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”.",
+      "Blocked autofocusing on a form control in a cross-origin subframe.",
+      "Failed to load resource: the server responded with a status of 404 (Not Found)",
+      'Error: "Content-Security-Policy:',
+      "an ancestor violates the following Content Security Policy directive",
+      // Messenger
+      "WebSocket connection to 'wss://public.relaying.io/' failed: Error during WebSocket handshake: Unexpected response code: 530"
+    );
+
+    if (browserName === "firefox") {
+      excludedConsoleLogs.push(
+        // Messenger
+        "Firefox can’t establish a connection to the server at wss://public.relaying.io/."
+      );
+    } else if (browserName === "webkit") {
+      excludedConsoleLogs.push(
+        // TIC-80
+        "Unable to initialize SDL Audio: -1, No audio context available",
+        "Unable to initialize SDL Game Controller: -1, Gamepads not supported",
+        // Quake 3
+        "WebGL: INVALID_ENUM: texParameter: invalid parameter name"
+      );
+    } else if (browserName === "chromium") {
+      excludedConsoleLogs.push(
+        // Browser
+        "Blocked autofocusing on a <textarea> element in a cross-origin subframe"
+      );
+    }
+  }
+
   if (process.env.CI) {
     if (browserName === "chromium") {
       excludedConsoleLogs.push(
@@ -50,11 +85,6 @@ export const EXCLUDED_CONSOLE_LOGS = (browserName: string): string[] => {
       "Error while parsing the 'sandbox' attribute: 'allow-presentation' is an invalid sandbox flag.",
       'Viewport argument key "interactive-widget" not recognized and ignored.'
     );
-  } else if (browserName === "firefox") {
-    excludedConsoleLogs.push(
-      "Layout was forced before the page was fully loaded",
-      "while rendering a different component (`ForwardRef`)"
-    );
   }
 
   return excludedConsoleLogs;

e2e/functions.ts

@@ -84,37 +84,22 @@ type DocumentWithVendorFullscreen = Document & {
   webkitFullscreenElement?: HTMLElement;
 };
 
-const captureConsole = (
-  { browserName, page }: TestPropsWithBrowser,
-  logType?: string
-): Page =>
-  page.on("console", (msg) => {
-    if (typeof logType === "string" && msg.type() !== logType) return;
+export const captureConsoleLogs =
+  (testName = "") =>
+  ({ browserName, page }: TestPropsWithBrowser): void => {
+    page.on("console", (msg) => {
+      if (testName && msg.type() !== "error") return;
 
-    const text = msg.text();
+      const text = msg.text();
+      const isExcludedMessage =
+        !text ||
+        EXCLUDED_CONSOLE_LOGS(browserName, testName).some((excluded) =>
+          text.includes(excluded)
+        );
 
-    if (
-      !text ||
-      EXCLUDED_CONSOLE_LOGS(browserName).some((excluded) =>
-        text.includes(excluded)
-      )
-    ) {
-      return;
-    }
-
-    globalThis.capturedConsoleLogs = [
-      ...(globalThis.capturedConsoleLogs || []),
-      text,
-    ];
-  });
-
-export const captureConsoleLogs = ({
-  browserName,
-  page,
-}: TestPropsWithBrowser): Page => captureConsole({ browserName, page });
-
-export const didCaptureConsoleLogs = (): void =>
-  expect(globalThis.capturedConsoleLogs || []).toHaveLength(0);
+      if (!isExcludedMessage) throw new Error(text);
+    });
+  };
 
 export const filterMenuItems = (
   menuItems: MenuItems,

e2e/index.spec.ts

@@ -6,13 +6,12 @@ import {
   captureConsoleLogs,
   clockCanvasMaybeIsVisible,
   desktopEntriesAreVisible,
-  didCaptureConsoleLogs,
   loadApp,
   startButtonIsVisible,
   taskbarIsVisible,
 } from "e2e/functions";
 
-test.beforeEach(captureConsoleLogs);
+test.beforeEach(captureConsoleLogs());
 test.beforeEach(loadApp);
 test.beforeEach(desktopEntriesAreVisible);
 test.beforeEach(taskbarIsVisible);
@@ -28,5 +27,3 @@ test("can pass accessibility scan", async ({ page }) =>
         .analyze()
     ).violations
   ).toEqual([]));
-
-test.afterEach(didCaptureConsoleLogs);