Questions tagged [chromatic]

For questions about the visual testing service Chromatic.

Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.

21 questions
4
votes
1 answer

Chromatic CLI not building storybook

I am not able to get chromatic cli v5.4.0 to build my storybook. It worked the first time and then hangs on subsequent attempts. ➜ my-project git:(storybook-poc) ✗ yarn chromatic yarn run v1.22.10 $ npx chromatic --project-token…
Opentuned
  • 1,477
  • 17
  • 21
3
votes
0 answers

How to stop Chromatic diff "noise" with Highcharts

When viewing Chromatic as part of our merge requests finding actual meaningful diffs is like finding a needle in a haystack. Highcharts has their weird variation where the position of parts (e.g. lines) seems to vary ever so slightly. We've tried…
Shefeto
  • 178
  • 1
  • 10
3
votes
1 answer

How to freeze time writing a story with Storybook?

I have written a story with Storybook UI and deploying it with Chromatic. The issue is that my component takes into account the time now (I am using luxon, so I am using DateTime.now(), and it takes the diff with another date passed by props to show…
davidaap
  • 1,569
  • 1
  • 18
  • 43
2
votes
2 answers

Storybook Angular NX workspace: How to publish using Chromatic?

Hi Does anyone know how to Run Storybook Chromatic in an NX workspace ? My Angular app and libs are working fine when Serving locally, I have run Stories for my projects fine. I have even built and published the stories locally. What I want is to…
cuznerdexter
  • 586
  • 5
  • 21
1
vote
1 answer

How to disabled lazy loading for only storybook (or if possible only for Chromatic)

In my React application I am using storybook and for this I have integrated chromatic where all my images are published and stored. But for specific stories my images are missing when build pushed to Chromatic (see screenshot below for missing…
syed1234
  • 761
  • 5
  • 12
  • 30
1
vote
0 answers

Unable to push my storybooks into chromatic

I have integrated chromatic into my repository and purpose is to push my storybooks into chromatic. I have two folder in my repo: 1- backend 2- frontend and I have all storybooks in my frontend folder and my .github/workflows/chromatic.yml file…
syed1234
  • 761
  • 5
  • 12
  • 30
1
vote
3 answers

Custom "details" link in the github pr checks

I saw that Chromatic action is able to change the "details" link in PR check and post an additional comment. Can someone help me to set it up in my own workflow? check the image for example
1
vote
0 answers

Chromatic number - Groetzsch graph

Okay so I'm working on a school task, writing a program that calculates the chromatic number of a graph from a text file that contains the number of vertices and the graph's adjacency matrix, like so: 8 0 1 0 1 1 0 0 1 1 0 1 0 0 0 0 0 0 1 0 1 0 0 0…
Ziz
  • 11
  • 1
0
votes
2 answers

Is there a way to access values from the Actions tab in Storybook?

I'm using Chromatic to run interaction tests. When I click the button for "Mexican" cuisine, it appends to the url params. Storybook reflects this in the "Actions" tab (shown below). How can I access those Actions so that I can run an assertion…
jmargolisvt
  • 5,722
  • 4
  • 29
  • 46
0
votes
0 answers

Can't read a environment variable defined in `.env.local` in npm scripts on Next.js ver 13

I have installed chromatic to my project and I wanted to add a command to npm scripts for it with following setting in package.json. "scripts": { ... "chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN", }, Since the…
pop
  • 69
  • 1
  • 1
  • 8
0
votes
0 answers

Yarn 3 Workspace resolutions

I'm building a component library in React using Yarn v3 Workspaces to manage my mono-repo. One of the workspaces within the mono-repo is for a Storybook application and I need to pin the version of one of its transitive dependencies due to a…
0
votes
1 answer

Is there an alternative to Chromatic when widgets using Storybook+Highcharts?

I created a column chart in React using Highcharts library, and make a story in Storybook for this widget. In the PR we use Chromatic, so to reduce the noise i did animation:false, and it worked for 2/3 stories. I don't want to use delay in…
Baruch Levin
  • 330
  • 3
  • 19
0
votes
0 answers

Images are missing in chromatic build

I have configured chromatic for my stories: When I pushed my chromatic build it always shows images are missing(but actually on baseline images are there but in chromatic build it shows images are missing): please check screenshot below: Below is…
syed1234
  • 761
  • 5
  • 12
  • 30
0
votes
0 answers

does storybook intercept the browser's refresh function

I've noticed that when serving the storybook locally, sometimes refreshing (both soft/hard) does not alter the page at all, or even the refresh button on chrome—which transitions to an x while in the reloading stage. It's useful to refresh when…
saylestyler
  • 389
  • 1
  • 4
  • 20
0
votes
2 answers

Make chromatic snapshot docs tab in storybook

What i'm looking to achieve I am looking at options for reducing the number of stories we snapshot and test in Chromatic (currently nearing 400). We use storybook for our design system and also for visual testing with Chromatic. Currently our…
PaulParton
  • 1,013
  • 1
  • 11
  • 19
1
2