From 425fbbdd304fcad9baa9cbd92a3bbc2e7ff50d5d Mon Sep 17 00:00:00 2001 From: Robin Drexler Date: Tue, 12 Nov 2024 17:45:44 -0500 Subject: [PATCH] wip --- .github/workflows/checks.yml | 16 ++++++++++++ .gitignore | 4 +++ e2e/basic.spec.ts | 29 +++++++++++++++++++++ package.json | 2 ++ playwright.config.ts | 49 ++++++++++++++++++++++++++++++++++++ pnpm-lock.yaml | 38 ++++++++++++++++++++++++++++ 6 files changed, 138 insertions(+) create mode 100644 e2e/basic.spec.ts create mode 100644 playwright.config.ts diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml index 99bbb8a5..6d7dfaf7 100644 --- a/.github/workflows/checks.yml +++ b/.github/workflows/checks.yml @@ -30,3 +30,19 @@ jobs: - uses: actions/checkout@v4 - uses: ./.github/workflows/actions/prepare - run: pnpm run test + + e2e: + name: Playwright E2E 🎭 + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - uses: actions/checkout@v4 + - uses: ./.github/workflows/actions/prepare + - run: npx playwright install --with-deps + - run: pnpm exec playwright test + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 55e60711..44f54502 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,7 @@ node_modules/ .DS_STORE packages/*/bin/ *.log +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ diff --git a/e2e/basic.spec.ts b/e2e/basic.spec.ts new file mode 100644 index 00000000..c68e4971 --- /dev/null +++ b/e2e/basic.spec.ts @@ -0,0 +1,29 @@ +import {test, expect} from '@playwright/test'; + +[ + ['iframe', 'vanilla'], + ['iframe', 'preact'], + ['iframe', 'svelte'], + ['iframe', 'vue'], + ['iframe', 'htm'], +].forEach(([sandbox, example]) => { + test(`basic modal interaction with ${sandbox} sandbox and ${example} example`, async ({ + page, + }) => { + await page.goto( + `http://localhost:8080/?sandbox=${sandbox}&example=${example}`, + ); + + await page.getByRole('button', {name: 'Open modal'}).click(); + await page.getByRole('button', {name: 'Click me!'}).click(); + await page.getByRole('button', {name: 'Click me!'}).click(); + + await expect(page.getByText('Click Count: 3')).toBeVisible(); + + page.once('dialog', (dialog) => { + dialog.dismiss().catch(() => {}); + expect(dialog.message()).toBe('You clicked 2 times!'); + }); + await page.getByRole('button', {name: 'Close'}).click(); + }); +}); diff --git a/package.json b/package.json index 9effc81c..74246510 100644 --- a/package.json +++ b/package.json @@ -23,11 +23,13 @@ "devDependencies": { "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.0", + "@playwright/test": "^1.48.2", "@quilted/rollup": "^0.2.45", "@quilted/typescript": "^0.4.2", "@quilted/vite": "^0.1.27", "@types/node": "~20.11.0", "jsdom": "^25.0.0", + "playwright": "^1.48.2", "prettier": "^3.3.3", "rollup": "^4.21.0", "tsx": "^4.19.0", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 00000000..2193dc8f --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,49 @@ +import {defineConfig, devices} from '@playwright/test'; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './e2e', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + // baseURL: 'http://127.0.0.1:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: {...devices['Desktop Chrome']}, + }, + ], + + /* Run your local dev server before starting the tests */ + webServer: { + command: 'pnpm run example:kitchen-sink --port 8080', + url: 'http://localhost:8080', + reuseExistingServer: !process.env.CI, + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc607706..60a8d15b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@changesets/cli': specifier: ^2.27.0 version: 2.27.7 + '@playwright/test': + specifier: ^1.48.2 + version: 1.48.2 '@quilted/rollup': specifier: ^0.2.45 version: 0.2.45(@babel/template@7.25.0)(rollup@4.21.2) @@ -29,6 +32,9 @@ importers: jsdom: specifier: ^25.0.0 version: 25.0.0 + playwright: + specifier: ^1.48.2 + version: 1.48.2 prettier: specifier: ^3.3.3 version: 3.3.3 @@ -2374,6 +2380,14 @@ packages: dev: true optional: true + /@playwright/test@1.48.2: + resolution: {integrity: sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==} + engines: {node: '>=18'} + hasBin: true + dependencies: + playwright: 1.48.2 + dev: true + /@preact/preset-vite@2.9.0(@babel/core@7.25.2)(preact@10.22.1)(vite@5.4.2): resolution: {integrity: sha512-B9yVT7AkR6owrt84K3pLNyaKSvlioKdw65VqE/zMiR6HMovPekpsrwBNs5DJhBFEd5cvLMtCjHNHZ9P7Oblveg==} peerDependencies: @@ -4005,6 +4019,14 @@ packages: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} dev: true + /fsevents@2.3.2: + resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + requiresBuild: true + dev: true + optional: true + /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -4916,6 +4938,22 @@ packages: pathe: 1.1.1 dev: true + /playwright-core@1.48.2: + resolution: {integrity: sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==} + engines: {node: '>=18'} + hasBin: true + dev: true + + /playwright@1.48.2: + resolution: {integrity: sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==} + engines: {node: '>=18'} + hasBin: true + dependencies: + playwright-core: 1.48.2 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /postcss@8.4.41: resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==} engines: {node: ^10 || ^12 || >=14}