# Playwright tutorial

# Getting Started with Applitools Eyes & Playwright

# Adding Applitools Eyes to a Playwright test

1. Install Applitools Eyes for Playwright

In order to use Applitools Eyes, we need to first install the Eyes SDK for Playwright as an npm package.

npm i -D @applitools/eyes-playwright

2. Add a new visual test with Applitools Eyes

To run a new check with Applitools Eyes, you can add the following to a test.

First import the Eyes SDK dependencies:

const { Eyes, Target } = require('@applitools/eyes-playwright')

Then add a new check with Eyes:

const eyes = new Eyes();
await eyes.open(page, 'Hello World!', 'My first JavaScript test!');
await eyes.check(Target.window().fully());
await eyes.close();

At it's simplest, this will tell Eyes that you want to start a test, capture the active window, and finally close the test.

You can also create multiple checks that make sense in a typical user flow. If you have a login page where you want to be sure your authentication is working exactly as expected, you may write a test like:

const eyes = new Eyes();
await eyes.open(page, 'Hello World!', 'My first JavaScript test!');
await eyes.check('Login Page', Target.window().fully());
await page.click('#log-in');
await eyes.check('Dashboard', Target.window().fully());
await eyes.close();

3. Set your Applitools API key

Before running your test, you need to make your API key available to the environment. You can do this by either prepending your test command or exporting it in your terminal session.

To prepend, run you a command like npm test as:

APPLITOOLS_API_KEY="[Your Key]" npm test

To export your API key on a Mac, run:

export APPLITOOLS_API_KEY="[Your Key]"

To export your API key on Windows, run:

set APPLITOOLS_API_KEY="[Your Key]"

Learn how to find your API key

5. Run your Playwright tests!

Now you're ready to run your tests!

You can use your existing test command to run your Playwright tests.

And that's it! Your tests should now be available to review in the Applitools dashboard.

# Playwright Applitools Eyes SDK

# Check out a working demo

See it in action with our example over on GitHub!

# More information

The @applitools/eyes-playwright npm package page contain more information about advanced configuration, best practices and troubleshooting. Visit eyes-playwright SDK repo to find out more about what's possible with Applitools' Playwright SDK.