puppeteer-eyes.it

Automatic screenshot comparison using Puppeteer, Jest and Applitools Eyes.

Getting started

  npm i --save-dev puppeteer-eyes.it

Setup

Add Puppeteer’s page on global (if you are using jest-puppeteer you already have it on global)

Require puppeteer-eyes.it:

   const eyes = require('puppeteer-eyes.it');

Add your Applitools’ eyes key to APPLITOOLS_API_KEY env variable:

CI
Travis: go to your build’s options -> settings -> Environment Variables and add APPLITOOLS_API_KEY + your key

locally
add an .env file, with:
```
   APPLITOOLS_API_KEY=<your key here>
```
- this step is not mandatory - you should use it if you want to use eyes when running locally.
- you should put your .env file in git ignore!!!

**Key name change** `EYES_API_KEY` is being replaced with `APPLITOOLS_API_KEY`. For now, we support both of them.

Change your test to use eyes.it or eyes.test instead of it or test

Change screenshot baseline

In order to have a new screenshot baseline you can pass a version to your test:

eyes.it('test description', async () => {
    // test goes here
}, {version: '1.0.1'});

Default version is ‘1.0.0’

How does it work

puppeteer-eyes.it automatically takes a screenshot at the end of your test and sends it to Applitools eyes. When Eyes detects a diff in the screenshot, your build will fail and you will have a link to Applitools site with the visual diff of the screenshot.

Example

  const puppeteer = require('puppeteer');
  const eyes = require('puppeteer-eyes.it');
  let page;
  beforeAll(async () => {
    const browser = await puppeteer.launch();
    page = global.page = await browser.newPage();
  });
  afterAll(() => browser.close());
  eyes.it('test description', async () => {
    await page.goto('http://www.wix.com');
    expect(await page.title()).toEqual('Free Website Builder | Create a Free Website | Wix.com');
  });