Components

👍

Covered in this doc

  • Why visual testing for components?
  • How to get started with Percy for components
  • Supported component library SDKs

As more teams use isolated components to build their UIs, it's becoming more valuable to utilize visual testing to maintain components and component libraries.

With Percy you can test at both the component level and the page level. Our Storybook integration supports visual testing for React, Angular, Ember, and Vue.js components, ensuring that every change to your component library results in an intended visual change.

Note: If you're not ready to integrate Percy into your component libraries, we recommend checking out our 2-minute example app tutorials.

How it works


At a high level integrating Percy into your component library is done in three steps.

Step 1: Add @percy/storybook to your package.
Step 2: Add a snapshot script tag
Step 3: Run npm run snapshot as part of your workflow

Please see our @percy/storybook SDK documentation for details.

Other Component Libraries


We're interested in adding support for other component libraries. Please let us know what you're using by reaching out to support.

We also have support for web application frameworks, end-to-end testing frameworks, static sites, and the ability to build your own SDK.

If you're still not sure where to start, feel free to reach out to support.


What's next

Percy is designed to integrate with your tests and CI environment, but you can also run Percy locally and may find it helpful to do so while you’re first getting started.