Screenshots JavaScript Tutorial

The Applitools Eyes Screenshot Javascript SDK allows you to easily add visual checkpoints to your Javascript images tests. It takes care of images given by the user, sending them to the Eyes server for validation and failing the test in case differences are found.

Install SDK

npm install @applitools/eyes-images --save-dev

Run your first test

Applitools Eyes reports differences by comparing screenshots of your application with baseline images that define the expected appearance of the application at each step of the test. The user should specify the environment (OS and application under test), and the Eyes SDK will automatically set the viewport size based of the size of the image being tested. It will then compare the screenshots against baseline images that are specific to that environment. The first time you run a test in a given environment, its screenshots will be automatically saved as its baseline. Starting from the second run onward, you always have a baseline to compare against.

The test below is a simple Java program that visually validates an image from Applitools' homepage. It consists of a single visual checkpoint, The first time you run this test a new baseline will be created, and subsequent test runs will be compared to this baseline. If any screenshot mismatch its baseline image in a perceptible way, eyes.close() will throw a DiffsFoundException which includes a URL that points to a detailed report where you can see the detected differences and take appropriate actions such as reporting bugs, updating the baseline and more.

Before running the test, make sure to set the API key that identifies your account in the environment variable APPLITOOLS_API_KEY or directly assign it to the eyes.ApiKey method. You can find your API key under the user menu located at the right hand side of the test manager toolbar. If you don't yet have an account create it now to obtain your key.

var https = require('https');
var Eyes = require('@applitools/eyes-images').Eyes;
var ConsoleLogHandler = require('@applitools/eyes-common').ConsoleLogHandler;
// This example uses RSVP library for creating promises.
var RSVP = require('rsvp');

// Switch between the versions to generate test failure.
var version = "0.1";
//var version = "0.2";

var eyes = new Eyes();
// This is your api key, make sure you use it in all your tests.
eyes.setApiKey(process.env.APPLITOOLS_API_KEY);
// Define the OS and hosting application to identify the baseline
eyes.setHostOS("macOS");
eyes.setHostApp("My Maxthon browser");

eyes.setLogHandler(new ConsoleLogHandler(false));

// Start visual testing.
var testPromise = eyes.open("Applitools site", "Sanity Test", {width: 785, height: 1087})
    .then(function () {
        // Load page image and validate.
        return getImage("applitools.com","/blog/wp-content/uploads/2013/11/app-is-live-nov-2013.png/" + version).then(function (img) {
            // Visual validation point #1
            return eyes.checkImage(img, 'Contact-us page');
        });
    })
    .then(function () {
        // Load another page image and validate
        return getImage("applitools.com", "/blog/wp-content/uploads/2013/11/app-is-live-nov-2013.png/" + version).then(function (img) {
            // Visual validation point #2
            return eyes.checkImage(img);
        });
    })
    .then(function () {
        // End visual testing. Validate visual correctness.
        return eyes.close(false);
    }, function () {
        return eyes.abortIfNotClosed();
    }
);

// Handle test results.
testPromise.then(function (results) {
    console.log("results", results);
});

function getImage(host, path) {
    var options = {
        host: host,
        path: path
    };

    var deferred = RSVP.defer();

    https.request(options, function (res) {
        res.setEncoding('binary'); // this

        var data = "";
        res.on('data', function(chunk) {
            return data += chunk;
        });
        res.on('end', function() {
            return deferred.resolve(new Buffer(data, 'binary'));
        });
        res.on('error', function(err) {
            console.log("Error during HTTP request");
            console.log(err.message);
            deferred.reject();
        });
    }).end();

    return deferred.promise;
}

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

Analyze your test results

Congratulations! You've successfully run your first visual UI test with Applitools Eyes! A detailed report is ready for your inspection at the Applitools Eyes test manager. Watch this 5 minute video to get acquainted with the test manager and to learn the basics of baseline maintenance.

Learn more

Applitools Eyes is a powerful platform for automated visual UI testing that supports full page screenshots, page layout matching, cross-device and browser testing, test batching, baseline branching and merging, automated baseline maintenance, collaboration features, and much more. Applitools has over 40 SDKs supporting a broad range of testing environments.

Reference documentation

To learn more, check out the Applitools Eyes documentation and tutorials for other testing environments.

Request a demo

If you want to see a demo of all our other features, you do request a demo

# Screenshots JavaScript Tutorial

# Install SDK

# Run your first test

# Analyze your test results

# Learn more

# Reference documentation

# Request a demo

# Knowledge base and Support