test(e2e): store images in webp format

e2e/package.json

@@ -20,6 +20,7 @@
     "jest-image-snapshot": "^6.4.0",
     "jest-puppeteer": "^10.0.1",
     "puppeteer": "^22.10.0",
+    "sharp": "^0.33.4",
     "stucumber": "^0.19.0"
   }
 }

e2e/setup/scenarios.screenshot.ts

@@ -1,18 +1,33 @@
+import sharp from 'sharp';
 import {cucumber} from '../transformer/gherkin';
 
 import type {TestEnv} from './scenarios.env';
 import type {MatchImageSnapshotOptions} from 'jest-image-snapshot';
+import type {ScreenshotOptions} from 'jest-environment-puppeteer/node_modules/@types/puppeteer';
 
 const DIFF_CONFIG: MatchImageSnapshotOptions = {
   customDiffDir: '.diff'
 };
 
+async function pushWebPScreenshot(screenshots: (string | Buffer)[], options: ScreenshotOptions = {}): Promise<void> {
+  const screenshotBuffer = await page.screenshot(options);
+  const webpScreenshot = await sharp(screenshotBuffer).webp({lossless: true}).toBuffer();
+  screenshots.push(webpScreenshot);
+}
+
+async function popPNGScreenshot(screenshots: (string | Buffer)[]): Promise<Buffer> {
+  const webpImage = screenshots.pop();
+  return sharp(webpImage).png().toBuffer();
+}
+
+// Define rule to take a screenshot and convert it to WebP
 cucumber.defineRule('take a screenshot', async ({screenshots}: TestEnv) => {
-  screenshots.push(await page.screenshot());
+  await pushWebPScreenshot(screenshots);
 });
 
+// Define rule to take a full-page screenshot and convert it to WebP
 cucumber.defineRule('take a screenshot of a full page', async ({screenshots}: TestEnv) => {
-  screenshots.push(await page.screenshot({fullPage: true}));
+  await pushWebPScreenshot(screenshots, {fullPage: true});
 });
 
 cucumber.defineRule('scroll to the element', async ({elements}: TestEnv) => {
@@ -29,14 +44,14 @@ cucumber.defineRule('take a screenshot of the element', async ({elements, screen
   screenshots.push(await element.screenshot());
 });
 
-cucumber.defineRule('check if the screenshot is exactly equal to the snapshotted version', ({screenshots}: TestEnv) => {
+cucumber.defineRule('check if the screenshot is exactly equal to the snapshotted version', async ({screenshots}: TestEnv) => {
   if (!screenshots.length) throw new Error('E2E: there is no any screenshot, make sure you have "Take a screenshot" before');
-  const image = screenshots.pop();
+  const image = await popPNGScreenshot(screenshots);
   expect(image).toMatchImageSnapshot(DIFF_CONFIG);
 });
 
-cucumber.defineRule('check if the screenshot is equal to the snapshotted version', ({screenshots}: TestEnv) => {
+cucumber.defineRule('check if the screenshot is equal to the snapshotted version', async ({screenshots}: TestEnv) => {
   if (!screenshots.length) throw new Error('E2E: there is no any screenshot, make sure you have "Take a screenshot" before');
-  const image = screenshots.pop();
+  const image = await popPNGScreenshot(screenshots);
   expect(image).toMatchImageSnapshot({failureThreshold: 1000, blur: .005, comparisonMethod: 'ssim', failureThresholdType: 'pixel', ...DIFF_CONFIG});
 });