From adeefc64dd8944a30f301f15a40d98ddfc482a3c Mon Sep 17 00:00:00 2001 From: Ilya Kreymer Date: Fri, 6 Oct 2023 20:06:04 -0700 Subject: [PATCH] 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 | 28 ++++++++++++++++++++ .github/workflows/lint.yaml | 2 +- .github/workflows/npm-release.yaml | 2 +- package.json | 6 ++++- playwright.config.js | 24 +++++++++++++++++ tests/embed/index-sandbox.html | 19 ++++++++++++++ tests/embed/index.html | 17 ++++++++++++ tests/embed/replay/sw.js | 1 + tests/embed/sandbox/index.html | 22 ++++++++++++++++ tests/embeds.spec.js | 42 ++++++++++++++++++++++++++++++ yarn.lock | 23 +++++++++++++++- 11 files changed, 182 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/integration.yaml create mode 100644 playwright.config.js create mode 100644 tests/embed/index-sandbox.html create mode 100644 tests/embed/index.html create mode 100644 tests/embed/replay/sw.js create mode 100644 tests/embed/sandbox/index.html create mode 100644 tests/embeds.spec.js diff --git a/.github/workflows/integration.yaml b/.github/workflows/integration.yaml new file mode 100644 index 0000000..f4eee8b --- /dev/null +++ b/.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 diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml index 9ac0db1..25224a9 100644 --- a/.github/workflows/lint.yaml +++ b/.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 diff --git a/.github/workflows/npm-release.yaml b/.github/workflows/npm-release.yaml index ef8eff1..4096f66 100644 --- a/.github/workflows/npm-release.yaml +++ b/.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 diff --git a/package.json b/package.json index 682d4d5..e73e8fc 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/playwright.config.js b/playwright.config.js new file mode 100644 index 0000000..cbc4739 --- /dev/null +++ b/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, + } + ] +}); diff --git a/tests/embed/index-sandbox.html b/tests/embed/index-sandbox.html new file mode 100644 index 0000000..ee1be18 --- /dev/null +++ b/tests/embed/index-sandbox.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + diff --git a/tests/embed/index.html b/tests/embed/index.html new file mode 100644 index 0000000..65d8440 --- /dev/null +++ b/tests/embed/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/tests/embed/replay/sw.js b/tests/embed/replay/sw.js new file mode 100644 index 0000000..99c36a9 --- /dev/null +++ b/tests/embed/replay/sw.js @@ -0,0 +1 @@ +importScripts("http://localhost:9990/sw.js"); diff --git a/tests/embed/sandbox/index.html b/tests/embed/sandbox/index.html new file mode 100644 index 0000000..37bba18 --- /dev/null +++ b/tests/embed/sandbox/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/tests/embeds.spec.js b/tests/embeds.spec.js new file mode 100644 index 0000000..efafeb5 --- /dev/null +++ b/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."); +}); diff --git a/yarn.lock b/yarn.lock index 50fe3d7..6dd0e6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"