Click here for more detailed docs on SmartBear's website
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'}
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
})
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,
});
});
test('take a viewport snapshot', async ({page}) => {
await page.goto('https://smartbear.com');
await sbvtCapture(page, 'sb-viewport', {
viewport: true
});
});
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"
});
});
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
});
});
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'
});
});
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
});
//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'
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
});