https://github.com/tmkx/storybook-playwright-ct

Storybook <3 Playwright
https://github.com/tmkx/storybook-playwright-ct

automation e2e playwright storybook test

Last synced: 3 months ago
JSON representation

Storybook <3 Playwright

• Host: GitHub
• URL: https://github.com/tmkx/storybook-playwright-ct
• Owner: tmkx
• License: mit
• Created: 2024-06-29T04:24:06.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-17T08:25:29.000Z (6 months ago)
• Last Synced: 2024-09-18T07:37:20.607Z (4 months ago)
• Topics: automation, e2e, playwright, storybook, test
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/storybook-playwright-ct
• Size: 146 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Get Started

> [!IMPORTANT]  

> Requirements:

> **`storybook`** v8

```ts

// playwright-ct.config.ts

import { defineConfig } from 'storybook-playwright-ct';

export default defineConfig({

  testMatch: '**/*.stories.spec.{ts,tsx}',

  webServer: {

    command: 'npm run storybook',

    url: 'http://localhost:6006/',

    reuseExistingServer: true,

  },

});

```

```ts

// stories/Button.stories.spec.tsx

import { composeStories } from '@storybook/react';

import { expect, test } from 'storybook-playwright-ct';

import * as stories from './Button.stories';

const { Primary } = composeStories(stories);

test('Screenshot', async ({ mount }) => {

  const component = await mount();

  await expect(component).toHaveScreenshot();

});

test('Event callback', async ({ mount }) => {

  let eventType;

  const component = await mount( (eventType = ev.type)} />);

  await component.click();

  await expect(eventType).toBe('click');

});

```

```json

{

  "scripts": {

    "test:ct": "playwright test --config playwright-ct.config.ts"

  }

}

```

## Credits

- Playwright CT: https://playwright.dev/docs/test-components

- Prior art: https://github.com/storybookjs/playwright-ct