Playwright VisualTest Plugin

$3

Click here for more detailed docs on SmartBear's website

Setup

``shell npm install @smartbear/visualtest-playwright --save-dev npx visualtest-setup`Enter your projectToken in the newly created`visualTest.config.js` file:

`javascript module.exports = {projectToken: 'PROJECT_TOKEN'}`

**

`Implementation`

javascript
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 })`

`$3`

javascript
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,
        });
});

$3

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

$3

javascript
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"
    });
});

$3

javascript
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
    });
});

$3

javascript
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

javascript
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
});


File Testing

javascript
test('test creating a pdf and then checking the a key value pair', async ({page}) => {
    await page.goto('https://smartbear.github.io/visual-testing-example-website/Example4/Original/index.html');
    const pdf = await page.pdf();
    const pdfKeyValuePairs = (await sbvtSendFile(pdf, 'file-name'))
    console.log('KVPs: ',pdfKeyValuePairs);
    expect(pdfKeyValuePairs["New User"]).toEqual('34567');
});


Assigning captures to a test group name

javascript   
//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

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

`Assigning SCM data to a test run`

Save Source Control Manager data on the environment variable`bash SBVT_SCM_BRANCH=branch-name SBVT_SCM_COMMIT_ID=commit-hash``