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

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