CodeceptJS

Setting up Visual Knight with CodeceptJS

Working project setup with CodeceptJS is required!

If you have no working setup with CodeceptJS please follow this link: https://codecept.io/quickstart/

Install the Visual Knight CodeceptJS extension:

$ npm install @visual-knight/codeceptjs -D 

After the installation you just need to put an extra helper to the CodeceptJS configuration:

codeceptjs.json

{
    ...
    "helpers": {
        ...
        "VisualKnight": {
            "require": "@visual-knight/codeceptjs",
            "key": "YOUR_API_KEY",
            "project": "YOUR_PROJECT_ID OR PROJECT_NAME",
            ...
            // more can be found in the core documentation
        }
    }
}

API Key

1. Go to your profile

2. Click on the button "Api Key" under your avatar to copy the key to your clipboard

Now we are ready to use Visual Knight with CodeceptJS

We extend the CodeceptJS Helpers with the following method:

/**
 * @param testName {string} Is provided to visual knight (must be unique)
 * @param options {ScreenshotOptions} Contains additional settings
 */
I.compareFullpageScreenshot(testName, options)
/**
 * @param testName {string} Is provided to visual knight (must be unique)
 * @param options {ScreenshotOptions} Contains additional settings
 */
I.compareViewportScreenshot(testName, options)
/**
 * @param cssSelector {string} Is provided to visual knight
 * @param testName {string} Is provided to visual knight (must be unique)
 * @param options {ScreenshotOptions} Contains additional settings
 */
I.compareElementScreenshot(cssSelector, testName, options)

/*
ScreenshotOptions {
  hide?: string[] // Array of css selectors which gets hidden by "opacity: 0",
  remove?: string[] // Array of css selectors which gets hidden by "display: none",
  additional?: object // Data is saved as relation to the variation. (Future: can be used for filtering)
}
*/

If you use hide or remove, the elements are set to the previous value back after the screenshot.

Current integrations of CodeceptJS Helpers are WebdrvierIO, Puppeteer, Protractor, Nightmare