first set of e2e tests (#487)

.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: pnpm exec 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

.gitignore

@@ -3,3 +3,7 @@ node_modules/
 .DS_STORE
 packages/*/bin/
 *.log
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/basic.e2e.ts

@@ -0,0 +1,36 @@
+import {test, expect} from '@playwright/test';
+
+[
+  ['iframe', 'vanilla'],
+  ['iframe', 'preact'],
+  ['iframe', 'svelte'],
+  ['iframe', 'vue'],
+  ['iframe', 'htm'],
+  // ['iframe', 'react'],
+  // ['worker', 'vanilla'],
+  // ['worker', 'preact'],
+  // ['worker', 'svelte'],
+  // ['worker', 'vue'],
+  // ['worker', 'htm'],
+  // ['worker', 'react'],
+].forEach(([sandbox, example]) => {
+  test(`basic modal interaction with ${sandbox} sandbox and ${example} example`, async ({
+    page,
+  }) => {
+    await page.goto(`/?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: 2')).toBeVisible();
+
+    page.once('dialog', (dialog) => {
+      expect(dialog.message()).toBe('You clicked 2 times!');
+      dialog.dismiss().catch(() => {});
+    });
+
+    await page.getByRole('button', {name: 'Close'}).click();
+    await page.waitForEvent('dialog');
+  });
+});

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",

playwright.config.ts

@@ -0,0 +1,40 @@
+import {defineConfig, devices} from '@playwright/test';
+
+// See https://playwright.dev/docs/test-configuration.
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: '*.e2e.ts',
+  // 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://localhost:8080',
+
+    // 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,
+  },
+});