Testcafe Tutorial

Getting Started with Applitools

Want to learn more about the Applitools platform and how it works? First get started with one of the following:

Running Tests with Applitools

Prerequisites
  1. A free Applitools account and Applitools API KEY

Tip: Unsure how to set up your API key?

Learn how to get started at Setting Up

  1. Node.js https://nodejs.orgโ€‹

  2. Git https://git-scm.comโ€‹

Note: Installing `git` is optional

Installing git is used to clone the demo project from the Github repository. Instead of installing git, you can simply download the Zip file from the repository. Further, if you are Mac, you already have git.

  1. Google Chrome Browser https://www.google.com/chrome/

Running the Example Project

  1. Clone or download the repository and navigate to that folder
git clone https://github.com/applitools/tutorial-testcafe.git
cd tutorial-testcafe
1
2

Note: you can alternatively download the project as a Zip file and extract it

  1. Install the dependencies
npm install
1
  1. Run the example test

To run all of the tests, run:

APPLITOOLS_API_KEY="[Your API Key]" npm run test
1

Adding Applitools Eyes to an Existing Node.js TestCafe Project

Install Applitools Eyes dependencies:

npm install @applitools/eyes-testcafe --save-dev
1

Sample test

//play.testcafe.js

// next line is optional, just for IDEs autocomplete :
/// <reference types="@applitools/eyes-testcafe" />

import Eyes from '@applitools/eyes-testcafe';

// Initialize the eyes
const eyes = new Eyes();

// Set page used in the test
fixture`Testcafe Demo App`.page`https://demo.applitools.com`
    // Call Close on eyes to let the server know it should display the results
    .afterEach(async () => eyes.close())
    .after(async () => {
        // Wait and collect all test results
        // we pass false to this method to suppress the exception that is thrown if we
        // find visual differences
        let allTestResults = await eyes.waitForResults(false)
        // Print results
        console.log(allTestResults)
    });

    test('ultraFastTest', async t => {
    // Call Open on eyes to initialize a test session
    await eyes.open({
        t, // pass testcafe contorller
        appName: 'Demo App',
        testName: 'Ultrafast grid demo',
    });

    // check the login page with fluent api, see more info here
    // https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
    await eyes.checkWindow({
        tag: "Login Window",
        target: 'window',
        fully: true
    });

    // This will create a test with two test steps.
    await t.click('#log-in')

    // Check the app page
    await eyes.checkWindow({
        tag: "App Window",
        target: 'window',
        fully: true
    })
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

Note that you may set the API key, concurrency (number of parallel screenshots), browsers X viewports, etc in the applitools.config.js file in the root directory.

// applitools.config.js
module.exports = {
    apiKey: 'APPLITOOLS_API_KEY',
    browser: [
        // Add browsers with different viewports
        {width: 800, height: 600, name: 'chrome'},
        {width: 700, height: 500, name: 'firefox'},
        {width: 1600, height: 1200, name: 'ie11'},
        {width: 1024, height: 768, name: 'edgechromium'},
        {width: 800, height: 600, name: 'safari'},
        // Add mobile emulation devices in Portrait mode
        {deviceName: 'iPhone X', screenOrientation: 'portrait'},
        {deviceName: 'Pixel 2', screenOrientation: 'portrait'}
    ],
    // set batch name to the configuration
    batchName: 'Ultrafast Batch'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

More information

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

Resources




Terms & Conditions Privacy Policy GDPRยฉ 2021 Applitools. All rights reserved.

Last Updated: 6/24/2021, 10:09:59 AM