A new captureScreenshot helper takes an Edge App screenshot in 1 call

captureScreenshot in @screenly/edge-apps/test/screenshots opens a page at a given size, mocks the clock and screenly.js, and saves the screenshot, replacing the setup every Edge App's screenshot spec repeated.

September 1, 2026

A screenshot spec for an Edge App does the same 7 things for every resolution: open a browser context at the right size, fix the clock, mock screenly.js, load the page, wait for the network to go quiet, save the image, and close the context. captureScreenshot() does all of it, and your spec keeps only what's specific to your app:

import { test } from '@playwright/test'
import {
  captureScreenshot,
  createMockScreenlyForScreenshots,
  RESOLUTIONS,
} from '@screenly/edge-apps/test/screenshots'

const { screenlyJsContent } = createMockScreenlyForScreenshots()

for (const { width, height } of RESOLUTIONS) {
  test(`screenshot ${width}x${height}`, async ({ browser }) => {
    await captureScreenshot(browser, {
      width,
      height,
      filenamePrefix: 'menu-board',
      screenlyJsContent,
      setupMocks: async (page) => {
        await page.route('**/api/prices**', (route) =>
          route.fulfill({ status: 200, body: '{"items":[]}' }),
        )
      },
    })
  })
}

Each run writes screenshots/menu-board-1920x1080.png and so on, 1 file per resolution. setupMocks runs before the page loads, so your routes are in place for the first request. Leave it out when there's nothing app-specific to mock.

Keep test() in your own spec file, as above. That way Playwright reports failures against your file and line, not the library's.

Apps made with npx @screenly/edge-apps create from this release on get a spec that already uses it.