Testing the appearance of a user interface is simple with Applitools, and it integrates seamlessly with cypress. Previously I had used cypress at a larger company I worked at, where we used it for our visual testing on the mobile and desktop applications. With a free tier offering 100 visual snapshots a month I have enjoyed its free tier for a variety of my projects. In this post I’ll share how I added it to this blog.

npm i -D @applitools/eyes-cypress
npx eyes-setup
Create a file called applitools.config.js and paste in the following contents. Keep in mind that each visual test goes towards your 100, and so for my purposes I run one test on desktop, and the other on a mobile device.

module.exports = {
   concurrency: 5,
   apiKey: 'YOUR_API_KEY',
   browser: [
       // Add browsers with different viewports
       {width: 1600, height: 1200, name: 'chrome'},
       // {width: 800, height: 600, name: 'chrome'},
       // {width: 700, height: 500, name: 'firefox'},
       // {width: 1600, height: 1200, name: 'ie11'},
       // {width: 1024, height: 768, name: 'edgechromium'},
       // {width: 800, height: 600, name: 'safari'},

       // Add mobile emulation devices in Portrait mode
       {deviceName: 'iPhone X', screenOrientation: 'portrait'},
       // {deviceName: 'Pixel 2', screenOrientation: 'portrait'}
   ],
   // set batch name to the configuration
   batchName: 'JoshJohansen.com'
}

Your apikey can be found by going to eyes.applitools.com, logging in, and clicking the person icon in the top right corner and selecting ‘My API Key’. Be sure to not share this publicly.

In the directory cypress/integration/ create a file applitools_spec.js and paste in the following.

describe('JoshJohansen.com Blog Visual Tests', () => {

 beforeEach(() => {
   cy.visit('http://localhost:3000/');
   
   cy.eyesOpen({
     appName: 'JoshJohansen.com',
     testName: 'Applitools Visual Testing',
   })
 })

 afterEach(() => {
   cy.eyesClose()
 })

 it('clicking "Chunking" renders the blog post', () => {
   cy.contains('Chunking').click();

   cy.location('pathname').should('eq', '/posts/chunking');

   cy.get('h1').contains('Chunking');
   cy.get('time').contains('August 11, 02020');
   cy.get('article p').contains('The human brain is capable of thinking about seven things on average.');

   // https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
   cy.eyesCheckWindow({
     target: 'window',
     fully: true
   });
 });
});

Now when you run the tests you should see that it passed the first time, and will save the screenshot of what was seen. Subsequent tests on that form factor will compare it with what was previously ‘seen’ and if there is a difference it will be highlighted in the applitools dashboard.

This has been particularly useful when using 3rd party charting libraries, or loading data from many different systems and cdns. If you need to change any security settings and all of a sudden cdn’s are no longer allowed in your network and your icons are not being server you will be able to catch it using applitools.

Very useful tool with very little effort involved.