Validating UI using AI with Cypress

What is Applitools

Applitools is building a cloud service for automated visual testing.
Applitools Eyes automatically validates the correctness of the UI layout, content, functionality, and appearance on all browsers, devices, and screen resolutions. It also enables automated tests that can only be done manually without it. See http://applitools.com for more details about it.

Integrated Applitools with Cypress

Go to http://applitools.com and click Get Started button to do the registration. After successful registration, you can log in by using your credentials. Then you can see the empty home page as follow:

Then copy the API key from the user section as follow:

Then export and set that key to the environment variable.

export APPLITOOLS_API_KEY={coppied_key}
set APPLITOOLS_API_KEY=...

Let’s do some code to see the result here. Before that, we have to install and set up Applitools SDK for our project using the following npm commands.

npm install @applitools/eyes-cypress --save
npx eyes-setup

Let’s create a test file called orangehrm-ai.spec.js to do a visual validation.

import {Login} from "../pages/Login";
const login = new Login();

describe('AI Validation',()=>{
    beforeEach('navigate to login page',()=>{
        //cy.eyesOpen - open the eyes for take screenshots
        cy.eyesOpen({appName:'OrangeHRM',batchName:'OrangeHRM_batch'})
        login.navigate();
    })
    afterEach('',()=>{
        //cy.eyesClose - close the eyes for take screenshots
        cy.eyesClose();
    })
    it('should not be able to login to using invalid credentials',()=>{
        // cy.eyesCheckWindow - take a screen shot of the login page and will compare to do with baseline image
        cy.eyesCheckWindow('plain login page');
        login.login('Admin','admin');
        cy.eyesCheckWindow('login error');
    })
})

Now you can see the base images were created with batch name in the Applitools site as below:

Let’s introduce a new bug and new feature improvement on the Login page

1. Bug - ( Username : Admin | Password : admin123 ) removed from the Page
2. Improvement - User Credentials are invalid

By using cy.pause() command.

import {Login} from "../pages/Login";
const login = new Login();

describe('AI Validation',()=>{
    beforeEach('navigate to login page',()=>{
        //cy.eyesOpen - open the eyes for take screenshots
        cy.eyesOpen({appName:'OrangeHRM',batchName:'OrangeHRM_batch'})
        login.navigate();
    })
    afterEach('',()=>{
        //cy.eyesClose - close the eyes for take screenshots
        cy.eyesClose();
    })
    it('should not be able to login to using invalid credentials',()=>{
        // cy.eyesCheckWindow - take a screen shot of the login page and will compare to do with baseline image
        cy.pause();
        cy.eyesCheckWindow('plain login page');
        login.login('Admin','admin');
        cy.pause();
        cy.eyesCheckWindow('login error');
    })
})

So the Applitools sites indicating that two uncategorized issues.

Let’s categorize the differences in Applitools. Hower to the first image and select the dislike button to indicate that is the bug likewise select like button for the second image to accept the change as the new improvement. Then the Applitools change the new image as the second base image. Save the changes by clicking the disk image. lets’s run again.

Now you can see there is one failure since the new impromenet changed as the base image. Lets’ ask the dev to fix the bug and rerun the test.

Now you can see the bug is fixed and new improvement got accepted. How easy it is.

Cross Bowrser Checking

Lets’s do some modification to check in the different browsers. Define some browsers and devices in cy.eyesOpen() sections.

import {Login} from "../pages/Login";
const login = new Login();

describe('AI Validation',()=>{
    beforeEach('navigate to login page',()=>{
        //cy.eyesOpen - open the eyes for take screenshots
        cy.eyesOpen({
            appName:'OrangeHRM',batchName:'OrangeHRM_batch',
            browser:[
                {name:'chrome',width:1024,height:768},
                {name:'chrome',width:800,height:600},
                {name:'firefox',width:500,height:500},
                {deviceName:'iPhone X'},
                {deviceName: 'OnePlus 7T Pro'}
            ]
        })
        login.navigate();
    })
    afterEach('',()=>{
        //cy.eyesClose - close the eyes for take screenshots
        cy.eyesClose();
    })
    it('should not be able to login to using invalid credentials',()=>{
        // cy.eyesCheckWindow - take a screen shot of the login page and will compare to do with baseline image
        cy.eyesCheckWindow('plain login page');
        login.login('Admin','admin');
        cy.eyesCheckWindow('login error');
    })
})

Now you see the result for all the devices we defined throughout the test as follow: