Feat: Add Playwright tests for components

[carwack]

This PR sets up Playwright for end-to-end (E2E) and visual testing, ensuring improved test coverage for the components. Thanks to GitHub Actions, tests are automatically triggered on commit push. The tests focus on simulating real user interactions and include Axe Core accessibility checks to guarantee a11y compliance.

The current setup supports both React and Vue components through Storybook integration. Svelte and Solid are not yet supported due to incomplete Storybook setups.

The tests are organized under a dedicated tests folder, following the monorepo structure by mirroring the existing package layout (e.g., packages/components). Each component has a single test file that covers all supported frameworks.

To run the tests, use:

bun tests:playwright test:pw

or

bun tests:playwright test:pw:ui

This PR specifically adds tests for the Avatar component in Vue and React. Let me know if you need any adjustments!

[vercel[bot]]

@carwack is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

[pkg-pr-new[bot]]

Open in Stackblitz

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/react@3382

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/solid@3382

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/svelte@3382

npm i https://pkg.pr.new/chakra-ui/ark/@ark-ui/vue@3382

commit: 5c8ab56

[cschroeter]

@carwack

Thanks for working on this! Looking at the PR, my main concern is that we'd be using both Histoire and Storybook for the Vue project, which feels like overkill. In my mind, we should first migrate from Histoire to Storybook. What do you think?

[carwack]

@cschroeter Yes, both is overkill. I was thinking to migrate out Histoire component by component when having the tests ready. But switching completely first could be cleaner, since writing all the Playwright we/visual tests could take some time. So I will focus on migrating to Storybook first. Should I branch of this branch? Since the setup is already here.

[cschroeter]

@carwack

I don’t have a strong opinion on structuring this workflow. However, replacing Histoire with Storybook would be a huge improvement—it would streamline our setup significantly. After that, we’d likely want a separate PR to set up Playwright, then gradually add more Playwright tests over time.

[segunadebayo]

After considering this carefully, we don't appear to have sufficient manpower to manage both the Vitest and Playwright tests. I'd rather we keep it to one or the other.

Due to the limited resources, we should focus on improving the existing tests to match those of React or Solid. We can consider moving from Histoire to Storybook if it brings any practical advantage.

I appreciate your understanding and work so far, Sybren.