A library that drives the visual grid with dom snapshot rendering.
npm install @applitools/visual-grid-client
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 bymakeVisualGridClient
, 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 toawait
the promises returned fromclose()
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 byopenEyes
. -
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 thex-applitools-html/cdt
format (see below). you can usedomNodesToCdt
to create a CDT from adocument
.sizeMode
: the target of the rendering. Can be one ofviewport
,full-page
,selector
,region
selector
: if thesizeMode
is selector, this is the selector we are targetting.region
: if thesizeMode
is region, this is the region we are targetting. This is an object withx
,y
,width
,height
properties.ignore
: TBDfloating
: TBDstrict
: TBDlayout
: TBDsendDom
: TBDscriptHooks
: 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 theurl
property). The value is an object with the following properties:url
: yes, again.type
: the content type of the resource.value
: aBuffer
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 no parameters, and returns a promise.
- The promise will be resolved (with
undefined
as value) if all tests defined in theopenEyes
passed. - The promise will be rejected (with
DiffsFoundError
as defined in Applitools Eyes SDK Core) if there were differences found in some tests defined in theopenEyes
.
{
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 = blobs.map(({url, type, value}) => ({
url,
type,
value: Buffer.from(value, 'base64'),
}));
checkWindow({
tag: 'first test',
sizeMode: 'viewport',
url,
cdt,
resourceUrls,
resourceContents,
frames
})
})
})
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](https://github.com/applitools/visual-grid-client/commit/%H)]"