reg-viz / storycap

A Storybook Addon, Save the screenshot image of your stories :camera: via puppeteer.
https://www.npmjs.com/package/storycap
MIT License
701 stars 89 forks source link

Unreliable results with more than 1 for `--parallel` #834

Open Peter-Sparksuite opened 8 months ago

Peter-Sparksuite commented 8 months ago

I have a Docker image that's using FROM browserless/chrome:1.61.0-puppeteer-21.4.1, so I expect storycap is using Puppeteer to control Chromium, and I'm finding that when I run storycap with -p or --parallel having a value other than 1, that some of the results are unreliable.

In this particular case, I'm finding that the inside bend of a curved box (via CSS radius) has antialiasing that appears to vary from instance to instance of capturing the screenshot.

Here is a screenshot of a tool that compares two images and highlights the area of difference in red.

image compare tool output

The two screenshots were generated by simply by running the storycap again. No code changes, only the time it took to preserve the captured screenshots.

The actual differences are very slight, but of course, the compare tool sees these differences and raises an alarm.

So the question is: why would this seemingly randomly change??? somehow there appears to be some kind of 'leakage' of detail or, perhaps some kind of randomness that ends up being different when using parallel > 1 that's not happening when parallel = 1.

The rub is that we'd really like to use parallel > 1 to reduce the time it takes to capture the screenshots. What's the solution?

I've tried quite a few variations of Chromium configuration options (thinking that was where the issue is originating from), but nothing I've tried so far fixes this issue.

Thank you in advance!