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
This commit is contained in:
@@ -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
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
+5
-1
@@ -28,6 +28,7 @@
|
||||
"stream-browserify": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.38.1",
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"css-loader": "^6.2.0",
|
||||
"electron": "^25.1.1",
|
||||
@@ -41,6 +42,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",
|
||||
@@ -64,7 +66,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",
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
]
|
||||
});
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1 @@
|
||||
importScripts("http://localhost:9990/sw.js");
|
||||
@@ -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>
|
||||
@@ -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.");
|
||||
});
|
||||
@@ -327,6 +327,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"
|
||||
|
||||
"@sindresorhus/is@^0.14.0":
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
|
||||
@@ -2740,7 +2747,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==
|
||||
@@ -4618,6 +4625,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"
|
||||
|
||||
Reference in New Issue
Block a user