feat: add runScreenshotTests helper to test/screenshots.ts

[nicomiguelino]

Summary

The same screenshot test boilerplate is duplicated across multiple Edge Apps (rss-reader-app, simple-table-app, and others). A shared captureScreenshot helper in src/test/screenshots.ts would reduce repetition while keeping test() calls in the spec files for correct Playwright source reporting.

Repeated pattern

Every app's e2e spec contains the same browser setup and screenshot capture block:

for (const { width, height } of RESOLUTIONS) {
  test(`screenshot ${width}x${height}`, async ({ browser }) => {
    const context = await browser.newContext({ viewport: { width, height } })
    const page = await context.newPage()

    await setupClockMock(page)
    await setupScreenlyJsMock(page, screenlyJsContent)
    // app-specific route mocks...

    await page.goto('/')
    await page.waitForLoadState('networkidle')

    await page.screenshot({
      path: path.join(screenshotsDir, \`\${width}x\${height}.png\`),
      fullPage: false,
    })

    await context.close()
  })
}

Proposed API

captureScreenshot(
  browser: Browser,
  width: number,
  height: number,
  filenamePrefix: string,
  screenlyJsContent: string,
  setupMocks: (page: Page) => Promise<void>,
): Promise<void>

Usage in spec files:

for (const { width, height } of RESOLUTIONS) {
  test(`screenshot ${width}x${height}`, async ({ browser }) => {
    await captureScreenshot(browser, width, height, 'my-app', screenlyJsContent, async (page) => {
      await page.route('**/api**', ...)
    })
  })
}

Keeping test() in the spec file ensures Playwright reports the correct source location in test output. setupMocks as a callback keeps the helper generic.

Apps that would benefit

• Screenly/rss-reader-app
• Screenly/Playground (simple-table-app and others)