chromatic-play.md

Play functions in Chromatic

We just announced Component Story Format 3.0 that brings play functions to Storybook. Play functions are scripted interactions that execute after the story has rendered, allowing you test hard-to-reach states in your UI like form validations and hover states.

Here's a quick example of filling out a form. For more see the announcement:

import { userEvent } from '@storybook/testing-library';

export default { component: AccountForm }

export const Filled = {
  play: async () => {
    await userEvent.type(screen.getById('user'), 'shilman@example.com');
    await userEvent.type(screen.getById('password'), 'blahblahblah');
  }
}

Does it work with Chromatic?

One of the first questions we got was "does this work with chromatic?" Amazingly, it does! It's not officially supported, but it works and you can use it today. Over the coming months we'll be adding official support and documentation, and also adding more features.

How does it work?

Chromatic will wait for your play function to complete before taking a snapshot. So if you're simulating a hard-to-reach state, it will wait for that to finish.

What do I need to look out for?

There are a few gotchas we've encountered so far:

1. Play functions are async. If you call other async functions inside the play function, be sure to await them all, otherwise Chromatic's screenshot may be inconsistent.
2. Some interactions take time to show up visually. You may need to add delay to your stories with play functions. We might be able to improve this in future iterations.
3. Chromatic snapshotting times out after 15s total, so don't overdo it!

Where do I give feedback?

If play functions are working fine on your development machine, but you are seeing strange behavior in Chromatic, please get in touch via our Intercom chat on https://chromatic.com!

Hey @shilman, regarding Chromatic will wait for your play function to complete before taking a snapshot. So if you're simulating a hard-to-reach state, it will wait for that to finish.:
I experience different behaviour with a flaky storybook that is being rendered in the middle of play animation.
Every async operation inside play is using await, so it looks like an issue to me.
Can you help with it?
Thanks!