Visual Comparison Testing with Angular, together with the power of Cypress, is a good method to improve your test suite.
By taking screenshots of your Angular app, you can compare your UI with baseline images. If a screenshot is different from the original screenshot, a (visual) bug could have slipped in your UI.
Using the extensive browser grid of TestingBot, it's possible to test your Angular UI on various browsers and platforms.
Advantages of Visual Comparison Testing
Visual UI testing is a method of taking screenshots, comparing these to baseline images and triggering an error when there's a difference detected.
UI testing can be used as part of your test suite in your CI/CD environment, next to functional tests, unit tests and more.
There are several advantages to using Visual Comparison Testing. Below are the most popular advantages.
-
Automation:
These tests are done automatically, which means they can be repeated whenever you want and how many times you like. In combination with a CI/CD system, this is much more efficient than going through every UI change manually.
-
Quality:
A pixel comparison algorithm will detect the slightest UI change. Compared with a human tester, the algorithm will detect changes faster and more efficient.
-
Scalability:
Because this is an automated verification, you can choose to run the algorithm in parallel on a wide variety of configurations. You can choose to run the checks on different viewport sizes, screen resolutions, operating systems, browsers and (mobile) devices.
Angular Visual Regression Testing with Cypress
Cypress is a popular test framework, used by developers and QA to write tests in clear syntax.
With the power of plugins, Cypress can be extended with various enhancements to improve your test suite.
One plugin is called cypress-image-snapshot which allows you to take screenshots during a Cypress test.
Under the hood, the plugin uses the jest-image-snapshot image diffing logic, which uses pixelmatch under the hood.
Once you've used Angular to create your website, you can use Cypress to test the webpages on a variety of browsers, versions and devices.