wip

.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

.gitignore

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

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();
+  });
+});

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,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,
+  },
+});