VocalHyre
Sign up

Playwright · Reliable end-to-end tests

How do you capture screenshots and videos?

EasyscreenshotsvideoartifactsUpdated Oct 2026
Quiz this track

Short answer

Use page.screenshot() or locator.screenshot() for images, and set video in the context or config to record a test. Disable animations and mask dynamic content for stable output.

Screenshots are useful evidence and, with toHaveScreenshot, an assertion mechanism. Videos are mainly a debugging aid. Both are configured per context, so a test runner can record them automatically without changing the test body.

ts
await page.screenshot({ path: "artifacts/home.png", fullPage: true });

await page.getByRole("dialog").screenshot({
  path: "artifacts/dialog.png",
  animations: "disabled",
});
Page screenshots capture the viewport or full page; locator screenshots crop to one element.
ts
use: {
  screenshot: "only-on-failure",
  video: "retain-on-failure",
},
The config records artifacts only when they are likely to be useful, saving disk and CI time.

Options that matter

  • fullPage: true captures the whole scrollable page
  • animations: "disabled" freezes CSS animations and transitions
  • mask hides dynamic regions such as timestamps or avatars
  • clip captures a specific rectangle when a locator is not precise enough
  • scale: "css" keeps screenshots at CSS pixel size on high-DPI displays

For visual assertions, prefer expect(page).toHaveScreenshot() over a manual screenshot comparison. It manages baselines, applies the configured diff tolerance and produces a report with expected, actual and diff images.

Video and screenshots can contain personal or session data, especially in authenticated flows. Upload them only to trusted artifacts and set a short retention period in CI.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

  1. 1What is the difference between a page and locator screenshot?
  2. 2When would you use video retain-on-failure?
  3. 3How do you hide dynamic content in a screenshot?
  4. 4Why prefer toHaveScreenshot for visual assertions?

Say it in the interview

I take page or locator screenshots for evidence, and I configure video and screenshot policies in the use block so tests do not manage artifacts themselves. For stable images I disable animations and mask dynamic regions. When the image is the assertion, I use toHaveScreenshot because it handles baselines and diffs. I also remember that these artifacts can contain sensitive session data.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Related questions

MediumWhat is a Playwright trace and how do you use it?MediumHow does visual testing work with toHaveScreenshot?MediumHow do you debug a failing Playwright test?

Reading is step one

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Playwright mock interview and get scored feedback on depth, clarity and confidence.

Start a free Playwright interviewBrowse all questions