Add initial set of Playwright integration tests, for testing embeds (#254)

* add first pass on playwright integration tests!
- test embed loading via localhost:9990/embed.html as well as cross-domain with embed on localhost:8020/
while RWP + data on localhost:9990/
- add --ignore-optional to most ci runs
- add playwright ci test
- add playwright and playwright-test to dev dependencies
- add 'test-start-embed' to start test harness for localhost:8020/ embed
- add 'test-start-sandbox' to start test harndess for localhost:8030/ sandbox
- add additional tests for loading with sandbox + requiresubdomainiframe, ensure 'requiresubdomainiframe' works, doesn't allow loading directly

.github/workflows/integration.yaml

@@ -0,0 +1,28 @@
+name: Playwright Integration
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  playwright:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Yarn Install
+        run: yarn install --frozen-lockfile
+
+      - name: Playwright Install Browsers
+        run: yarn playwright install
+
+      - name: Playwright Run Tests
+        run: yarn run playwright test

.github/workflows/lint.yaml

@@ -17,7 +17,7 @@ jobs:
           cache: 'yarn'
 
       - name: Yarn Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --ignore-optional
 
       - name: Yarn Lint
         run: yarn run lint

.github/workflows/npm-release.yaml

@@ -15,7 +15,7 @@ jobs:
           cache: 'yarn'
 
       - name: Yarn Install
-        run: yarn install --frozen-lockfile
+        run: yarn install --frozen-lockfile --ignore-optional
 
       - name: Yarn Build
         run: yarn run build

package.json

@@ -32,6 +32,7 @@
     "@types/flexsearch": "^0.7.3",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
+    "@playwright/test": "^1.38.1",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
     "electron": "^25.1.1",
@@ -45,6 +46,7 @@
     "lint-staged": "^14.0.0",
     "mini-css-extract-plugin": "^2.3.0",
     "node-sass": "^9.0.0",
+    "playwright": "^1.38.1",
     "prettier": "^3.0.1",
     "raw-loader": "^4.0.2",
     "sass-loader": "^13.3.2",
@@ -72,7 +74,9 @@
     "build-dev": "webpack --mode development",
     "build-docs": "bundle install; bundle exec jekyll build",
     "start-dev": "webpack serve --mode development",
-    "start-prod": "http-server -p 9990",
+    "start-prod": "http-server -p 9990 --cors",
+    "test-start-embed": "cd tests/embed; http-server -p 8020",
+    "test-start-sandbox": "cd tests/embed/sandbox; http-server -p 8030",
     "pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
     "pack-signed": "electron-builder",
     "start-electron": "NODE_ENV=development electron ./dist/electron.js $1",

playwright.config.js

@@ -0,0 +1,24 @@
+import { defineConfig } from '@playwright/test';
+export default defineConfig({
+  reporter: process.env.CI ? 'github' : 'list',
+  webServer: [
+    {
+      command: 'yarn run start-prod',
+      url: 'http://127.0.0.1:9990',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: 'yarn run test-start-embed',
+      url: 'http://127.0.0.1:8020',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: 'yarn run test-start-sandbox',
+      url: 'http://127.0.0.1:8030',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    }
+  ]
+});

tests/embed/index-sandbox.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+<script src="http://localhost:9990/ui.js"></script>
+<style>
+html, body {
+  background-color: lightgrey;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+</style>
+</head>
+<body>
+
+<replay-web-page embed="replay" src="http://localhost:9990/docs/assets/tweet-example.wacz" url="page:0" sandbox requiresubdomainiframe></replay-web-page>
+
+</body>
+</html>

tests/embed/index.html

@@ -0,0 +1,17 @@
+<!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 embed="replay-with-info" src="http://localhost:9990/docs/assets/tweet-example.wacz" url="page:0"></replay-web-page>
+
+</body>
+</html>

tests/embed/replay/sw.js

@@ -0,0 +1 @@
+importScripts("http://localhost:9990/sw.js");

tests/embed/sandbox/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+<style>
+html, body {
+  width: 100%;
+  height: 100%;
+}
+iframe {
+  border: 1px black solid;
+  display: flex;
+  width: 90%;
+  height: 600px;
+}
+</style>
+</head>
+<body>
+
+<iframe src="http://localhost:8020/index-sandbox.html" sandbox="allow-scripts allow-modals allow-forms allow-same-origin allow-downloads"></iframe>
+
+</body>
+</html>

tests/embeds.spec.js

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+import { createServer } from "http-server";
+
+
+test("same-domain embed is loading", async ({ page }) => {
+  await page.goto("http://localhost:9990/embed.html");
+
+  const res = page.locator("replay-web-page").frameLocator("iframe").locator("replay-app-main wr-coll wr-coll-replay").frameLocator("iframe").frameLocator("iframe#twitter-widget-0").locator("body");
+
+  await expect(res).toContainText("Want to help");
+});
+
+
+test("cross-domain embed is loading", async ({ page }) => {
+  await page.goto("http://localhost:8020/");
+
+  const res = page.locator("replay-web-page").frameLocator("iframe").locator("replay-app-main wr-coll wr-coll-replay").frameLocator("iframe").frameLocator("iframe#twitter-widget-0").locator("body");
+
+  await expect(res).toContainText("Want to help");
+});
+
+
+test("sandbox + cross-domain embed is loading", async ({ page }) => {
+  await page.goto("http://localhost:8030/");
+
+  const sandboxFrame = page.locator("iframe");
+  await expect(await sandboxFrame.getAttribute("src")).toBe("http://localhost:8020/index-sandbox.html");
+
+  const res = page.frameLocator("iframe").locator("replay-web-page").frameLocator("iframe").locator("replay-app-main wr-coll wr-coll-replay").frameLocator("iframe").frameLocator("iframe#twitter-widget-0").locator("body");
+
+  await expect(res).toContainText("Want to help");
+});
+
+
+test("require subdomain iframe", async ({ page }) => {
+  // load directly, should be blocked
+  await page.goto("http://localhost:8020/index-sandbox.html");
+
+  const res = page.locator("replay-web-page");
+
+  await expect(res).toContainText("Sorry, due to security settings, this ReplayWeb.page embed only be viewed within a subdomain iframe.");
+});

yarn.lock

@@ -388,6 +388,13 @@
     tslib "^2.4.1"
     tsyringe "^4.7.0"
 
+"@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==
+  dependencies:
+    playwright "1.38.1"
+
 "@shoelace-style/animations@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@shoelace-style/animations/-/animations-1.1.0.tgz#17539abafd6dcbf2a79e089e1593175e9f7835b5"
@@ -2970,7 +2977,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -4879,6 +4886,20 @@ 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@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==
+  dependencies:
+    playwright-core "1.38.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 plist@^3.0.1, plist@^3.0.4:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.5.tgz#2cbeb52d10e3cdccccf0c11a63a85d830970a987"