Not that I'll use Chromatic, but this was a cool overview of it. At least it gave me some idea how the visual reg. tests would contribute to our development process.
What’s the difference between Chromatic’s UI review and UI test? IMO they’re basically the same except UI test can have weird baseline from non merged code, which is confusing and makes it kind of pointless
Really late on this reply, but I had the same question. The main difference is that one is for a pull request, and any additional builds that happen keep that same link so that others in the group can have a conversation around the feature. The UI Tests are for each individual changeset, which often end up being the same on simple PRs. I definitely think there is big room for improvement there.
Ugh this is such a basic question but: how do I store the chromatic token in an env variable and access it in package.json? All I can find is how to SET env variables in package.json - help :(
I forgot how long I got stuck on this already. I thought the same thing, it should be very straightforward. What ended up being the best solution for me was to make my package.json script just run "chromatic". Then in my Github Actions or Bitbucket Pipelines config I call that command and pass it the ENV token like so: "yarn chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --exit-once-uploaded"
Thank you. You can set the viewport for stories and Chromatic will take a screenshot of that. I can't recall which repo I had that example in, but if I come across it soon I'll reply with it.
Thank you for the video, really helpful. But I got stuck at one point, can you help please. I have added the Chromatic project token in Secrets, Added .yml file in workflow and updated my package.json as scripts : "chromatic": "npx chromatic " and devdependencies: "chromatic": "^5.8.3" But still while I get error in github while setting up for CI: Run chromaui/action@v1 with: token: *** projectToken: *** Chromatic CLI v5.8.3 www.chromatic.com/docs/cli ✖ Build script not found The CLI didn't find a script called "build-storybook" in your package.json. Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.
thank you for this! You are probably the only one providing Chromatic tutorial at the moment :)
I felt like I wasn't seeing enough about this tool. Kinda crazy there isn't more exposure.
try imagium.io for Visual testing if you need to make free accurate comparisons Powered by AI
Thank you very much! Exciting technology from Storybook team! Great tutorial too
WOW it was super helpful. Need more videos on Storybook and Chromatic!!
I'll be putting out some more Storybook content in the near future. Thanks for the feedback!
@@SwashbucklingwithCode that's great! Thank you.
Thank you very much for leaving the mistakes in. Excellent tutorial!
Thank *you* for the feedback. Much appreciated.
Great video, thanks for the walkthrough!
Really well explained, subbed 👌
Thank you.
Not that I'll use Chromatic, but this was a cool overview of it. At least it gave me some idea how the visual reg. tests would contribute to our development process.
Why is that so? Asking cuz I am researching on this particular topic
Greate demonstration....but where is the repository?
What’s the difference between Chromatic’s UI review and UI test? IMO they’re basically the same except UI test can have weird baseline from non merged code, which is confusing and makes it kind of pointless
Really late on this reply, but I had the same question. The main difference is that one is for a pull request, and any additional builds that happen keep that same link so that others in the group can have a conversation around the feature. The UI Tests are for each individual changeset, which often end up being the same on simple PRs. I definitely think there is big room for improvement there.
thank you, your tutorial is very clear
Ugh this is such a basic question but: how do I store the chromatic token in an env variable and access it in package.json? All I can find is how to SET env variables in package.json - help :(
I forgot how long I got stuck on this already. I thought the same thing, it should be very straightforward. What ended up being the best solution for me was to make my package.json script just run "chromatic". Then in my Github Actions or Bitbucket Pipelines config I call that command and pass it the ENV token like so:
"yarn chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --exit-once-uploaded"
Amazing video thank you !
did u add a permalink? i couldn't :(
Thanks TJ Miller
Thanks so much for this, great tutorial! Do you know if it's possible to run viewport tests with Chromatic?
Thank you. You can set the viewport for stories and Chromatic will take a screenshot of that.
I can't recall which repo I had that example in, but if I come across it soon I'll reply with it.
This is some example code:
export default {
title: 'Example/InputGroup',
component: InputGroup,
parameters: {
chromatic: { viewports: [360, 1200] },
}
}
@@SwashbucklingwithCode Really appreciate your quick help, thanks!
This seems very spish :)
Thank you for the video, really helpful. But I got stuck at one point, can you help please.
I have added the Chromatic project token in Secrets, Added .yml file in workflow and
updated my package.json as scripts : "chromatic": "npx chromatic " and devdependencies: "chromatic": "^5.8.3"
But still while I get error in github while setting up for CI:
Run chromaui/action@v1
with:
token: ***
projectToken: ***
Chromatic CLI v5.8.3
www.chromatic.com/docs/cli
✖ Build script not found
The CLI didn't find a script called "build-storybook" in your package.json.
Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.