Angular Visual Regression Testing: Tutorial

Angular is one of the most popular front-end development frameworks worldwide, alongside React and Vue. With several iterations in rear view, Angular V15 is the latest version available. Over the years, Angular development and testing landscape has evolved significantly, offering a broader and deeper range of options than ever before.

In this guide, we will focus on the significance of visual regression testing and explain why and how to start integrating with your Angular project or Angular applications.

Importance of Visual Regression Testing

• Ensuring visual consistency: Visual regression testing is aimed to test the visual properties of a user interface. It  helps to ensure that there are no visual discrepancies between the current version of your Angular-based web development project and previous versions. This helps maintain visual consistency across all web pages.
• Fix visual defects: With visual regression testing, you can detect regression defects, such as broken layout, images, and overlapping text. This helps to improve the user experience by fixing issues before they become problematic.
• Automation friendliness: Automated visual regression testing is easy and can save significant development time as it helps to identify and fix visual issues thoroughly. 
• Increase team collaboration: Discussing and analysing UI quality helps increase collaboration among team members, including designers, developers, and QA engineers. This results in better communication increased productivity, and better final product quality.
• Improve user satisfaction: Visual regression testing helps ensure the user experience is consistent and high-quality. This results in higher user satisfaction and fewer support requests.
• Boost SEO: The visual appeal and consistency of a website can have a significant impact on SEO. Visual regression testing helps ensure that your website looks good and performs well, which can improve search engine rankings and attract more traffic.
• Angular-specific issues: Angular-based web development can present unique challenges that require specific testing. Visual regression testing can help developers identify issues related to the framework’s complex structure, such as broken links or compatibility issues, which can be challenging to detect manually.

Let’s start with the basics of implementing visual regression testing for your Angular project.

Setup Project

The first step would be to set up the codebase for the project to be tested; either it could be an existing repository, or you can easily start a new project.

Make sure you have NodeJs installed and the latest version of NPM on your machine. You can check by running :

npm –version

Launch a new app using :

npm init @angular myApp

Go inside and launch the app:

cd myApp

npm start

Now you should be able to access your local deployment on the browser.

Angular Visual Regression Testing 

Visual testing is carried out after the component development is complete on the developer side, so it is agnostic of how the application was built. Most visual testing frameworks analyze the final application, and not the functional code.

The official angular docs on testing will not explicitly mention best practices for visual testing as it is a client-side activity. So it is advised you do your research and choose your testing tools wisely. 

This is exactly where Percy comes in. Due to its broad integration capabilities you can easily integrate any popular framework of your choice with BrowserStack Percy and start running your visual testing for a bunch of use cases like:

Here is an overview on how to use the most popular tools available :

Angular Visual Regression Testing with Selenium and Percy

Percy offers advanced features for taking screenshots, pixel comparisons and building approval workflow. To get started, Create a BrowserStack account and set up a new project for your Angular app on the Percy dashboard.

Install the necessary dependencies and frameworks for running visual regression tests with your preferred tool. Set up your test scripts to launch your Angular app and take screenshots at different stages of the test with Selenium:

Installation:

npm install --save-dev @percy/cli @percy/selenium-webdriver

Import into file required dependencies:

const { Builder } = require('selenium-webdriver');
const percySnapshot = require('@percy/selenium-webdriver');

Define the webdriver:

let driver = await new Builder().forBrowser('firefox').build();

Launch page and take snapshot:

await driver.get('http://localhost:4200/');
await percySnapshot(driver, ‘Angular App’);

Close the driver:

await driver.quit();

Finally, for executing the script, declare the PERCY_TOKEN variable and launch the script using node and you will get this output :

$ export PERCY_TOKEN=[your-project-token]
$ percy exec -- node script.js
[percy] Percy has started!
[percy] Created build #1: https://percy.io/[your-project]
[percy] Running "node script.js"
[percy] Snapshot taken " Angular App"
[percy] Stopping percy...
[percy] Finalized build #1: https://percy.io/[your-project]
[percy] Done!

Angular Visual Regression With Cypress and Percy

One way to implement automated visual testing with Angular is through using Cypress, an end-to-end testing tool that allows for automated testing of web applications..

To get started with visual testing with Cypress and Percy, developers should first install the necessary packages:

install --save-dev @percy/cli @percy/cypress

A Cypress test code with Percy snapshot function :

import '@percy/cypress';


describe('Integration test with visual testing', function() {
it('Loads the homepage', function() {
// Load the page or perform any other interactions with the app.
cy.visit(“http://localhost:4200”);


// Take a snapshot for visual diffing
cy.percySnapshot();
});
});

With this code, you can load the deployed page and take a snapshot for visual comparison. 

To run the test and upload the results to Percy, developers can use the following command:

export PERCY_TOKEN=<your token here>


percy exec -- cypress run

After running the scripts the results will be uploaded to Percy and can be accessed inside your project on the Percy dashboard.

Testing Angular Storybook with Percy

Percy Storybook is a Percy module built for testing Storybook which is a popular by component library used with content frameworks like React, Angular Vue etc. 

To get started with Percy Storybook visualtesting, developers can first install the module with the following command:

npm i --save-dev @percy-io/percy-storybook

Once installed, a script should be added to the project’s package.json file to define the snapshot behavior:

"snapshot": "build-storybook && percy-storybook --widths=320,1280"

In addition, the following code should be added to the .storybook/config.js file, which sets up the Percy addon and allows for the serialization of stories:

//Adjust the existing line that imports @storybook/angular
import { configure, getStorybook, setAddon } from '@storybook/angular';


// in config.js, add the following before calling configure to configure your stories
import createPercyAddon from '@percy-io/percy-storybook';
const { percyAddon, serializeStories } = createPercyAddon();
setAddon(percyAddon);


// add the following at the end of your config
serializeStories(getStorybook);

And Set access token in env : 

# Unix
export PERCY_TOKEN="<your-project-token>"


# Windows
set PERCY_TOKEN="<your-project-token>"

Once set up, developers can run Percy Storybook to test a locally hosted version of the site:

percy storybook http://localhost:4200

With Percy Storybook, developers can easily automate the testing of their Angular Storybook components, ensuring that changes to their UI do not have any unintended visual consequences. 

Incorporating Visual Regression Testing into the Development Workflow

Integrate visual regression testing into your CI/CD pipeline to catch visual defects early and ensure that your app looks and functions as expected before deployment.

• Use a visual regression testing tool that supports automatic screenshot capture and comparison, such as Percy. 
• Such tools can help you identify visual changes and regressions between builds, and allow you to set up visual baselines to compare against.
• Use a version control system like Git to track changes to your app’s UI and visual assets. This allows you to easily revert changes or compare visual differences between different versions of your app.
• Create a visual regression testing plan that outlines the steps and criteria for visual testing. This should include which pages and components to test, the browsers and devices to test on, and how often to run tests.
• Use real user scenarios and data in your visual tests to simulate real-world usage of your app. This helps to identify issues that may not be apparent in manual testing or unit tests.
• Use visual testing in conjunction with other types of testing, such as unit tests and functional tests, to ensure comprehensive test coverage and catch a wide range of issues.
• Set up alerts and notifications for visual regression testing results, so that you can quickly identify and fix any issues that arise. This can be done using tools like Slack or email notifications.

By incorporating visual regression testing into your development workflow, you can ensure that your app looks and functions as expected across different browsers and devices, catch visual defects early, and improve the overall quality and user experience of your app.

Managing Test cases for Angular Visual Regression Testing

Create a Test plan & Define Test Cases

Start by creating a test plan that outlines the testing objectives, requirements, and test scenarios. This helps to ensure that all aspects of the Angular app are covered and that you have a clear understanding of what needs to be tested.

Once you have a test plan, define the individual test cases that need to be executed to achieve the testing objectives. This includes the different elements of the app that need to be tested, the specific actions that need to be performed, and the expected results.

Use Version Control

Version control is essential for managing test cases for Visual Regression Testing on Angular app. This allows you to keep track of changes to the app and the testing scripts, and ensures that you can easily revert to previous versions if necessary.

Use a Test Management Tool

A test management tool can help you to manage your test cases, test data, and test results. This includes tracking the status of each test case, generating reports, and identifying any issues or defects.

Automate Test Execution

Automating test execution can help you to save time and reduce the risk of human error. Use tools like Cypress, Selenium, or Playwright to automate test execution and generate reports.

Try Automation Testing

Regularly review and update test cases

Regularly reviewing and updating your test cases is essential to ensure that your testing is comprehensive and up to date. This includes adding new test cases as new features are added to the Angular app, and updating existing test cases to reflect changes in the app.