I have two page that have same h1 elements, but different have different fontSize.
One of them is 20px, and another is 22px.
I am looking for comparing two page visually in playwright.
At first I have written the following code for capturing initial screenshots from urls:
import { test, expect } from "@playwright/test";
import { chromium } from "@playwright/test";
const playwright = require("playwright");
test("example test", async ({ page }) => {
const browser1 = await chromium.launch();
const browser2 = await chromium.launch();
const page1 = await browser1.newPage();
const page2 = await browser2.newPage();
await page1.goto("localhost:5500/index.html");
await page2.goto("localhost:5501/index.html");
await expect(page1).toHaveScreenshot();
await expect(page2).toHaveScreenshot();
});
After capturing screenshots, I have modified and added the following code to my test code to compare screenshots of page1 with page2:
import { test, expect } from "@playwright/test";
import { chromium } from "@playwright/test";
const playwright = require("playwright");
test("example test", async ({ page }) => {
const browser1 = await chromium.launch();
const browser2 = await chromium.launch();
const page1 = await browser1.newPage();
const page2 = await browser2.newPage();
await page1.goto("localhost:5500/index.html");
await page2.goto("localhost:5501/index.html");
expect(await page2.screenshot()).toMatchSnapshot("test2.png", {
maxDiffPixels: 10,
});
});
But, when i run the command npx playwright test
, Playwright can not recognize the differences between fontSize. However, when the difference value is much larger, it can be recognized!.
How can solve this problem?