Visual Regression Tests with Percy

Transcript

1. Visual Regression Tests with Percy
2. Visual regression testing is basically high-level testing that can identify any visual changes to a system. For this to happen, the test takes a snapshot of the page in question, and performs a comparison with a stable version. In other words, it checks that the code changes do not break any aspect of the software's visual interface. What is Visual Regression Testing
3. Visual regression testing is basically high-level testing that can identify any visual changes to a system. For this to happen, the test takes a snapshot of the page in question, and performs a comparison with a stable version. In other words, it checks that the code changes do not break any aspect of the software's visual interface. What is Visual Regression Testing
4. How does visual regression testing work? Visual tests generate, analyze, and compare browser snapshots to detect whether any pixels have changed. These pixel differences are called visual differences (sometimes called perception differences, diffs, CSS differences, user interface differences).
5. How to implement visual regression testing? It’s necessary define what should be captured in the screenshots and at what point in the test they will be captured. Make sure that these scenarios include a variety of user interactions, as this is what the software will have to deal with in the real world. After the test code has been fully executed, a report is automatically generated. A reviewer then reviews all the images that have been diagnosed as changed from the baseline. Some testing tools generate
6. Percy
7. Why use Percy Percy is a visual testing tool. Captures screenshots, compares them to the baseline images, and highlights visual changes. • It supports issue/pull request management in Github, Bitbucket and Gitlab • It integrates into CI/CD pipelines (including Azure Pipelines) easily by using percyScript or by integrating into your automation test SDK Supports: Cypress, Puppeteer, Playwright, Selenium, WebdriverIO, Nightwatch, Protractor, TestCafe
8. Percy price
9. Applitools
10. Why use Applitools Applitools works through an API (Applitools Eyes) that will receive the screenshots (generated locally in the development/CI environment) and will run a comparison algorithm, performing a match between the new image and the base image. If the code change is intended to change any visual component of the page, the test will break as well. Supports: Selenium, Cypress, and WebDriverIO.
11. Bráulio Batista braulio.batista@outlook.pt