dx: avoid failing e2e tests when a screenshot is missing
Massimo Melina committed
May 2, 2026 at 00:34 UTC
485865c6ad1cc171da026a195f6109d16754b0b0
1 file changed
+28
-1
e2e/frontend.spec.ts
+28
-1
@@ -5,6 +5,9 @@ import {
5
clickAdminMenu, clickIconBtn, forwardConsole, loginAdmin, password, resetTimestamp, FRONTEND_URL, username
6
} from './common'
7
8
+const screenshotStyle = fs.readFileSync('e2e/screenshot.css', 'utf8')
9
+const screenshotCounters = new WeakMap<object, number>()
10
+
11
// a generic test touch several parts
12
test('around1', async ({ page }) => {
13
forwardConsole(page)
@@ -299,10 +302,34 @@ test('admin1', async ({ page }) => {
302
303
async function screenshot(page: Page, selectorForMask = '') {
304
if (process.env.NO_SS) return
305
+ const testInfo = test.info()
306
+ const snapshotName = nextScreenshotName(testInfo)
307
+ const snapshotPath = testInfo.snapshotPath(snapshotName, { kind: 'screenshot' })
308
if (selectorForMask)
309
selectorForMask = ',' + selectorForMask
310
await wait(1000) // this accounts especially for our DataTable component which takes time to set the layout
305
- return expect(page).toHaveScreenshot({ fullPage: true, mask: [page.locator(`.maskInTests${selectorForMask}`)] })
311
+ const mask = [page.locator(`.maskInTests${selectorForMask}`)]
312
+ // write the missing baseline ourselves so Playwright does not turn the first run into a failure
313
+ if (!fs.existsSync(snapshotPath)) {
314
+ await page.screenshot({
315
+ path: snapshotPath,
316
+ fullPage: true,
317
+ mask,
318
+ animations: 'disabled',
319
+ caret: 'hide',
320
+ scale: 'css',
321
+ style: screenshotStyle,
322
+ })
323
+ return
324
+ }
325
+ return expect(page).toHaveScreenshot(snapshotName, { fullPage: true, mask })
326
+}
327
+
328
+function nextScreenshotName(testInfo: ReturnType<typeof test.info>) {
329
+ const nextIndex = (screenshotCounters.get(testInfo) ?? 0) + 1
330
+ screenshotCounters.set(testInfo, nextIndex)
331
+ const testName = testInfo.titlePath.slice(1).join(' ')
332
+ return `${testName}-${nextIndex}.png`
333
}
334
335
test('anew', async ({ page, browserName }) => {