update playwright

Author: SteffenDE

.github/workflows/ci.yml

@@ -173,7 +173,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.58.2-noble
+      image: mcr.microsoft.com/playwright:v1.59.1-noble
     env:
       ImageOS: ubuntu22
       HOME: /root

package-lock.json

@@ -37,7 +37,7 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.29.0",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.59.1",
     "@types/jest": "^30.0.0",
     "@types/phoenix": "^1.6.6",
     "css.escape": "^1.5.1",

package.json

@@ -17,7 +17,36 @@ const liveViewSourceMap = JSON.parse(
     .toString("utf-8"),
 );
 
+const pageChecks = async (page, ignoreJSErrors) => {
+  // this can be used to check for any console messages that are not expected;
+  // in a LV app, I'd add a unique ID warning check here
+  // const consoleMessages: Array<string> = [];
+  // page.on("console", async (msg) => { consoleMessages.push(msg.text()) });
+  const unhandledErrors = [];
+  page.on("pageerror", (exception) => {
+    unhandledErrors.push(exception);
+  });
+
+  const cleanup = async () => {
+    if (!ignoreJSErrors) {
+      testBase
+        .expect(unhandledErrors, "Detected an unhandled JavaScript Error!")
+        .toEqual([]);
+    }
+  };
+
+  return { cleanup };
+};
+
 const test = testBase.extend({
+  ignoreJSErrors: [false, { option: true }],
+
+  page: async ({ page, ignoreJSErrors }, use) => {
+    const { cleanup } = await pageChecks(page, ignoreJSErrors);
+    await use(page);
+    await cleanup();
+  },
+
   autoTestFixture: [
     async ({ page, browserName }, use) => {
       // NOTE: it depends on your project name

test/e2e/test-fixtures.js

@@ -99,20 +99,26 @@ test("streams work in teleported LiveComponent", async ({ page }) => {
   ).toEqual(4);
 });
 
-test("tooltip example", async ({ page }) => {
-  await page.goto("/portal?tick=false");
-  await syncLV(page);
-
-  await expect(page.locator("#tooltip-example-portal")).toBeHidden();
-  await expect(page.locator("#tooltip-example-no-portal")).toBeHidden();
-
-  await page.getByRole("button", { name: "Hover me", exact: true }).hover();
-  await expect(page.locator("#tooltip-example-portal")).toBeVisible();
-  await expect(page.locator("#tooltip-example-no-portal")).toBeHidden();
-
-  await page.getByRole("button", { name: "Hover me (no portal)" }).hover();
-  await expect(page.locator("#tooltip-example-portal")).toBeHidden();
-  await expect(page.locator("#tooltip-example-no-portal")).toBeVisible();
+test.describe("tooltip", () => {
+  // The tooltip sometimes causes a
+  // ResizeObserver loop completed with undelivered notifications
+  // error, which is safe to ignore.
+  test.use({ ignoreJSErrors: true });
+  test("tooltip example", async ({ page }) => {
+    await page.goto("/portal?tick=false");
+    await syncLV(page);
+
+    await expect(page.locator("#tooltip-example-portal")).toBeHidden();
+    await expect(page.locator("#tooltip-example-no-portal")).toBeHidden();
+
+    await page.getByRole("button", { name: "Hover me", exact: true }).hover();
+    await expect(page.locator("#tooltip-example-portal")).toBeVisible();
+    await expect(page.locator("#tooltip-example-no-portal")).toBeHidden();
+
+    await page.getByRole("button", { name: "Hover me (no portal)" }).hover();
+    await expect(page.locator("#tooltip-example-portal")).toBeHidden();
+    await expect(page.locator("#tooltip-example-no-portal")).toBeVisible();
+  });
 });
 
 test("teleported hook works correctly", async ({ page }) => {