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

.github/workflows/integration.yaml

@@ -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:

CHANGES.md

@@ -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)

package.json

@@ -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",

playwright.config.js

@@ -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",

tests/embed/iframe-test-cross.html

@@ -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>

tests/embed/iframe-test.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>

tests/embed/index-sandbox.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"

tests/embed/index.html

@@ -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"

tests/embeds.spec.js

@@ -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;
   });
 
+  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;
+  }
 });

yarn.lock

@@ -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":
+"@playwright/test@^1.52.0":
-  version "1.38.1"
+  version "1.52.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.38.1.tgz#8ef4263e355cd1d8ad7905d471d268e8acb82ed6"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.52.0.tgz#267ec595b43a8f4fa5e444ea503689629e91a5b8"
-  integrity sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==
+  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":
+"@webrecorder/wabac@^2.23.0":
-  version "2.22.17"
+  version "2.23.0"
-  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.22.17.tgz#af1992ea78fcd6d82f3ce2a5502504d9763c08d8"
+  resolved "https://registry.yarnpkg.com/@webrecorder/wabac/-/wabac-2.23.0.tgz#cad96945365b424c577afa9325df5e6cf6449669"
-  integrity sha512-IW7GKwE2Eh5xCj9E7OUHqmmMxdWa5GyyaVRijOFrBksgMfRAyiZxrSUlpUtALtwbyEQ1r2a5wjKyCCJE3xWubw==
+  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:
+playwright-core@1.52.0:
-  version "1.38.1"
+  version "1.52.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.38.1.tgz#75a3c470aa9576b7d7c4e274de3d79977448ba08"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.52.0.tgz#238f1f0c3edd4ebba0434ce3f4401900319a3dca"
-  integrity sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==
+  integrity sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==
 
-playwright@1.38.1, playwright@^1.38.1:
+playwright@1.52.0, playwright@^1.52.0:
-  version "1.38.1"
+  version "1.52.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.38.1.tgz#82ecd9bc4f4f64dbeee8a11c31793748e2528130"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.52.0.tgz#26cb9a63346651e1c54c8805acfd85683173d4bd"
-  integrity sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==
+  integrity sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==
   dependencies:
-    playwright-core "1.38.1"
+    playwright-core "1.52.0"
   optionalDependencies:
     fsevents "2.3.2"