Learning Visual Testing as a Junior Developer with Applitools and Cypress

There is a first time for everything, and I was lucky to get a chance to learn about front end testing through a new program called the This Dot Labs Open Source Apprentice Program recently.

Apprentice programs are a great help for a person like me who was a mom returning to work after a year off to kick start things smoothly. For me, this program helped me learn tons of new things.

I was introduced to an amazing tool called Applitools which can ease our task as a developer to perform visual tests across an application.

Applitools uses AI-powered image comparison technology which only reports differences that are noticeable to users and reliably ignores invisible rendering, size and position differences. It can instantly validate entire application pages, detect layout issues. Using the same baseline image it can validate any change in layout, missing elements, overlapping elements or size issues across multiple browsers and devices.

How I made my first PR with Applitools and Cypress in Preact Material

My first PR was introducing Applitools and Cypress to Preact-Material-Component.

Preact-Material-Component is a wrapper over Google’s official material-components-web library. With over 50k downloads it has been an opinionless wrapper for Preact developers interested in using material design for their applications.

For their next major release, the maintainers are planning on adding custom code on top of Google’s library like gestures, experimental components and more. This is why they needed something more than just a puppeteer based pixel to pixel matching which already existed in their current version.

I was a little nervous to do add Applitools as both testing and front end were pretty new to me but thanks to my This Dot mentor things were a cake walk.

There was some basic installation needed so that we could write our test.
Installing Cypress for Applitools: Applitools has an SDK for Cypress so it’s easy to use.

To install Cypress navigate to the folder path on the terminal.

Run the below command for installation.

yarn add cypress --dev

This installs cypress as a dev dependency.
For opening cypress on the system you can use:

npx cypress open

When we run the cypress for the first time, a default structure is added to our code.

To begin our test we add the eyes-cypress plugin to our cypress project.
It basically adds three main methods, cy.eyesOpen to start the test, cy.eyesCheckWindow to take screenshots (for each test step) and cy.eyesClose to close the test.

npm install @applitools/eyes-cypress --dev

We import the Applitools and Cypress dependencies in plugins/index.js and commands/index.js.

require('@applitools/eyes-cypress')(module)

import @applitools/eyes-cypress/commands

Next, add cy.eyesOpen to start the test inside it block.

Add one or more eyesCheckWindow checkpoints for various test steps.

Towards the end of the test, you add cy.eyesClose.

cy.eyesClose()

To run Applitools:

1. Create Applitools account (open source libraries can get this for free here).
2. Go to the menu in the top right corner and click the profile icon on the far right.
3. Click on “My API Key” and copy your key.
4. Go to your terminal and paste the following: export APPLITOOLS_API_KEY=Your_API_Key_Here
5. Go to your directory and run:

yarn test:travis

1. In your Applitools dashboard, you should see the results of your tests.

This tool amazed me as it helped me capture even the smallest details which may otherwise be overlooked during manual testing.

So thanks, Applitools for teaching me testing, the importance of visual testing, and bringing out such an awesome tool which is in many ways a boon to the developers.

If you want to talk to me about Applitools or The This Dot Labs Apprentice Program, you can find me on Twitter @_megsachdev.