how to test print stylesheets in cypress or playwright

TL;DR

Browsers render @media print styles only when told to, so e2e tests must emulate print media first. In Playwright use page.emulate_media(media="print"); in Cypress use a plugin or inject the print stylesheet state before snapshotting. Then capture a PDF or screenshot and compare against a baseline, and separately assert that print-specific rules (hidden nav, page breaks) are applied. Two layers: the CSS rules are correct, and the rendered output looks right.

The query

how to test print stylesheets in cypress or playwright

Use this when

• Invoices, reports, or tickets must print correctly.
• A redesign risks breaking print layouts silently.

Not for

• Testing physical printers.
• Screen-only responsive design.

Steps

1. Emulate print media in the test (Playwright: page.emulate_media; Cypress: plugin or manual class toggle). Expected output: print styles are active in the page.
2. Assert key print rules: navigation hidden, page-break rules present, print-only content visible. Expected output: rule-level checks pass.
3. Capture a PDF or full-page screenshot in print mode. Expected output: an artifact representing the printed page.
4. Compare the artifact against a checked-in baseline. Expected output: a pass, or a diff to review.
5. Keep one test that renders the real print dialog path (Ctrl+P handler) if your app overrides it. Expected output: the app's print flow itself is covered.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_GeGDUlIXBCYrEEl17FwMuA