Feat: Add Playwright tests for components

.github/workflows/playwright.yml

@@ -0,0 +1,28 @@
+name: Playwright Tests
+on: [push, pull_request]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Install Playwright Browsers
+        run: bun x playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: bun tests:playwright test:pw
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -311,4 +311,7 @@ vite.config.mts.timestamp-*
 *.prompt.md
 
 # Solid Start
-.vinxi
+.vinxi
+
+# Storybook
+*storybook.log

package.json

@@ -5,6 +5,7 @@
   "workspaces": [
     "packages/*",
     "templates/**",
+    "tests/*",
     "scripts",
     "website"
   ],
@@ -18,6 +19,7 @@
     "format": "bun prettier --write .",
     "lint": "turbo run lint",
     "test": "turbo run test:ci --concurrency=1",
+    "tests:playwright": "bun run --cwd tests/playwright",
     "typecheck": "turbo run typecheck",
     "react": "bun run --cwd packages/react",
     "scripts": "bun run --cwd scripts",

packages/react/src/components/avatar/examples/basic.tsx

@@ -3,6 +3,6 @@ import { Avatar } from '@ark-ui/react/avatar'
 export const Basic = () => (
   <Avatar.Root>
     <Avatar.Fallback>PA</Avatar.Fallback>
-    <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
+    <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
   </Avatar.Root>
 )

packages/react/src/components/avatar/examples/events.tsx

@@ -7,7 +7,7 @@ export const Events = () => {
   return (
     <Avatar.Root onStatusChange={handleStatusChange}>
       <Avatar.Fallback>PA</Avatar.Fallback>
-      <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+      <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
     </Avatar.Root>
   )
 }

packages/react/src/components/avatar/examples/root-provider.tsx

@@ -11,7 +11,7 @@ export const RootProvider = () => {
 
       <Avatar.RootProvider value={avatar}>
         <Avatar.Fallback>PA</Avatar.Fallback>
-        <Avatar.Image src="https://avatars.githubusercontent.com/u/1846056?v=4" alt="avatar" />
+        <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
       </Avatar.RootProvider>
     </>
   )

packages/solid/src/components/avatar/examples/basic.tsx

@@ -3,6 +3,6 @@ import { Avatar } from '@ark-ui/solid/avatar'
 export const Basic = () => (
   <Avatar.Root>
     <Avatar.Fallback>PA</Avatar.Fallback>
-    <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
+    <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
   </Avatar.Root>
 )

packages/svelte/src/lib/components/avatar/examples/basic.svelte

@@ -4,5 +4,5 @@
 
 <Avatar.Root>
   <Avatar.Fallback>PA</Avatar.Fallback>
-  <Avatar.Image src="https://i.pravatar.cc/3000?u=a" alt="avatar" />
+  <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
 </Avatar.Root>

packages/vue/.storybook/main.ts

@@ -1 +1,24 @@
-import './main.css'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: { backgrounds: false, controls: false, actions: false },
+    },
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+}
+
+export default config

packages/vue/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/vue3'
+import './main.css'
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+}
+
+export default preview

packages/vue/package.json

@@ -72,7 +72,8 @@
     "test": "vitest",
     "test:ci": "vitest --run",
     "typecheck": "vue-tsc",
-    "storybook": "histoire dev",
+    "histoire": "histoire dev",
+    "storybook": "storybook dev -p 6009",
     "release-it": "release-it --config ../../release-it.json",
     "prepack": "clean-package",
     "postpack": "clean-package restore"
@@ -137,23 +138,35 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@chromatic-com/storybook": "^3.2.5",
     "@histoire/plugin-vue": "0.17.17",
     "@release-it/keep-a-changelog": "6.0.0",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/experimental-addon-test": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/vue3": "^8.6.4",
+    "@storybook/vue3-vite": "^8.6.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/user-event": "14.6.1",
     "@testing-library/vue": "8.0.3",
     "@types/jsdom": "21.1.7",
     "@vitejs/plugin-vue": "5.2.1",
     "@vitejs/plugin-vue-jsx": "4.1.1",
+    "@vitest/browser": "3.0.8",
+    "@vitest/coverage-v8": "3.0.8",
     "@vue/compiler-sfc": "3.5.13",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
     "histoire": "0.17.17",
     "jsdom": "26.0.0",
     "lucide-vue-next": "0.479.0",
+    "playwright": "1.51.0",
     "release-it": "18.1.2",
     "resize-observer-polyfill": "1.5.1",
+    "storybook": "^8.6.4",
     "typescript": "5.8.2",
     "vite": "6.2.0",
     "vite-plugin-dts": "4.5.3",

packages/vue/src/components/avatar/avatar.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/react'
+
+import BasicExample from './examples/basic.vue'
+import EventsExample from './examples/events.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Avatar',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Events = {
+  render: () => ({
+    components: { EventsExample },
+    template: '<EventsExample />',
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}

packages/vue/src/components/avatar/examples/basic.vue

@@ -5,6 +5,6 @@ import { Avatar } from '@ark-ui/vue/avatar'
 <template>
   <Avatar.Root>
     <Avatar.Fallback>PA</Avatar.Fallback>
-    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+    <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
   </Avatar.Root>
 </template>

packages/vue/src/components/avatar/examples/events.vue

@@ -5,6 +5,6 @@ import { Avatar } from '@ark-ui/vue/avatar'
 <template>
   <Avatar.Root @status-change="(e) => console.log(e.status)">
     <Avatar.Fallback>PA</Avatar.Fallback>
-    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+    <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
   </Avatar.Root>
 </template>

packages/vue/src/components/avatar/examples/root-provider.vue

@@ -5,10 +5,10 @@ const avatar = useAvatar()
 </script>
 
 <template>
-  <button @click="avatar.setSrc('https://new-source.com')">Change Source</button>
+  <button @click="avatar.setSrc('https://avatars.githubusercontent.com/u/6916170?v=4')">Change Source</button>
 
   <Avatar.RootProvider :value="avatar">
     <Avatar.Fallback>PA</Avatar.Fallback>
-    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
+    <Avatar.Image src="https://i.pravatar.cc/300?u=a042581f4e29026704d" alt="avatar" />
   </Avatar.RootProvider>
 </template>

tests/playwright/.gitignore

@@ -0,0 +1,7 @@
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

tests/playwright/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "playwright",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test:pw": "playwright test",
+    "test:pw:ui": "playwright test --ui",
+    "test:pw:update": "playwright test --trace on --update-snapshots",
+    "react:storybook": "bun run --cwd ../../packages/react storybook",
+    "vue:storybook": "bun run --cwd ../../packages/vue storybook",
+    "solid:storybook": "bun run --cwd ../../packages/solid storybook"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@axe-core/playwright": "4.10.1",
+    "@playwright/test": "^1.51.0",
+    "@types/node": "^22.13.10"
+  }
+}

tests/playwright/playwright.config.ts

@@ -0,0 +1,98 @@
+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: './tests/',
+
+  snapshotPathTemplate: '{testDir}/{testFileDir}/__screenshots__/{projectName}/{arg}{ext}',
+  /* 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: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.02,
+    },
+  },
+
+  /* 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' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+  webServer: [
+    {
+      command: 'bun react:storybook',
+      url: 'http://localhost:6006',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command: 'bun vue:storybook',
+      url: 'http://localhost:6009',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+    },
+  ],
+})