Skip to main content

Integrate Visual AI Into Your Cypress Project

This guide will show you how to add Visual AI Checkpoints to your existing project.

Install Dependencies​

Install the Eyes SDK​

npm i -D @applitools/eyes-cypress

Setup the SDK​

The command below will configure Cypress to use the Applitools SDK commands: 

npx eyes-setup

Setting Up Your Environment​

Before running the visual test, set up your API key as an environment variable named APPLITOOLS_API_KEY. You may set it through your IDE (if applicable), or you may set it from the command line like this:

export APPLITOOLS_API_KEY=<your-api-key>

Modify Your Tests​

To run a Visual AI Checkpoint, there are 3 main steps:

  1. Call cy.eyesOpen()
  2. Call cy.eyesCheckWindow() to perform Visual AI assertions
  3. Call cy.eyesClose()

Calling cy.eyesOpen()​

The cy.eyesOpen() command initializes a session with the Applitools server, allows you to configure the Eyes object and marks the beginning of a Visual AI Test.

This function must be called before any calls to cy.eyesCheckWindow(). Therefore, it is recommended to place it in the beforeEach or the before hook for your test suite:

beforeEach(() => {
    // Start Applitools Visual AI Test
    cy.eyesOpen({
        appName: 'ACME Bank',
        testName: Cypress.currentTest.title,
    })
})

Calling cy.eyesCheckWindow()​

The cy.eyesCheckWindow() command takes a Visual AI assertion of the current status of the page that you're testing. This method should be called within your actual test:

 cy.eyesCheckWindow({
    tag: "Login page",
    fully: true
});

Calling cy.eyesClose()​

The cy.eyesClose() command is the opposite of cy.eyesOpen() and marks the end of your Visual AI Test. This method should be called once per call to cy.eyesOpen(). So, if you're calling cy.eyesOpen() in the beforeEach hook, then call this method in the afterEach hook:

afterEach(() => {
    // End Applitools Visual AI Test
    cy.eyesClose()
})

Full Example​

Below is an example of a test case that uses Visual AI Assertions:


Next Steps​