npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

taiko-eyes

v0.0.3

Published

Applitools Eyes SDK for Taiko.js

Downloads

7

Readme

taiko-eyes

npm

Build Status

codecov

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, use fully for specifying what window mode to use. 2. region If set then the captured image is of the parts of the page, use this parameter with region or selector for specifying the areas to captured.

  • fully

    (optional) In case target is window, if fully is true (default) then the snapshot is of the entire page, if fully is false then snapshot is of the viewport.

      // Capture viewport only
      taikoEyes.checkWindow({
        target: 'window',
        fully: false,
      });
  • selector

    (optional): In case target is region, 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 is region, 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();