storybook-stories

To co-locate Storybook stories with components using CSF 3, create a *.stories.tsx file alongside your component and export a Meta object with typed args and argTypes, plus at least one StoryObj export to enable deterministic UI testing.

Playwright component tests fail to find stable story IDs when stories are not co-located with components. Enforcing a Storybook-first workflow with co-located *.stories.tsx files and CSF 3 exports ensures predictable story ID contracts for tests.

The Storybook-first workflow for component testing requires authoring co-located stories using the CSF 3 Meta and StoryObj pattern. This enforces a predictable story ID contract that Playwright tests can mount deterministically via precise story URLs.

Yes, Playwright works with co-located CSF 3 stories by mounting the precise story URL exported from the component's *.stories.tsx file. This setup validates UI behavior deterministically by targeting stable story IDs generated through co-location.

To structure a *.stories.tsx file for predictable story discovery, export a CSF 3 Meta object defining the component configuration with typed args and argTypes. Include at least one StoryObj export to establish the stable story ID contract required for Playwright tests.

Using Storybook stories without co-location breaks the predictable story ID contract needed for Playwright tests. Co-locating *.stories.tsx files with components ensures consistent discovery across the codebase and validates UI behavior through stable story URLs.