As a base, I am using the playwright-samle and the “playwright-smartui.js” as a starting point.
Our use case is to compare the live version with the development or staging version of the project.
The idea is to always create a baseline snapshots on the production server and then create the snapshots to compare on the dev-version. But with the default setup, only the first screenshot will automatically be the baseline and all following will be diffs unless you make one the baseline manually in the project view.
Is there a way to tell smartUI to make a new baseline programatically?
Hi Globaltrados,
Thank you for providing details about your use case with Playwright-SmartUI. I understand your requirement for automating the creation of new baseline snapshots programmatically.
Here’s a general approach you can consider to programmatically create new baseline snapshots and automate comparisons between the live and development or staging versions of your project:
const { chromium } = require(‘playwright’);
const fs = require(‘fs’);
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
Step 1: Capture baseline screenshot on production
await page. goto(‘https://production-url.com’);
const baselineScreenshot = await page.screenshot();
fs.writeFileSync(‘baseline.png’, baselineScreenshot);
Step 2: Transition to development/staging
await page.goto(‘https://dev-url.com’);
Step 3: Capture dev version screenshots
const devScreenshot = await page.screenshot();
Step 4: Image comparison (using Pixelmatch or similar)
Step 5: Conditional baseline update
if (hasDifferences(baselineScreenshot, devScreenshot)) {
fs.writeFileSync(‘baseline.png’, devScreenshot);
}
Thanks