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:
- macOS and Linux
- Windows
export APPLITOOLS_API_KEY=<your-api-key>
set APPLITOOLS_API_KEY=<your-api-key>
Modify Your Tests
To run a Visual AI Checkpoint, there are 3 main steps:
- Call
cy.eyesOpen()
- Call
cy.eyesCheckWindow()
to perform Visual AI assertions - 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: