Каков хороший способ сделать тесты скриншотов с помощью Playwright?

#javascript #e2e-testing #playwright

#javascript #e2e-тестирование #playwright

Вопрос:

Каков хороший способ сделать тест скриншотов с помощью playwright?

Если я правильно понимаю, мне нужно сделать скриншот, как показано ниже:

 it('Some test', async () => {
    page.screenshot({ path: 'screenshot.png' });
}

Но как я могу сравнить его с эталонными скриншотами?
Если я что-то пропустил в документах, дайте мне знать, пожалуйста

1. Вы пытаетесь выполнить регрессионные тесты, сравнивающие изображения?

2. ДА. В результате я хотел бы получить что-то вроде этого: npmjs.com/package/jest-image-snapshot Я думаю, это возможно, но у меня есть идея, как мне нужно это сделать

Ответ №1:

судя по тому, что команда Playwright начала разрабатывать собственный тестовый раннер, который может сравнивать скриншоты:

playwright-test#визуальные сравнения

 import { it, expect } from "@playwright/test";

it("compares page screenshot", async ({ page, browserName }) => {
  await page.goto("https://stackoverflow.com");
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot(`test-${browserName}.png`, { threshold: 0.2 });
});

они не планируют добавлять такую функциональность непосредственно в Playwright

1. У меня был хороший опыт работы с playwright-test, но для других, пожалуйста, обратите внимание: «Бегун теста Playwright доступен в режиме предварительного просмотра, и могут произойти незначительные критические изменения». В API довольно много изменений, и это может вызвать некоторые накладные расходы на обслуживание.

Ответ №2:

Playwright toHaveScreenshot и toMatchSnapshot отлично подходят, если вы хотите сравнить текущий скриншот со скриншотом из предыдущего тестового запуска, но если вы хотите сравнить два скриншота, которые у вас есть в качестве буферов в памяти, вы можете использовать getComparator метод, который Playwright использует за кулисами:

 import { getComparator } from 'playwright-core/lib/utils';

await page.goto('my website here');
const beforeImage = await page.screenshot({
    path: `./screenshots/before.png`
});
//
// some state changes implemented here
//
const afterImage = await page.screenshot({
  path: `./screenshots/after.png`
});

const comparator = getComparator('image/png');
expect(comparator(beforeImage, afterImage)).toBeNull();

Преимущество использования getComparator заключается в том, что оно нечетко совпадает, и вы можете установить пороговое значение того, сколько пикселей может отличаться. Если вы просто хотите проверить, что PNG-файлы точно идентичны, очень простой способ проверить равенство между двумя скриншотами:

ожидайте(Buffer.compare(beforeImage, afterImage)) .toEqual(0)

Однако будьте осторожны — этот более простой метод ненадежен и чувствителен к разнице в один пиксель при рендеринге (например, если какие-либо анимации / переходы не завершены или если есть различия в сглаживании).