Angular and Cypress UI Testing with Applitools

Getting Started with Angular, Cypress, and Applitools

With all the attention on Angular visual UI testing, I thought it would be appropriate to share step by step tutorial on this subject. Specifically, Angular UI testing using Applitools and Cypress.io.

Applitools / Cypress.io Integration

Applitools integrates with Cypress.io and offers a general-purpose library to embed within your project, whether it be the Angular, Vue or React app.

cypress marketecture

Source code

For this article, I’ve chosen to write a few E2E Cypress.io tests against the Angular Pizza Creator app written by Todd Motto which is available on Github. The Pizza Creator app builds a pizza ordering form that basically allows the client to customize the pizza ingredients before ordering it. I’ve cloned the Github repo, created a new Angular CLI app and migrated all the source code there. The new Github repo can be found here.

Steps 1–3: Prepare The Demo App

Step 1: Clone the repository locally by issuing the following git command:

Screenshot 2019 05 29 at 23.19.33

Steps 4–7: Install And Configure Cypress

Step 4: Add Cypress package to the project:

Screenshot 2019 05 29 at 23.25.17

Steps 8–9: Install and Run End To End Test

Step 8: Inside the cypress\integration folder, create the pizza.spec.js file and paste:

Screenshot 2019 05 29 at 23.34.38

Steps 10–11: Add Applitools SDK

Since Applitools integrates seamlessly with Cypress.io, let’s add the Applitools Cypress NPM package to the project.

Steps 12–13: Run Test With Applitools To Capture Visual Data

Step 12: Revisit the cypress\integration\pizza.spec.js file and replace its content with:

Screenshot 2019 05 30 at 00.04.24

Steps 14–16: Demo Applitools With A CSS Change

We will simulate a visual difference by introducing a change on the font-weight for the selected toppings and let Applitools detect this. Now run the test again and see the results.

Screenshot 2019 05 30 at 00.21.18
Screenshot 2019 05 30 at 00.24.20
Screenshot 2019 05 30 at 00.33.49

Conclusion

You now have some insight on how Applitools speeds up your visual testing experience when you’re developing apps with Angular and Cypress.

Further Reading

In my previous posts, I have showcased the power of the Applitools Visual Grid system and demonstrated how Applitools integrates fluidly with Cypress.io inside a React JS app.

  1. Mixing Storybook with Angular with a sprinkle of Applitools
  2. Troubleshoot and fix React bugs fast
  3. Visually test VueJS apps using Cypress.io and Applitools
  4. How I ran 100 UI tests in just 20 seconds
  5. Visually Test Vue.js application using Applitools and Storybook
  6. React UI Testing, step by step, with Applitools and Cypress.io

For more information on Applitools

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store