A library that drives the visual grid with dom snapshot rendering.
npm install @applitools/visual-grid-client
Using the package
const makeVisualGridClient =
See below for the full API.
- To create a visualGridClient, call
const makeVisualGridClient =const visualGridClient =
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.
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.
openEyesaccepts 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
awaitthe 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
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/cdtformat (see below). you can use
domNodesToCdtto create a CDT from a
target: the target of the rendering. Can be one of
fully: set wehn
truethen snapshot is full page, if
falsethen snapshot is viewport.
selector: if the
region, this is the selector we are targetting.
region: if the
region, this is the region we are targetting. This is an object with
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
urlproperty). The value is an object with the following properties:
url: yes, again.
type: the content type of the resource.
Bufferof 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.
throwEx parameters, and returns a promise.
- If throwEx = true (default) :
- If all tests defined in the
openEyespass then the promise is resolved with Array<TestResults>.
- If there are differences found in some tests defined in
openEyesthen 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 all tests defined in the
- If throwEx = false :
- The promise is always resolved with Array<TestResults|Error>.
The CDT format
domNodes:nodeType: number // like in the DOM StandardnodeName: ‘...’ // for elements and DocumentTypenodeValue: ‘...’ // for text nodesattributes: name value ...childNodeIndexes: index index ...//...resources:hashFormat: 'sha256' // currently the only hash format allowedhash: '....' // 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
- 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 =const fs =const makeVisualGridClient =const getProcessPageAndSerializeScript =const puppeteer =
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]()]"