arrow-left Back to topicQuizScreenshotsCheck yourself1.What's the difference between page.screenshot() and expect(page).toHaveScreenshot()?They do the same thing, toHaveScreenshot is just a newer APIscreenshot() saves to a file for debugging; toHaveScreenshot() compares against a saved golden image for visual regressiontoHaveScreenshot() takes higher quality images2.How do you capture a screenshot of the entire page, including content below the fold?await page.screenshot({ fullPage: true })await page.screenshot({ scroll: 'all' })await page.scrollToBottom(); await page.screenshot()await page.screenshot({ height: 'auto' })3.You want to capture only a specific region of the page — for example, a 400×200 pixel rectangle starting at coordinates (100, 50). Which option do you pass to page.screenshot()?{ region: { x: 100, y: 50, width: 400, height: 200 } }{ clip: { x: 100, y: 50, width: 400, height: 200 } }{ crop: { x: 100, y: 50, width: 400, height: 200 } }{ viewport: { x: 100, y: 50, width: 400, height: 200 } }4.How do you take a screenshot of a single element (e.g., a card component) rather than the whole page?await page.screenshot({ element: page.getByTestId('card') })await page.getByTestId('card').screenshot({ path: 'card.png' })await page.cropTo(page.getByTestId('card')).screenshot()You must use the clip option with manually measured coordinates5.Your page has a dynamic user avatar image that changes with every test run, causing visual regression tests to fail. How do you prevent the avatar from appearing in the screenshot?Use page.evaluate() to remove the avatar element from the DOM before screenshottingPass mask: [page.getByTestId('avatar')] to toHaveScreenshot() — the element is replaced with a solid box in the comparisonIncrease maxDiffPixelRatio to ignore the avatar regionSet screenshot: { ignoreElements: ['[data-testid=avatar]'] } in playwright.config.ts6.How do you configure Playwright to automatically save a screenshot only when a test fails?Add a try/catch block in every test and call page.screenshot() in the catchSet screenshot: 'only-on-failure' in the use section of playwright.config.tsSet screenshot: 'on-first-retry' in playwright.config.tsUse afterEach hook with a condition checking test.info().status7.Visual regression tests pass on your Mac but fail on the CI Linux runner due to slightly different font rendering. What is the recommended fix?Increase maxDiffPixelRatio to tolerate the font differences on all platformsRun visual tests inside a fixed Docker container so rendering is consistent regardless of where the test runsDisable font anti-aliasing in the browser launch optionsUse toHaveScreenshot on Linux and page.screenshot on Mac8.You update a UI component intentionally and now toHaveScreenshot() fails because the golden image is outdated. How do you update the golden images?Delete the snapshot files manually from the file systemRun npx playwright test --update-snapshots to regenerate all golden imagesRename the .png files with a -new suffix and Playwright will use them automaticallyIncrease maxDiffPixelRatio until the test passes againSubmit answersarrow-left PreviousTrace viewerPagesNext arrow-right