what’s the best way to go about visual comparison
This thread is trying to answer question "How do I execute a screenshot test using Playwright without it failing?"
Call log:
- expect.toHaveScreenshot(landingpage.png) with timeout 60000ms
- generating new stable screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- 498 pixels (ratio 0.01 of all image pixels) are different.
Error: Screenshot comparison failed:
Expected an image 1280px by 720px, received 1280px by 10878px. 12825961 pixels (ratio 0.93 of all image pixels) are different.
Call log:
- expect.toHaveScreenshot(landingpage.png) with timeout 60000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- Expected an image 1280px by 720px, received 1280px by 10878px. 12826060 pixels (ratio 0.93 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- captured a stable screenshot
- Expected an image 1280px by 720px, received 1280px by 10878px. 12825961 pixels (ratio 0.93 of all image pixels) are
Related Ask AI answer for "What are the steps to perform a screenshot test using Playwright?".
Answer
Running a Screenshot Test with Playwright
First off, make sure you've got Playwright installed in your project. If not, you can add it with this command:
npm install @playwright/testNext, create a test file, say example.spec.ts, and import the necessary functions:
import { test, expect } from '@playwright/test';Now, define a test case. Here's an example:
test('example test', async ({ page }) => {
// Your test code goes here
});In the callback function, navigate to the webpage you want to test:
await page.goto('https://ray.run');To capture a screenshot of the entire page, use the page.screenshot method:
await page.screenshot({ path: 'screenshot.png' });This will save a full-page screenshot as "screenshot.png" in your project directory. If you want to capture screenshots of specific elements, use locators:
await page.locator('.header').screenshot({ path: 'header-screenshot.png' });This captures a screenshot of an element with class "header". You can customize your screenshots with additional parameters to page.screenshot.
Finally, run your screenshot tests with the Playwright test runner:
npx playwright testOn first run, Playwright Test generates reference screenshots. Subsequent runs compare against these and report differences. Remember to review and update your screenshots when necessary with the --update-snapshots flag. Happy testing!
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.