@applitools/eyes-testcafe

Eyes-Testcafe SDK for Testcafe

Installation

Install Eyes-Testcafe as a local dev dependency in your tested project:

npm i -D @applitools/eyes-testcafe@beta

Applitools API key

In order to authenticate via the Applitools server, you need to supply the Eyes-Testcafe SDK with the API key you got from Applitools. Read more about how to obtain the API key here.

To to this, set the environment variable APPLITOOLS_API_KEY to the API key before running your tests. For example, on Linux/Mac:

export APPLITOOLS_API_KEY=<your_key>
npx testcafe chrome:headless some-test-dir

And on Windows:

set APPLITOOLS_API_KEY=<your_key>
npx testcafe chrome:headless some-test-dir

Usage

After defining the API key, you will be able to use commands from Eyes-Testcafe in your testcafe tests to take screenshots and use Applitools Eyes to manage them:

Example

import {Eyes, Target} from '@applitools/eyes-testcafe';

const eyes = new Eyes();

fixture`Hello world`
  .page('https://applitools.com/helloworld')
  .afterEach(() => eyes.close());
  
test('Hello world page', async t => {
  await eyes.open(t, 'Hello World!', 'My first JavaScript test!', {width: 1200, height: 800});
  await eyes.check('Main Page', Target.window());
  await t.click('button')
  await eyes.check('Click!', Target.window());
});

API

open

Create an Applitools test. This will start a session with the Applitools server.

eyes.open(t, appName, testName, viewportSize)

check

Generate a screenshot of the current page and add it to the Applitools Test.

eyes.check(tag, checkSettings)

Arguments to eyes.check

tag

Defines a name for the checkpoint in the Eyes Test Manager. The name may be any string and serves to identify the step to the user in the Test manager. You may change the tag value without impacting testing in any way since Eyes does not use the tag to identify the baseline step that corresponds to the checkpoint - Eyes matches steps based on their content and position in the sequences of images of the test. See How Eyes compares checkpoints and baseline images for details.

checkSettings

Holds the checkpoint's configuration. This is defined using the fluent API, starting with Target.

• For taking a viewport screenshot, call Target.window().
• For a full page screenshot, call Target.window().fully().

close

Close the applitools test and check that all screenshots are valid.

It is important to call this at the end of each test, symmetrically to open(or in afterEach(), see Best practice for using the SDK).

const testResults = await eyes.close(throwEx);

Best practice for using the SDK

Every call to eyes.open and eyes.close defines a test in Applitools Eyes, and all the calls to eyes.check between them are called "steps". In order to get a test structure in Applitools that corresponds to the test structure in Testcafe, it's best to open/close tests in every test call. You can use afterEach for calling eyes.close()

fixture`Hello world`
  .page('https://applitools.com/helloworld')
  .afterEach(async () => eyes.close());