Integrate Visual AI Checkpoints Into An Existing Project
This guide will show you how to add Visual AI Checkpoints to your existing project.
Install Dependencies
Install the Eyes SDK
npm install @applitools/eyes-playwright
npx playwright install
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>
Learn how to set up a free Applitools account and access your API key here.
Modify Your Tests
To run a Visual AI Checkpoint, there are 3 main steps:
- Call
eyes.open()
- Call
eyes.check()
to perform Visual AI assertions - Call
eyes.close()
Calling eyes.open()
The eyes.open()
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 eyes.check()
. Therefore, it is recommended to place it in the beforeEach
hook or equivalent for your test suite:
test.beforeEach(async ({ page }) => {
eyes = new Eyes(Runner, Config);
// Start Applitools Visual AI Test
// Args: Playwright Page, App Name, Test Name, Viewport Size for local driver
await eyes.open(page, 'ACME Bank', test.info().title, { width: 1200, height: 600 })
});
Calling eyes.check()
The eyes.check()
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:
// Capture the full web page
await eyes.check('Main page', Target.window().fully());
Calling eyes.close()
The eyes.close()
command is the opposite of eyes.open()
and marks the end of your Visual AI Test. This method should be called once per call to eyes.open()
. So, if you're calling eyes.open()
in the beforeEach
hook, then call this method in the AfterEach
hook or equivalent:
test.afterEach(async () => {
// End Applitools Visual AI Test
await eyes.close();
});
Full Example
Below is an example of a test case that uses Visual AI Assertions: