Ask the Community
Integrate your Storybook tests with Percy
A guide to integrating your Storybook automated tests with BrowserStack Percy. Catch visual differences in your web application on time.
This documentation applies to Percy Storybook SDK version 4.0.0 and above.
Prerequisites
Before you start, ensure you install the Node version needed for the Percy SDK with the appropriate Storybook version. Refer to the following table:
| Storybook Version | Node Version |
|---|---|
| v6 | Node 14 and later |
| v7 | Node 16 and later |
| v8 | Node 18 and later |
| v9 | Node 20 and later |
Create a Percy project
Sign in to Percy. In Percy, create a project of the type, Web, and then name the project. After the project is created, Percy generates a token. Make a note of it. You have to use it set your environment variable in the next step.
For details on creating a project, see Create a Percy project.
Set the project token as an environment variable
Run the given command to set PERCY_TOKEN as an environment variable:
To learn about environment variables in Percy, see Percy environment variables.
Install Percy dependencies
Install the dependencies by running the following command:
Update your test script
Import the Percy library to use the method and attributes required to take screenshots.
The arguments in the examples, such as colorScheme and textDirection, are illustrative. Use the argument names and values defined in your codebase. For example, if you’ve used theme, you can specify theme: 'dark' instead of colorScheme.
To learn more, visit Percy snapshot.
Run Percy
Run your tests with Percy.
If you are unable to use the percy:exec command or prefer to run your tests using IDE run options, you can use the percy exec:start and percy exec:stop commands. To learn more, visit Run Percy.
With a static Storybook build:
With a local or live Storybook URL:
Automatically run start-storybook:
With the sample test script, Percy takes four snapshots with args, globals, and any other query params appended to the URL of each snapshot:
Congratulations! You have successfully created your first build on Percy. To see the build with snapshots of your application, visit your project in Percy.
When you run another build with visual changes to your application, Percy takes new snapshots. You can then see the comparisons between the two runs on the new build.
Related topic
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!