## 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

```text
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