taiko-eyes
v0.0.3
Published
Applitools Eyes SDK for Taiko.js
Downloads
7
Maintainers
Readme
taiko-eyes
Applitools API key
In order to authenticate via the Applitools server, you need to supply the Taiko-Eyes SDK with the API key you got from Applitools. Read more about how to obtain the API key here.
Installation
npm install taiko-eyes --save
To to this, set the environment variable APPLITOOLS_API_KEY
to the API key before running your tests.
For example, on Linux/Mac:
export APPLITOOLS_API_KEY=<your_key>
And on Windows:
set APPLITOOLS_API_KEY=<your_key>
It's also possible to specify the API key in the fixtures/applitools.config.js
file. The property name is apiKey
. For example:
module.exports = {
apiKey: 'YOUR_API_KEY',
...
}
Example
const { openBrowser, goto, closeBrowser, eyes } = require('taiko');
const { taikoEyes } = eyes;
jest.setTimeout(130000);
beforeEach(async () => {
await openBrowser({ headless: true });
await taikoEyes.open({
appName: 'Taiko Eyes!',
testName: 'Taiko Visual Test!',
});
});
afterEach(async () => {
await taikoEyes.close();
await closeBrowser();
});
after(async () => {
await taikoEyes.waitForResults();
});
test('Should set item in storage', async () => {
await goto('https://gauge.org/');
await taikoEyes.checkWindow();
});
Best practice for using the SDK
Every call to taikoEyes.open
and taikoEyes.close
defines a test in Applitools Eyes, and all the calls to taikoEyes.checkWindow
between them are called "steps". In order to get a test structure in Applitools that corresponds to the test structure in taiko, it's best to open/close tests in every it
call. This can be done via the beforeEach
and afterEach
.
Commands
Open
Create an Applitools test. This will start a session with the Applitools server.
taikoEyes.open({
appName: '',
testName: ''
});
Check window
Generate a screenshot of the current page and add it to the Applitools Test.
taikoEyes.checkWindow();
waitForResults
Wait until all tests in the suite are completed and return their results. Note that if you don't wait for the tests to be completed then in case of a visual test failure, eyes cannot fail the test.
- it is recommended to wait for the results in the
afterAll()
hook.
await taikoEyes.waitForResults()
Arguments to taikoEyes.checkWindow
tag
(optional): A logical name for this check.
target
(optional): Possible values are: 1.
window
This is the default value. If set then the captured image is of the entire page or the viewport, usefully
for specifying whatwindow
mode to use. 2.region
If set then the captured image is of the parts of the page, use this parameter withregion
orselector
for specifying the areas to captured.fully
(optional) In case
target
iswindow
, iffully
istrue
(default) then the snapshot is of the entire page, iffully
isfalse
then snapshot is of the viewport.// Capture viewport only taikoEyes.checkWindow({ target: 'window', fully: false, });
selector
(optional): In case
target
isregion
, this should be the actual css or xpath selector to an element, and the screenshot would be the content of that element. For example:Using a css selector taikoEyes.checkWindow({ target: 'region', selector: { type: 'css', selector: '.element-to-locate' } }); Using an xpath selector taikoEyes.checkWindow({ target: 'region', selector: { type: 'xpath', selector: '//button' } }); The shorthand string version defaults to css selectors taikoEyes.checkWindow({ target: 'region', tag: 'Step1', sizeMode: 'selector', selector: '.action-element', });
region
(optional): In case
target
isregion
, this should be an object describing the region's coordinates for capturing the image. For example:taikoEyes.checkWindow({ target: 'region', region: {top: 100, left: 0, width: 1000, height: 200} });
ignore
(optional): A single or an array of regions to ignore when checking for visual differences. For example:
taikoEyes.checkWindow({ ignore: [ {top: 100, left: 0, width: 1000, height: 100}, {selector: '.some-div-to-ignore'} ] });
floating
(optional): A single or an array of floating regions to ignore when checking for visual differences. More information about floating regions can be found in Applitools docs here. For example:
taikoEyes.checkWindow({ floating: [ {top: 100, left: 0, width: 1000, height: 100, maxUpOffset: 20, maxDownOffset: 20, maxLeftOffset: 20, maxRightOffset: 20}, {selector: '.some-div-to-float', maxUpOffset: 20, maxDownOffset: 20, maxLeftOffset: 20, maxRightOffset: 20} ] });
layout
(optional): A single or an array of regions to match as layout level. For example:
taikoEyes.checkWindow({ layout: [ {top: 100, left: 0, width: 1000, height: 100}, {selector: '.some-div-to-test-as-layout'} ] });
strict
(optional): A single or an array of regions to match as strict level. For example:
taikoEyes.checkWindow({ strict: [ {top: 100, left: 0, width: 1000, height: 100}, {selector: '.some-div-to-test-as-strict'} ] });
scriptHooks
(optional): A set of scripts to be run by the browser during the rendering. It is intended to be used as a means to alter the page's state and structure at the time of rendering. An object with the following properties:
beforeCaptureScreenshot
: a script that runs after the page is loaded but before taking the screenshot. For example:taikoEyes.checkWindow({ scriptHooks: { beforeCaptureScreenshot: "document.body.style.backgroundColor = 'gold'" } })
Close
Close the applitools test and check that all screenshots are valid.
It is important to call this at the end of each test, symmetrically to eyesOpen
(or in afterEach()
Close receives no arguments.
await taikoEyes.close();