--- title: Angular UI Testing | Testing Resources description: How to add visual regression testing to an Angular app with Cypress, comparing screenshots against a baseline to catch unintended UI changes. source_url: html: https://testingbot.com/resources/articles/angular-ui-testing md: https://testingbot.com/resources/articles/angular-ui-testing.md --- ![Angular UI Testing](https://testingbot.com/assets/resources/articles/21.webp) # Angular Visual Regression Testing How to add visual regression testing to an Angular app with Cypress, comparing screenshots against a baseline to catch unintended UI changes. By [Jochen D.](https://testingbot.com/about/jochen-d)2023-03-26Updated 2026-08-31 Share on Facebook Share on Twitter Post on Reddit Share link Visual Comparison Testing with [Angular](https://angular.io/), together with the power of [Cypress](https://testingbot.com/support/web-automate/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. ## Table of Contents - [Advantages of Visual Comparison Testing](https://testingbot.com#advantages) - [Angular Visual Regression Testing with Cypress](https://testingbot.com#angular) - [Angular Visual UI Testing Example](https://testingbot.com#example) ## 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](https://github.com/jaredpalmer/cypress-image-snapshot) which allows you to take screenshots during a Cypress test. Under the hood, the plugin uses the [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot) image diffing logic, which uses [pixelmatch](https://github.com/mapbox/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. ## Angular Visual UI Testing Example To get started, let's assume that you have an existing Angular project that you want to test visually. If you don't have an Angular project, you can create one using the Angular CLI by running the following command: ```bash ng new demo-app ``` Once you have an Angular project, you can add Cypress and cypress-image-snapshot to your project by running the following commands: ```bash npm install cypress cypress-image-snapshot --save-dev ``` Now that you have Cypress and cypress-image-snapshot installed, you can start writing visual UI tests. Below is an example on how to do visual UI testing with Cypress and cypress-image-snapshot: ```javascript describe('Visual UI testing', () => { it('should check the main page', () => { cy.visit('https:/testingbot.com/') cy.wait(500) // Wait for UI to settle cy.get('body').toMatchImageSnapshot() // Verify screenshot }) }) ``` The first time that you will run this test, Cypress will take a screenshot of the entire page and save it as a baseline image. On the next run, Cypress will take another screenshot and compare it to the baseline image. If differences are detected, the Cypress test will fail and display a visual diff of the two images. The diff is useful to visually compare what has changed. Using Cypress in combination with cypress-image-snapshot for visual UI testing is a useful method to ensure that your Angular application's UI remains consistent and bug free. Visual UI testing can be very beneficial early in the development process, to make sure any visual defects are detected early. ## Related reading - [Visual testing with Playwright](https://testingbot.com/resources/articles/playwright-visual-regression-testing) - [Visual regression testing with Python](https://testingbot.com/resources/articles/python-visual-testing) Topics [Visual Testing](https://testingbot.com/resources/articles/topic/visual-testing) ## Sidebar ### TestingBot Cloud Testing Run automated, manual and visual tests on remote browsers and devices. Sign up for a free trial. [Free Trial](https://testingbot.com/users/sign_up) ### Latest articles [![Visual Regression Testing with Python](https://testingbot.com/assets/resources/articles/20-823a333072d87c93f6d75a502e3073e32bd0bee1d3142540ce0b42da6fa7ccf0.webp)](https://testingbot.com/resources/articles/python-visual-testing) #### [Visual Regression Testing with Python](https://testingbot.com/resources/articles/python-visual-testing) How to add visual regression testing to a Python suite: c... [Read article →](https://testingbot.com/resources/articles/python-visual-testing) [![Visual Testing with Playwright](https://testingbot.com/assets/resources/articles/14-f3f2e8954c8a47cf0bb29059b44f4d2f40998442e22db6f8acdccb8e5b34d8c1.webp)](https://testingbot.com/resources/articles/playwright-visual-regression-testing) #### [Visual Testing with Playwright](https://testingbot.com/resources/articles/playwright-visual-regression-testing) Playwright provides automated browser testing [Read article →](https://testingbot.com/resources/articles/playwright-visual-regression-testing) [![Tutorial on debugging Cypress tests](https://testingbot.com/assets/resources/articles/10-7ae9f6d9435bea1c54ec815ad535dc4a590086e6165263a9eba3441635d55726.webp)](https://testingbot.com/resources/articles/how-to-debug-cypress-tests) #### [Tutorial on debugging Cypress tests](https://testingbot.com/resources/articles/how-to-debug-cypress-tests) How to debug a failing Cypress test using the debugger, c... [Read article →](https://testingbot.com/resources/articles/how-to-debug-cypress-tests) ## Other Articles [![Cypress and Cucumber Browser Testing](https://testingbot.com/assets/resources/articles/6-495c5e14cb4bf1e282858fc7e2cfcbe89775e3790b88d34c15bf9a6f36d387d4.webp)](https://testingbot.com/resources/articles/cypress-cucumber-testing "Cypress and Cucumber Browser Testing") ### [Cypress and Cucumber Browser Testing](https://testingbot.com/resources/articles/cypress-cucumber-testing) How to combine Cypress with Cucumber so end-to-end tests read as plain language, including a worked example and the TypeScript setup. [Read article →](https://testingbot.com/resources/articles/cypress-cucumber-testing) [![Parallel Testing: What Actually Scales](https://testingbot.com/assets/resources/articles/parallel-testing-32f51791d748c85621c4bf431293e46349cf0d81ec1a3262450b33f0edead4ef.webp)](https://testingbot.com/resources/articles/parallel-testing "Parallel Testing: What Actually Scales") ### [Parallel Testing: What Actually Scales](https://testingbot.com/resources/articles/parallel-testing) Why adding workers stops helping, how to shard so they are not idle, and what breaks the first time a suite runs concurrently. [Read article →](https://testingbot.com/resources/articles/parallel-testing) [![Automated Regression Testing in CI](https://testingbot.com/assets/resources/articles/automated-regression-testing-e283d0b6a88c787633d29f0cfb35cbb90a48136dace54720252843ebc4a36063.webp)](https://testingbot.com/resources/articles/automated-regression-testing "Automated Regression Testing in CI") ### [Automated Regression Testing in CI](https://testingbot.com/resources/articles/automated-regression-testing) How to build a regression suite that stays fast and trustworthy in CI, what to leave out of it, and when to run which part. [Read article →](https://testingbot.com/resources/articles/automated-regression-testing) [![Mobile App Test Automation at Scale](https://testingbot.com/assets/resources/articles/mobile-app-test-automation-12d7e7edc7c551f05282cd03ccd0de42da8e4c740d754286777972249471a36e.webp)](https://testingbot.com/resources/articles/mobile-app-test-automation "Mobile App Test Automation at Scale") ### [Mobile App Test Automation at Scale](https://testingbot.com/resources/articles/mobile-app-test-automation) How to choose between Appium, Espresso, XCUITest and Maestro, and what changes when you run the suite on real devices at scale. [Read article →](https://testingbot.com/resources/articles/mobile-app-test-automation) ## Ready to start testing? [Start a free trial](https://testingbot.com/users/sign_up)