feat: setup e2e test

.gitignore

@@ -44,3 +44,10 @@ next-env.d.ts
 dist
 
 coverage
+
+# playwright
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
+tests-examples/

apps/playground/e2e/open-close.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from "@playwright/test"
+
+test("has floating devtools button", async ({ page }) => {
+  await page.goto("/")
+
+  const floatingButton = page.getByRole("button", { name: "Open MSW Devtools" })
+
+  await expect(floatingButton).toBeVisible()
+})
+
+test("devtools opened by default", async ({ page }) => {
+  await page.goto("/")
+
+  const panel = page.getByRole("region", { name: "MSW Devtools" })
+
+  await expect(panel).toBeVisible()
+})
+
+test("devtools closes on close button click", async ({ page }) => {
+  await page.goto("/")
+
+  const closeButton = page.getByRole("button", { name: "Close MSW Devtools" })
+
+  await closeButton.click()
+
+  const panel = page.getByRole("region", { name: "MSW Devtools" })
+
+  await expect(panel).not.toBeInViewport()
+})
+
+test("devtools re opens on floating button click", async ({ page }) => {
+  await page.goto("/")
+
+  const closeButton = page.getByRole("button", { name: "Close MSW Devtools" })
+
+  await closeButton.click()
+
+  const floatingButton = page.getByRole("button", { name: "Open MSW Devtools" })
+
+  await floatingButton.click()
+
+  const panel = page.getByRole("region", { name: "MSW Devtools" })
+
+  await expect(panel).toBeInViewport()
+})

apps/playground/package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@eslint/compat": "^1.2.1",
     "@eslint/js": "^9.13.0",
+    "@playwright/test": "^1.48.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

apps/playground/playwright.config.ts

@@ -0,0 +1,58 @@
+import { defineConfig, devices } from "@playwright/test"
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:5173",
+    trace: "on-first-retry"
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] }
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] }
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] }
+    }
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  webServer: {
+    command: "pnpm --filter playground dev --port 5173",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env.CI
+  }
+})

apps/playground/tsconfig.node.json

@@ -18,5 +18,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "playwright.config.ts"]
 }

package.json

@@ -24,7 +24,8 @@
     "ci:check": "pnpm lint && pnpm type-check && pnpm coverage",
     "sync-readme": "cp ./README.md packages/msw-devtools/README.md && mkdir -p packages/msw-devtools/README/EN && cp -r ./README/EN packages/msw-devtools/README",
     "playground": "pnpm --filter playground dev",
-    "playground:vue": "pnpm --filter playground-vue dev"
+    "playground:vue": "pnpm --filter playground-vue dev",
+    "e2e:ui": "CI=false pnpm --filter playground exec playwright test --ui"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.9",