JavaScript Selenium VisualTest Plugin

Documentation

Click here for more detailed docs on SmartBear's website

Setup

npm install @smartbear/visualtest-selenium --save-dev
npx visualtest-setup

Enter your projectToken in the newly created visualTest.config.js file:

module.exports = {projectToken: 'PROJECT_TOKEN'}

Implementation

const {Builder, Browser} = require('selenium-webdriver');
const {sbvtCapture, sbvtGetTestRunResult, sbvtPrintReport} = require("@smartbear/visualtest-selenium");
const assert = require("assert");

(async () => {
    const driver = await new Builder().forBrowser(Browser.FIREFOX).build();
    await driver.get('https://selenium.dev/')
    await sbvtCapture(driver, 'Selenium Example Page')

    const element = await driver.findElement({css: '.row'});
    await sbvtCapture(driver, 'element', {
        element
    });

    await sbvtCapture(driver, 'Homepage viewport', {
        viewport: true
    })

    await sbvtPrintReport(); //print out the results of the comparison

    const sbvtReport = await sbvtGetTestRunResult();
    assert(sbvtReport.failed === 0); //assert for no comparison differences
})();

lazyload fullpage capture

await sbvtCapture(driver, 'Lazy loaded', {
    lazyload: 1000 //1 second
})

viewport capture

await sbvtCapture(driver, 'Viewport Capture', {
    viewport: true
})

element capture

await driver.get('https://selenium.dev/')
const element = await driver.findElement({css: '.row'});
await sbvtCapture(driver, 'element', {
    element
});

ignore element capture

    await driver.get('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(driver, 'element-hero-content-capture', {
        ignoreElements: [".ud-hero-content"], //input CSS selectors as an array
    });

layout mode capture

await driver.get('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
await sbvtCapture(driver, 'layout-mode', {
    comparisonMode: 'layout',
    sensitivity: 'low', // 'medium', or 'high'
    lazyload: 250
});

sbvtPrintReport & sbvtGetTestRunResult

await driver.get('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
await sbvtCapture(driver, 'fullpage-capture', {
    lazyload: 250
});
const testRunResults = await sbvtGetTestRunResult() //testRunResults will have the pass/fail data on it incase you want to fail the run on a comparison failure
await sbvtPrintReport() // prints the comparison data for the test run

Assigning captures to a test group name

//visualtest.config.js
module.exports = {
    projectToken: 'PROJECT_TOKEN',
    testGroupName: 'test group name'
}
// OR save on the environment variable 
// SBVT_TEST_GROUP_NAME = 'test group name'