Comments (11)
There is a probably a straightforward way to integrate BackstopJS (similar to PhantomCSS but with a workflow & UI tuned for diff-ing many states and viewport sizes). If there is some interest I could look into it.
from storybook.
I am currently using https://github.com/Galooshi/happo for visual diffing React components
from storybook.
@wyattdanger Thanks. I saw you guys use it at AirBnb.
from storybook.
@wyattdanger have you managed to reuse react storybook stories with happo ?
from storybook.
Correct me if I am wrong but it looks like all the solutions linked so far use PhantomJs and therefore are suited for the CI integration. I am looking at slightly different use case - I would like to have an add-on that will add a panel with image diff for current story variant. I am looking at Resemble.js for that. Any advice / pointers / prior art / encouragements are welcome.
from storybook.
BackstopJS is a wrapper around resemble. It manages all the necessary resources for capturing screen shots, reporting and then displaying the diffs. You can call it like a node module as well. I am too busy to do the integration work but I'd happily guide you through it.
from storybook.
Storybook will not build visual regression testing, because there are tools that do it that integrate very nicely into Storybook.
See:
https://percy.io/docs/clients/javascript/react-storybook
https://screener.io/
from storybook.
These are both paid services for web as far as I understand them. I'm working on a solution that works locally for both web, ios and android.
from storybook.
Be sure to let us know about if when it's demo-able we can feature it on our documentation 👍
from storybook.
@oblador Give me a heads up if you need any testers/help with coding!
I looked at the suggestions @ndelangen but Percy seems very pricey, and screener will probably cost about the same.
from storybook.
@heinzmuller sure, DM me on twitter (@trastknast).
from storybook.
Related Issues (20)
- [Bug]: TransformComponentType not importable from angular project
- [Bug]: Single Story Hoisting with Angular .component prefixes doesn't work
- [Bug]: dependency `tempy:3.1.0 => [email protected]` breaks builds on vite. No top level await HOT 3
- [Bug]: Custom MDX components doesn't work with JSDoc autodocs HOT 1
- Tags: Project-level tags failure crashes Storybook
- [Bug]: vue-component-meta docgen HMR not working HOT 1
- Addon-backgrounds: Migrate to story globals
- Addon-viewport: Migrate to story globals
- Addon-themes: Migrate to story globals
- [Bug]: Cannot read properties of null (reading 'useContext') HOT 2
- [Bug]: RSC stories that use "react-server" exports do not get bundled correctly HOT 5
- [Bug]: [Angular] argsToTemplate not showing correct value on "Show code" with input signals
- [@storybook/test] Move `@testing-library/dom` to a peerDependency HOT 8
- [Bug]: All `fn()` stubs get logged in the `Actions` panel, not just the component's args HOT 5
- [Bug]: subcomponents get type error HOT 1
- [Bug]: Backgrounds no longer working with Angular and MDX HOT 1
- [Bug]: Cleanup logs during storybook init HOT 6
- [Bug]: Angular 18 Library: Missing documentations generated by compodoc within a Angular Library project setup HOT 1
- [Bug]: Component does not lose focus under specific circumstances (vuetify)
- [Bug]: Storybook builds twice on launch HOT 13
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook.