Cypress test with cypress-image-diff-js is failing in github actions

Question

I am using cypress-image-diff-js plugin to run visual tests on some of the test within the suite. It runs perfectly fine in local machine (Which is a macbook pro) and fails on Github Actions that uses ubuntu-latest.

I tried the following to fix this issue but failed to do so:

1. added viewport per test case
2. Added viewport in cypress.config.js file
3. Added viewport in github actions yml file
4. Changed viewport size - got new baseline for this too (From 1000x660 to 1001x661)
5. Added more timeout so that page is rendered properly (there might have been delays in page load in CI)

Have anyone been able to use this plugin and get passed test in Github Actions?

Answer 1

That limitation is documented:

Be aware that despite forcing a screenshot resolution to a particular height and width for a test, if this test is run on different infrastructure (i.e a 13" Mac vs PC attached to a 30" monitor), the results will be different. So it's extremely important that you standardize where the tests will run, both locally and CI. One way to handle this, is by running it with docker container or against BrowserStack or alike.