← Back to Discord Forum

In the screenshot element is different than actually is


I'm doing screenshot testing using playwright, and element in chrome and webkit look different from what they should have. In firefox element looks correctly. I've tried adding to allow animation (toHaveScreenshot(${$testInfo.title}.png, {animations: "allow"});), but it didn't help. Also tried just adding few seconds before taking the screenshot.

Issue seems to be with await expect(page.getByTestId(locator)).toHaveScreenshot(), because await expect(page).toHaveScreenshot(); creates correct screenshot

Perhaps anyone has some ideas what might be causing the difference?

This thread is trying to answer question "What might be causing the difference in element appearance during screenshot testing using Playwright in Chrome and Webkit compared to Firefox?"

2 replies






Understanding Differences in Element Appearance Across Browsers in Playwright

Hey there! If you're noticing differences in how an element looks in Chrome and Webkit compared to Firefox during screenshot testing using Playwright, it's likely due to a few factors.

Rendering Engines

Firstly, the rendering engine used by each browser can cause variations. Chrome and WebKit use different rendering engines compared to Firefox. These engines interpret CSS styles and layout properties differently, leading to variations in element display.


Secondly, the availability and rendering of fonts can differ across browsers. This can affect the appearance of text elements on your webpage.

Default CSS Settings

Lastly, each browser has its own default settings for various CSS properties. These settings can impact the visual presentation of elements if they're not explicitly defined in your CSS stylesheets.

Handling Differences

To handle these differences, Playwright provides options for modifying screenshot comparison behavior using the pixelmatch library. For example, you can adjust the maxDiffPixels option to control the comparison algorithm's strictness.

import { test } from '@playwright/test';

test('screenshot test', async ({ page }) => {
  await page.goto('https://ray.run/');
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot('snapshot.png', { maxDiffPixels: 100 });

It's also recommended to create separate snapshots for each browser/platform combination. This ensures accurate reference images for comparison specific to each environment.

So, differences in element appearance across browsers during screenshot testing using Playwright can be attributed to rendering engines, font support, default CSS settings, and other factors. By creating separate snapshots for each browser/platform combination, you can ensure accurate comparisons during testing. Happy testing!

Related Discord Threads

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.