Visual Testing

A successfully built web application needs to function properly and perform at high speed. However, the look and feel from a UI standpoint is also a key factor within testing since the range of screen sizes, resolutions, and devices that the web app will run on is huge.

This is where visual testing comes into play. The visual testing of a responsible PWA or standard web application can be done within a core capability of a test framework that the developers are using or through a third-party library that’s imported as part of the framework dependencies.

In many cases, having visual testing as a core capability of the framework that we use is a great advantage since we don’t need to continuously maintain and import updates to the dependent library. However, sometimes, there will be exceptions where a third-party solution (such as Happo) provides unique capabilities that are not built into the framework out of the box.

Let’s look at visual testing across the different frameworks, starting with Cypress.

Cypress visual testing

For the Cypress framework, visual testing elements that are built into the framework are limited to the following:

• Taking a screenshot of the web application screens that are under test using the cy.screenshot() APIs.

• Taking screenshots upon a validation ...