Add multi browser tests + wabac.js update (#420)

Fidelity: Fix CSP issue with iframes in Firefox (via wabac.js 2.23.0) Loading: Avoid unnecessary reloads of multiWACZ JSON, prune expired multiWACZ collections Testing improvements: - add playwright multi browser tests with firefox and webkit - add test of iframe replay with iframetest.wacz deps: update to wabac.js 2.23.0 bump to 2.3.9
2025-05-14 21:26:01 -07:00
parent 62c30e7838
commit 69983af3a8
11 changed files with 139 additions and 27 deletions
@@ -27,7 +27,7 @@ jobs:
        run: yarn build

      - name: Playwright Install Browsers
-        run: yarn playwright install
+        run: yarn playwright install --with-deps

      - uses: actions/setup-python@v4
        with:
@@ -2,6 +2,11 @@

 ## CHANGES

+v2.3.9
+- Loading: Avoid unnecessary reloads of multiWACZ JSON, prune expired (via wabac.js 2.23.0)
+- Fidelity: Fix CSP issue with iframes in Firefox (via wabac.js 2.23.0)
+- Testing: Add testing for CSP handling and embeds in Firefox and Webkit
+
 v2.3.8

 - Library: disable GDrive integration in library (for AWP use)
@@ -1,7 +1,7 @@
 {
  "name": "replaywebpage",
  "productName": "ReplayWeb.page",
-  "version": "2.3.8",
+  "version": "2.3.9",
  "description": "Serverless Web Archive Replay",
  "repository": "https://github.com/webrecorder/replayweb.page",
  "homepage": "https://replayweb.page/",
@@ -22,7 +22,7 @@
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@shoelace-style/shoelace": "~2.15.1",
-    "@webrecorder/wabac": "^2.22.17",
+    "@webrecorder/wabac": "^2.23.0",
    "bulma": "^0.9.3",
    "electron-log": "^4.4.1",
    "electron-updater": "^6.3.9",
@@ -44,7 +44,7 @@
    "tsconfig-paths-webpack-plugin": "^4.1.0"
  },
  "devDependencies": {
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.52.0",
    "@types/flexsearch": "^0.7.3",
    "@types/lodash": "^4.17.5",
    "@typescript-eslint/eslint-plugin": "^6.12.0",
@@ -62,7 +62,7 @@
    "husky": "^8.0.0",
    "lint-staged": "^14.0.0",
    "mini-css-extract-plugin": "^2.3.0",
-    "playwright": "^1.38.1",
+    "playwright": "^1.52.0",
    "prettier": "^3.0.1",
    "raw-loader": "^4.0.2",
    "sass-embedded": "^1.70.0",
@@ -97,7 +97,7 @@
    "start-dev": "webpack serve --mode development",
    "start-docs": "yarn run build-dev && cd mkdocs && ./copy-site.sh && mkdocs serve",
    "start-electron": "NODE_ENV=development electron ./dist/electron.js $1",
-    "test-start-embed": "cd tests/embed; http-server -p 8020",
+    "test-start-embed": "cp tests/embed/iframe-test.html mkdocs/_genhtml/; cd tests/embed; http-server -p 8020",
    "test-start-sandbox": "cd tests/embed/sandbox; http-server -p 8030",
    "update-ruffle": "./ruffle/download-latest-ruffle.sh",
    "pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
@@ -1,7 +1,22 @@
 /* eslint-env node */
-import { defineConfig } from "@playwright/test";
+import { defineConfig, devices } from "@playwright/test";
 export default defineConfig({
  reporter: process.env.CI ? "github" : "list",
+  expect: { timeout: 30_000 },
+  projects: [
+    {
+      name: "chrome",
+      use: { ...devices['Desktop Chrome'], channel: "chrome" },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
  webServer: [
    {
      command: "yarn run start-docs-prod",
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="http://localhost:9990/ui.js"></script>
+    <style>
+      body {
+        background-color: lightgrey;
+        height: 600px;
+      }
+    </style>
+  </head>
+  <body>
+    <replay-web-page
+      noWebWorker
+      src="http://localhost:9990/docs/examples/iframetest.wacz"
+      url="page:0"
+    ></replay-web-page>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="./ui.js"></script>
+    <style>
+      body {
+        background-color: lightgrey;
+        height: 600px;
+      }
+    </style>
+  </head>
+  <body>
+    <replay-web-page
+      replaybase="./"
+      src="./docs/examples/iframetest.wacz"
+      url="page:0"
+    ></replay-web-page>
+  </body>
+</html>
@@ -14,6 +14,7 @@
  </head>
  <body>
    <replay-web-page
+      noWebWorker
      embed="replay"
      src="http://localhost:9990/docs/examples/tweet-example.wacz"
      url="page:0"
@@ -11,6 +11,7 @@
  </head>
  <body>
    <replay-web-page
+      noWebWorker
      embed="replay-with-info"
      src="http://localhost:9990/docs/examples/tweet-example.wacz"
      url="page:0"
@@ -42,6 +42,42 @@ test("cross-domain embed is loading", async ({ page }) => {
  await expect(res).toContainText("Want to help");
 });

+test("same-domain iframe embed is loading", async ({ page }) => {
+  await page.goto("http://localhost:9990/iframe-test.html");
+
+  const res = page
+    .locator("replay-web-page")
+    .frameLocator("iframe")
+    .locator("replay-app-main wr-item wr-coll-replay")
+    .frameLocator("iframe")
+    .locator("body");
+
+  await expect(res).toContainText("Outside iframe");
+
+  const inside = res.frameLocator("iframe").locator("body");
+
+  await expect(inside).toContainText("Inside iframe");
+
+});
+
+test("cross-domain iframe embed is loading", async ({ page }) => {
+  await page.goto("http://localhost:8020/iframe-test-cross.html");
+
+  const res = page
+    .locator("replay-web-page")
+    .frameLocator("iframe")
+    .locator("replay-app-main wr-item wr-coll-replay")
+    .frameLocator("iframe")
+    .locator("body");
+
+  await expect(res).toContainText("Outside iframe");
+
+  const inside = res.frameLocator("iframe").locator("body");
+
+  await expect(inside).toContainText("Inside iframe");
+
+});
+
 test("sandbox + cross-domain embed is loading", async ({ page }) => {
  await page.goto("http://localhost:8030/");

@@ -73,7 +109,7 @@ test("require subdomain iframe", async ({ page }) => {
  );
 });

-test("csp blocking in place", async ({ page }) => {
+test("csp blocking in place", async ({ page }, workerInfo) => {
  await page.goto("http://localhost:9990/embed.html");

  const frame = page
@@ -114,6 +150,8 @@ test("csp blocking in place", async ({ page }) => {

    // (5-6) blocked by csp policy, even though local
    block += await blocked(iframe.contentWindow, "http://localhost:9990/sw.js");
+
+    // not blocked in FF
    block += await blocked(
      iframe.contentWindow,
      "http://localhost:9990/static/wombat.js",
@@ -122,5 +160,19 @@ test("csp blocking in place", async ({ page }) => {
    return block;
  });

-  expect(didNotFetch).toBe(6);
+  const name = workerInfo.project.name;
+
+  switch (name) {
+    case "chrome":
+      expect(didNotFetch).toBe(6);
+      break;
+
+    case "firefox":
+      expect(didNotFetch).toBe(5);
+      break;
+
+    case "webkit":
+      expect(didNotFetch).toBe(4);
+      break;
+  }
 });
@@ -417,12 +417,12 @@
  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==

-"@playwright/test@^1.38.1":
-  version "1.38.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.38.1.tgz#8ef4263e355cd1d8ad7905d471d268e8acb82ed6"
-  integrity sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==
+"@playwright/test@^1.52.0":
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.52.0.tgz#267ec595b43a8f4fa5e444ea503689629e91a5b8"
+  integrity sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==
  dependencies:
-    playwright "1.38.1"
+    playwright "1.52.0"

 "@shoelace-style/animations@^1.1.0":
  version "1.1.0"
@@ -1028,10 +1028,10 @@
  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
  integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==

-"@webrecorder/wabac@^2.22.17":
-  version "2.22.17"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.22.17.tgz#af1992ea78fcd6d82f3ce2a5502504d9763c08d8"
-  integrity sha512-IW7GKwE2Eh5xCj9E7OUHqmmMxdWa5GyyaVRijOFrBksgMfRAyiZxrSUlpUtALtwbyEQ1r2a5wjKyCCJE3xWubw==
+"@webrecorder/wabac@^2.23.0":
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.23.0.tgz#cad96945365b424c577afa9325df5e6cf6449669"
+  integrity sha512-kqbs2C/D1moLeinQZ1ilMcgmvXk1B18Yu7S3AEAiOYM+pL62p0DBIfVyS3SUgU2X7nCeJmn90Sq+Pytb3NQ0gg==
  dependencies:
    "@peculiar/asn1-ecc" "^2.3.4"
    "@peculiar/asn1-schema" "^2.3.3"
@@ -4467,17 +4467,17 @@ pkg-dir@^4.2.0:
  dependencies:
    find-up "^4.0.0"

-playwright-core@1.38.1:
-  version "1.38.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.38.1.tgz#75a3c470aa9576b7d7c4e274de3d79977448ba08"
-  integrity sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==
+playwright-core@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.52.0.tgz#238f1f0c3edd4ebba0434ce3f4401900319a3dca"
+  integrity sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==

-playwright@1.38.1, playwright@^1.38.1:
-  version "1.38.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.38.1.tgz#82ecd9bc4f4f64dbeee8a11c31793748e2528130"
-  integrity sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==
+playwright@1.52.0, playwright@^1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.52.0.tgz#26cb9a63346651e1c54c8805acfd85683173d4bd"
+  integrity sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==
  dependencies:
-    playwright-core "1.38.1"
+    playwright-core "1.52.0"
  optionalDependencies:
    fsevents "2.3.2"