Playwright VisualTest Plugin

Documentation

Click here for more detailed docs on SmartBear's website

Setup

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

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

module.exports = {projectToken: 'PROJECT_TOKEN'}

Implementation

import {sbvtCapture, sbvtGetTestRunResult, sbvtPrintReport} from "@smartbear/visualtest-playwright";
import {expect, test} from "@playwright/test";

test(`should visit Playwright example page, then take sbvtCaptures`, async ({page}) => {
    await page.goto('https://playwright.dev/')
    await sbvtCapture(page, 'Playwright Example Page')
    await sbvtCapture(page, 'element', {
        elementCapture: ".hero"
    });
    await sbvtCapture(page, 'Homepage viewport', {
        viewport: true
    })

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

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

lazyload fullpage capture

test('test taking an element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'fullpage-capture',
        {
            lazyload: 250,
        });
});

viewport capture

test('take a viewport snapshot', async ({page}) => {
    await page.goto('https://smartbear.com');
    await sbvtCapture(page, 'sb-viewport', {
        viewport: true
    });
});

element capture

test('take an element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'element-hero-content-capture', {
        elementCapture: ".ud-hero-content"
    });
});

ignore element capture

test('ignore element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'element-hero-content-capture', {
        ignoreElements: [".ud-hero-content"], //input CSS selectors as an array
        lazyload: 250
    });
});

layout mode capture

test('layout mode comparison', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, 'layout-mode', {
        comparisonMode: 'layout',
        sensitivity: 'low', // 'medium', or 'high'
    });
});

sbvtPrintReport & sbvtGetTestRunResult

test('test taking an element sbvt capture', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    await sbvtCapture(page, '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'

Grouping Playwright workers together under one test run

Each worker process does not communicate with the other workers, this causes separate testRuns and makes grouping all the images into one testRun tough. To alleviate this, add the below line to your playwright.config file

//playwright.config
module.exports = defineConfig({
    globalSetup: '@smartbear/visualtest-playwright',
    // rest of your configurations  
});