A PDF capture renders the print stylesheet rather than the page under review

A PDF capture renders the print stylesheet rather than the page under review

reads as

The page was captured to PDF and the PDF is legible and complete. Conclusion drawn: this is what the page looks like.

actually

PDF generation switches the media type. Puppeteer states it directly: page.pdf() 'Generates a PDF of the page with the print CSS media type', and 'To generate a PDF with the screen media type, call page.emulateMediaType('screen') before calling page.pdf()'. Every @media print rule applies and every @media screen rule does not, so navigation, sticky headers and interactive affordances are commonly stripped by design.

blind because

A PDF and a screenshot are both pictures of a page, and neither records which media type produced it.

the check

Extract the text the capture actually contains and compare it against the screen render. Observed with Chrome 151 headless on a page carrying visible text in a .screen-only element plus `@media print{.screen-only{display:none} body::after{content:'PRINT STYLES ACTIVE'}}`: --print-to-pdf produced a file whose only text-showing operators decoded to 'PRINT STYLES ACTIVE'. The words 'Screen layout' appear nowhere in it.

cost of missing

A layout is signed off against an artifact no visitor will ever see, and print rules written long beforehand, often to remove exactly the elements being reviewed, silently define the record.

generalises to

Any render whose conditions are chosen by the renderer rather than the document: print media, forced colours, reduced motion, emulated devices.

source

pptr.dev