Skip to content

Commit adeefc6

Browse files
ikreymerikreymer
authored
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
1 parent 31dbe00 commit adeefc6

File tree

11 files changed

+182
-4
lines changed

11 files changed

+182
-4
lines changed

‎.github/workflows/integration.yaml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Playwright Integration
2+
3+
on:
4+
push:
5+
pull_request:
6+
7+
jobs:
8+
playwright:
9+
runs-on: ubuntu-latest
10+
11+
steps:
12+
- name: Check out Git repository
13+
uses: actions/checkout@v2
14+
15+
- name: Install Node.js, NPM and Yarn
16+
uses: actions/setup-node@v3
17+
with:
18+
node-version: 18
19+
cache: 'yarn'
20+
21+
- name: Yarn Install
22+
run: yarn install --frozen-lockfile
23+
24+
- name: Playwright Install Browsers
25+
run: yarn playwright install
26+
27+
- name: Playwright Run Tests
28+
run: yarn run playwright test

‎.github/workflows/lint.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ jobs:
1717
cache: 'yarn'
1818

1919
- name: Yarn Install
20-
run: yarn install --frozen-lockfile
20+
run: yarn install --frozen-lockfile --ignore-optional
2121

2222
- name: Yarn Lint
2323
run: yarn run lint

‎.github/workflows/npm-release.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ jobs:
1515
cache: 'yarn'
1616

1717
- name: Yarn Install
18-
run: yarn install --frozen-lockfile
18+
run: yarn install --frozen-lockfile --ignore-optional
1919

2020
- name: Yarn Build
2121
run: yarn run build

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"stream-browserify": "^3.0.0"
2929
},
3030
"devDependencies": {
31+
"@playwright/test": "^1.38.1",
3132
"copy-webpack-plugin": "^9.0.1",
3233
"css-loader": "^6.2.0",
3334
"electron": "^25.1.1",
@@ -41,6 +42,7 @@
4142
"lint-staged": "^14.0.0",
4243
"mini-css-extract-plugin": "^2.3.0",
4344
"node-sass": "^9.0.0",
45+
"playwright": "^1.38.1",
4446
"prettier": "^3.0.1",
4547
"raw-loader": "^4.0.2",
4648
"sass-loader": "^13.3.2",
@@ -64,7 +66,9 @@
6466
"build-dev": "webpack --mode development",
6567
"build-docs": "bundle install; bundle exec jekyll build",
6668
"start-dev": "webpack serve --mode development",
67-
"start-prod": "http-server -p 9990",
69+
"start-prod": "http-server -p 9990 --cors",
70+
"test-start-embed": "cd tests/embed; http-server -p 8020",
71+
"test-start-sandbox": "cd tests/embed/sandbox; http-server -p 8030",
6872
"pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
6973
"pack-signed": "electron-builder",
7074
"start-electron": "NODE_ENV=development electron ./dist/electron.js $1",

‎playwright.config.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { defineConfig } from '@playwright/test';
2+
export default defineConfig({
3+
reporter: process.env.CI ? 'github' : 'list',
4+
webServer: [
5+
{
6+
command: 'yarn run start-prod',
7+
url: 'http://127.0.0.1:9990',
8+
timeout: 120 * 1000,
9+
reuseExistingServer: !process.env.CI,
10+
},
11+
{
12+
command: 'yarn run test-start-embed',
13+
url: 'http://127.0.0.1:8020',
14+
timeout: 120 * 1000,
15+
reuseExistingServer: !process.env.CI,
16+
},
17+
{
18+
command: 'yarn run test-start-sandbox',
19+
url: 'http://127.0.0.1:8030',
20+
timeout: 120 * 1000,
21+
reuseExistingServer: !process.env.CI,
22+
}
23+
]
24+
});

‎tests/embed/index-sandbox.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script src="http://localhost:9990/ui.js"></script>
5+
<style>
6+
html, body {
7+
background-color: lightgrey;
8+
height: 100%;
9+
width: 100%;
10+
overflow: hidden;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
16+
<replay-web-page embed="replay" src="http://localhost:9990/docs/assets/tweet-example.wacz" url="page:0" sandbox requiresubdomainiframe></replay-web-page>
17+
18+
</body>
19+
</html>

‎tests/embed/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script src="http://localhost:9990/ui.js"></script>
5+
<style>
6+
body {
7+
background-color: lightgrey;
8+
height: 600px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
14+
<replay-web-page embed="replay-with-info" src="http://localhost:9990/docs/assets/tweet-example.wacz" url="page:0"></replay-web-page>
15+
16+
</body>
17+
</html>

‎tests/embed/replay/sw.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
importScripts("http://localhost:9990/sw.js");

‎tests/embed/sandbox/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<style>
5+
html, body {
6+
width: 100%;
7+
height: 100%;
8+
}
9+
iframe {
10+
border: 1px black solid;
11+
display: flex;
12+
width: 90%;
13+
height: 600px;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
19+
<iframe src="http://localhost:8020/index-sandbox.html" sandbox="allow-scripts allow-modals allow-forms allow-same-origin allow-downloads"></iframe>
20+
21+
</body>
22+
</html>

‎tests/embeds.spec.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { test, expect } from '@playwright/test';
2+
import { createServer } from "http-server";
3+
4+
5+
test("same-domain embed is loading", async ({ page }) => {
6+
await page.goto("http://localhost:9990/embed.html");
7+
8+
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");
9+
10+
await expect(res).toContainText("Want to help");
11+
});
12+
13+
14+
test("cross-domain embed is loading", async ({ page }) => {
15+
await page.goto("http://localhost:8020/");
16+
17+
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");
18+
19+
await expect(res).toContainText("Want to help");
20+
});
21+
22+
23+
test("sandbox + cross-domain embed is loading", async ({ page }) => {
24+
await page.goto("http://localhost:8030/");
25+
26+
const sandboxFrame = page.locator("iframe");
27+
await expect(await sandboxFrame.getAttribute("src")).toBe("http://localhost:8020/index-sandbox.html");
28+
29+
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");
30+
31+
await expect(res).toContainText("Want to help");
32+
});
33+
34+
35+
test("require subdomain iframe", async ({ page }) => {
36+
// load directly, should be blocked
37+
await page.goto("http://localhost:8020/index-sandbox.html");
38+
39+
const res = page.locator("replay-web-page");
40+
41+
await expect(res).toContainText("Sorry, due to security settings, this ReplayWeb.page embed only be viewed within a subdomain iframe.");
42+
});

0 commit comments

Comments
 (0)