Make screenshots with a test from a demo account

How to do it

Hand-made screenshots go stale with the next design change, and they leak whatever was on screen. A browser driver, such as Playwright, opens each screen and saves the image under a fixed name. The docs reference those names, so a removed screen fails the docs build. Write alt text for each image, as Make docs pages pass the same accessibility checks as the product says. Keep the data made up, as Use only made-up data in docs requires. The same test can compare screens over time, as Compare screenshots of every component state describes.

Examples

JavaScript example

import { test } from '@playwright/test';

test('refund-dialog', async ({ page }) => {
  await page.goto('https://demo.example.com/orders/10423');
  await page.getByRole('button', { name: 'Refund' }).click();
  await page.screenshot({ path: 'docs/images/screens/refund-dialog.png' });
});

Python example

from playwright.sync_api import Page

def test_refund_dialog(page: Page) -> None:
    page.goto("https://demo.example.com/orders/10423")
    page.get_by_role("button", name="Refund").click()
    page.screenshot(path="docs/images/screens/refund-dialog.png")

How to check

Every image under docs/images/screens/ has a test with the same name that produces it. The release job reruns the tests, and a script finds no screenshot older than the last release.

Related rules

• DOC-23 Use only made-up data in docs in Documentation
• DOC-28 Make docs pages pass the same accessibility checks as the product in Documentation
• APP-55 Compare screenshots of every component state in Web app interface