Visual tests mean that a series of pages are visited in the site, and the test passes if the page matches visually to a visual snapshot. This can detect css deviations and other visual errors. (It can also yield false positives, which has to be taken into consideration).
Visual tests are run by cypress, (similar to a11y tests) and there is a cypress plugin that can do the visual comparison. A given threshold of difference is accepted, otherwise the test will fail. In interactive mode, the difference for failing tests. is highlighted from the cypress test runner.
Objectives are:
add support to configure cypress test running tailored for visual tests (yarn dependencies + cypress configuration + tests)
support for cumulative test runs
support for url list iterations
scripts for running tests in both for interactive mode, headless, and headless on the CI
github action for daily timed test running
optional: work out a system with git submodules that the test screenshots don't have to be committed to the main repository, making the repo size smaller in case tests don't need to run.
solve practical questions like blocking out often changing elements
example tests, documentation
We have this working in a customer project so the objective is to move all code to the light theme (or maybe directly to the Volto core if that turns out to be more beneficial).
sneridagh
commented
2 weeks ago
Visual tests mean that a series of pages are visited in the site, and the test passes if the page matches visually to a visual snapshot. This can detect css deviations and other visual errors. (It can also yield false positives, which has to be taken into consideration).
Visual tests are run by cypress, (similar to a11y tests) and there is a cypress plugin that can do the visual comparison. A given threshold of difference is accepted, otherwise the test will fail. In interactive mode, the difference for failing tests. is highlighted from the cypress test runner.
Objectives are:
We have this working in a customer project so the objective is to move all code to the light theme (or maybe directly to the Volto core if that turns out to be more beneficial).