Kicking Ass With Playwright
By the end of this workshop, you'll be able to:
- Write stories in Component Story Format
- Test components with Storybook interaction tests
- Use Storybook in development workflows
Writing stories in Component Story Format (CSF)
Storybook Cascade
.storybook/preview.js
src/some-component.stories.tsx - Meta
src/some-component.stories.tsx - Story
Every story
Groups of stories
One story
Component Story Format
import { Meta, StoryObj } from "@storybook/react"
import { MyComponent } from "./MyComponent"
// Create Meta
const meta: Meta<typeof MyComponent> = {
title: 'Path/To/MyComponent',
component: MyComponent,
};
export default meta;
// Create a story type
type Story = StoryObj<typeof MyComponent>;
// Write stories
export const SomeName: Story = {
name: "Some Name",
args: {
someProp: "Some value",
},
};
1. Create Meta
2. Create Story type
3. Write stories
// Don't import Story
import { Meta, Story } from "@storybook/react"
import { MyComponent } from "./MyComponent"
// `as` loses the type check
export default {
title: 'Path/To/MyComponent',
component: MyComponent,
} as Meta;
// Use types and render methods instead of templates
const Template: Story<MyComponentProps> = (...args) => (
<MyComponent {...args} />
)
// No need to bind anymore
const SomeName = Template.bind({})
SomeName.name = "Some Name"
SomeName.args = {
someProp: "Some value",
}
// Story exports should go inline
export { Default }
import { Meta, StoryObj } from "@storybook/react"
import { MyComponent } from "./MyComponent"
// Create Meta
const meta: Meta<typeof MyComponent> = {
title: 'Path/To/MyComponent',
component: MyComponent,
};
export default meta;
// Create a story type
type Story = StoryObj<typeof MyComponent>;
// Write stories
export const SomeName: Story = {
name: "Some Name",
args: {
someProp: "Some value",
},
};
Old Way
New Way
Before and After
Title Hierarchy
const meta: Meta<typeof MyComponent> = {
title: 'Components/ContactCardCheckout/States',
component: MyComponent,
};
![](https://s3.amazonaws.com/media-p.slid.es/uploads/167545/images/11469874/pasted-from-clipboard.png)
- States
- Actions
- Other
- Components
- Organisms
- Pages
Component Name
Sharing Attributes
export const Default: Story = {
args: {
heading: "Some Heading",
},
}
export const Valid: Story = {
args: {
...Default.args,
isValid: true,
},
}
export const Invalid: Story = {
args: {
...Default.args,
isValid: false,
},
}
Just spread!
Template
`render()`
export const SomeName: Story = {
name: "Some Name",
render: (args) => {
const [someState, setSomeState] = useState("")
return (
<MyComponent
{...args}
someState={someState}
setSomeState={setSomeState}
/>
)
},
args: {
someProp: "Some value",
},
};
Any JavaScripty stuff has to happen here!
Testing components in Storybook
Interaction Tests
- Go in `.play()` functions in stories
- Uses Jest (Vitest) and RTL helpers/assertions
- Run in your browser locally, run in Playwright in CI
- Basic rendering tests are free
States vs. Interactions
- One per interesting state
- Static
- Different props combinations
- Starting point for tests & experiments
- Play functions usually not needed
- One per interesting failure
- Reuse states
- Things that change over time
- Assert at boundary
Testing Syntax
export const SomeInteraction = {
...SomeState
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
await click(canvas.getByRole("button", { name: /Add/i }));
expect(args.someCallback).toHaveBeenCalledWith("Hello, world!")
},
}
Arrange
Assert
Act
- `canvas` is your screen
- Don't always need an `expect`
Test Helpers
// Use these instead of the Jest/RTL/User-Event versions
import { expect, within, fn, userEvent, waitFor } from "@storybook/test";
// These are interaction helpers, use these instead of DOM events
const { hover, click, dblClick, type, keyboard } = userEvent;
Steps
import { clickAdd } from "../steps";
export const SomeStory = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
// Inline
await step("Click add", () => {
await click(await canvas.findByRole("button", { name: /Add/i }));
});
// Reuse a step
await step("Click add", clickAdd(canvas));
},
}
Steps are a way to make interaction tests more semantic and composeable
Fixtures
const fixtures: Record<string, Contact> = {
primaryHomeOwner: {
contactId: "1",
customerFirstName: "Primary",
customerLastName: "Homeowner",
customerPrimaryPhone: "(123) 456-7890",
customerEmail: "primary.homeowner@email.com",
primary: true,
roles: ["Homeowner"],
derivedRoles: ["Homeowner"],
},
// Others
};
export const createFixture = (key: keyof typeof fixtures) =>
structuredClone(fixtures[key]);
Fixtures make data more semantic and reusable
Using Storybook
Addons Panel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/167545/images/11469911/pasted-from-clipboard.png)
- Test Runner
- a11y Checks
- Controls
Typical Storybook Workflow
- Build the non-interactive UI
- Stories for each interesting state
- Build the interactive elements
- Test is: What would you do to verify?
- Refactor code and tests
- States, steps, fixtures
playwright-testing
By Kyle Coberly
playwright-testing
- 45