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

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