If you see slight diffs on SVG images when running Screener Runner or Screener Storybook tests, this is because many SVG charting libs are non-deterministic.
In your screener.config.js file, you can resolve this by setting compareSVGDOM
to true under diffOptions. What this basically means is that the comparison is done on the SVG code itself. If the code has not changed, then we don't do an additional image diff on it, as it's expected to be the same. What it tries to resolve is that the code may not have changed, but the browser renders it differently.
If that doesn't work, you can increase minShiftGraphic
in your screener.config.js file to a higher number, like 5
. minShiftGraphic sets a threshold for pixels shifting in a graphic before it is flagged as a visual difference. Be careful with this option, as this setting will apply to other image types besides SVGs (JPEG, PNG etc.) and could be forgiving in situations where that is not intended.
More info on compareSVGDOM and minShiftGraphic here:
https://github.com/screener-io/screener-runner
https://github.com/screener-io/screener-storybook
Example of slight SVG diffs: