Need private packages and team management tools?Check out npm Orgs. »


12.23.2 • Public • Published


A library that drives the visual grid with dom snapshot rendering.


npm install @applitools/visual-grid-client

Using the package

const {makeVisualGridClient} = require('@applitools/visual-grid-client')

See below for the full API.



  • To create a visualGridClient, call makeVisualGridClient:
const {makeVisualGridClient} = require('@applitools/visual-grid-client')
const visualGridClient = makeVisualGridClient()

The visualGridClient, returned by makeVisualGridClient, is an object with the following function:

  • openEyes(configOverride): to start a set of tests, where each step is a set of renderings according to the browser stuff in the configuration. This function will return an object with functions (see below) allowing you to create renderings (or "steps" in Applitools parlance) for the test.


Async function openEyes will create a test. Actually, it will create a series of tests, one for each browser configuration defined in the browser property of the configuraion.

  • openEyes accepts a configuration object that will override the default configuration found by makeVisualGridClient, per this test.

  • Returns a promise to an object with the following functions:

  • checkWindow(...): creates a "step" that checks the window according to the baseline. Note that this function will not fail, and you need to await the promises returned from close() to wait for the failure or success of a batch of steps in the test.

  • close(): async closes the test (or series of tests) created by openEyes.

  • abort(): if you want to abort this test (or series of tests). Async.


checkWindow receives an object with the following parameters:

  • tag: the name of the step, as seen in Applitools Eyes.
  • url: the URL appearing in the address bar of the browser. All relative URLs in the CDT will be relative to it.
  • cdt: the HTML and set and resources, in the x-applitools-html/cdt format (see below). you can use domNodesToCdt to create a CDT from a document.
  • target: the target of the rendering. Can be one of window, region
  • fully: set wehn target is window, if fully is true then snapshot is full page, if fully is false then snapshot is viewport.
  • selector: if the target is region, this is the selector we are targetting.
  • region: if the target is region, this is the region we are targetting. This is an object with x, y, width, height properties.
  • ignore: TBD
  • floating: TBD
  • strict: TBD
  • layout: TBD
  • sendDom: TBD
  • scriptHooks: a set of scripts to be run by the browser during the rendering. An object with the following properties:
    • beforeCaptureScreenshot: a script that runs after the page is loaded but before taking the screenshot.
  • resourceUrls: By default, an empty array. Additional resource URLs not found in the CDT.
  • resourceContents: a map of all resource values (buffers). The keys are URLs (relative to the url property). The value is an object with the following properties:
    • url: yes, again.
    • type: the content type of the resource.
    • value: a Buffer of the resource content.
  • matchLevel: The method to use when comparing two screenshots, which expresses the extent to which the two images are expected to match.


close receives throwEx parameters, and returns a promise.

  • If throwEx = true (default) :
    • If all tests defined in the openEyes pass then the promise is resolved with Array<TestResults>.
    • If there are differences found in some tests defined in openEyes then the promise is rejected with Array<TestResults>.
    • If there are any unexpected errors like a network error then the promise is rejected with Array<Error|TestResults>.
  • If throwEx = false :
    • The promise is always resolved with Array<TestResults|Error>.

The CDT format

  domNodes: [
      nodeType: number, // like in the DOM Standard
      nodeName: ‘...’ , // for elements and DocumentType
      nodeValue: ‘..., // for text nodes
      attributes: [{name, value}, ...],
      childNodeIndexes: [index, index, ...]
  resources: [
      hashFormat: 'sha256', // currently the only hash format allowed
      hash: '....', // the hash of the resource.
      contentType: '...', // the mime type of the resource.


Accepts a document object conforming to the DOM specification (browser document is fine, as is the JSDOM document). Returns a cdt, ready to be passed to checkWindow


  • See Eyes Cypress configuration for a list of properties in the configuration and to understand how the visual grid client reads the configuration.




Example Mocha test that uses the visual grid client:

const path = require('path')
const fs = require('fs')
const {makeVisualGridClient} = require('@applitools/visual-grid-client')
const {getProcessPageAndSerializeScript} = require('@applitools/dom-snapshot')
const puppeteer = require('puppeteer')
describe('visual-grid-client test', function() {
  let visualGridClient
  let closePromises = []
  let processPageAndSerialize
  let browser
  let page
  before(async () => {
    browser = await puppeteer.launch()
    page = await browser.newPage()
    visualGridClient = makeVisualGridClient({
      showLogs: true,
    processPageAndSerialize = `(${await getProcessPageAndSerializeScript()})()`
  after(() => {
    await browser.close()
    return Promise.all(closePromises)
  let checkWindow, close
  beforeEach(async () => {
    ;({checkWindow, close} = await visualGridClient.openEyes({
      appName: 'visual grid client with a cat',
      testName: 'visual-grid-client test',
  afterEach(() => closePromises.push(close()))
  it('should work', async () => {
    await page.goto('index.html')
    const {cdt, url, resourceUrls, blobs, frames} = await page.evaluate(processPageAndSerialize)
    const resourceContents ={url, type, value}) => ({
      value: Buffer.from(value, 'base64'),
      tag: 'first test',
      target: 'region',
      fully: false,


Generating a changelog

The best way is to run npm run changelog. The prerequisite for that is to have jq installed, and also define the following in git configuration:

git config changelog.format "* %s - %an [[%h](]"


npm i @applitools/visual-grid-client

Downloadsweekly downloads








last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability