Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Making storybook addons integration #912

Merged
merged 4 commits into from
Mar 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,26 @@
[![Version](https://img.shields.io/npm/v/@percy/storybook.svg)](https://npmjs.org/package/@percy/storybook)
![Test](https://github.com/percy/percy-storybook/workflows/Test/badge.svg)

[Percy](https://percy.io) visual testing for [Storybook](https://storybook.js.org).
## Visual Testing with Percy

[Percy](https://percy.io) is an all-in-one visual testing and review platform. It captures screenshots, compares them against the baseline, and highlights visual changes. With increased visual coverage, teams can deploy code changes with confidence with every commit.

[Storybook](https://storybook.js.org) supports cross-browser visual testing natively using Percy. You can use Percy for visual testing of web applications on desktop and mobile browsers.

The benefits of utilizing Percy for visual testing include the following:

- Consistency: Promotes consistent user experience by identifying visual discrepancies early in the development process.
- Efficiency: Improves efficiency by reducing the time and effort required to manually spot visual regressions.
- Integrations: Percy integrates with popular tools and services like GitHub, GitLab, Bitbucket, and more.
- Collaboration: Improves collaboration between developers, designers, and QA teams by providing a visual representation of changes.
Prevent regression: Prevents you from experiencing unintended visual regressions.

## How does Percy work?

Percy compares new snapshots against relevant baselines to detect visual changes. Percy manages baseline selection across branches so your tests are always relevant. If visual changes are detected, Percy highlights and groups the resulting diffs for you to review.

## Run your first build with percy
[Percy’s sample build tutorial for Storybook.](https://www.browserstack.com/docs/percy/sample-build/storybook)

## Installation

Expand Down
13 changes: 13 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
{
"name": "@percy/storybook",
"description": "Storybook addons for visual testing with Percy",
"keywords": [
"storybook-addons",
"visual",
"visual-testing",
"layout-testing",
"percy",
"image-testing"
],
"version": "5.0.1",
"license": "MIT",
"repository": {
Expand Down Expand Up @@ -33,6 +42,10 @@
"test:env": "cross-env NODE_ENV=test NODE_OPTIONS='--loader=./test/loader.js'",
"test:coverage": "nyc yarn test"
},
"storybook": {
"displayName": "Percy",
"icon": "https://avatars.githubusercontent.com/u/12260884"
},
"@percy/cli": {
"commands": [
"./dist/storybook.js"
Expand Down
Loading