PDF visual regression testing using Playwright (e.g. react-pdf)

register-fonts.ts

// Just to show what I had to deal with. Do NOT copy. React-pdf encourages you to import font from CDN directly.

import LatoBold from "../../../assets/fonts/Lato-Bold.ttf";
import LatoLight from "../../../assets/fonts/Lato-Light.ttf";
import Lato from "../../../assets/fonts/Lato-Regular.ttf";
import openSansFont from "../../../assets/fonts/OpenSans-Light.ttf";

export const PDF_BOLD_FONT_NAME = "Lato Bold";
export const PDF_LIGHT_FONT_NAME = "Lato Light";

Font.register({ family: "Open Sans light", src: openSansFont });
Font.register({ family: PDF_BOLD_FONT_NAME, src: LatoBold });
Font.register({ family: PDF_LIGHT_FONT_NAME, src: LatoLight });
Font.register({ family: "Lato", src: Lato });

visual-pdf-diff-playwright.test.ts

/*
GOALS:
- Visual regression testing of a pdf created and downloaded with react-pdf
- Custom fonts used in the pdf imported directly (see second file)
- Has to work on Windows without the need for native libraries
*/


import fs from "fs";
import path from "path";

import { test, expect } from "@playwright/test";
import { imgDiff } from "img-diff-js"; // Works without native libs so works on windows too!
import pdf2img from "pdf-img-convert"; // Works without native libs so works on windows too!

test("HotelLeadPdf", async ({ page }) => {
  await page.goto("/page-with-download-button");

  // Download pdf
  const downloadPromise = page.waitForEvent("download");
  await page.getByTestId("downloadButtonTestId").click();
  const download = await downloadPromise;

  // Convert pdf to images
  const images = await pdf2img.convert(await download.path());

  const directory = "./e2etests/hotelLeadPdfImages";
  const buildImagePath = (
    index: number,
    type: "actual" | "expected" | "diff",
  ) => `${directory}/${type}-image-${index}.png`;

  // Write images to filesystem
  const mode = process.env.UPDATE_SNAPSHOTS ? "update" : "test"; // Use this env variable to update the expected pdf (images)
  images.map((image, index) => {
    fs.writeFile(
      buildImagePath(index, mode === "update" ? "expected" : "actual"),
      image,
      (error) => {
        if (error) console.error(error);
      },
    );
    return path;
  });

  if (mode === "update") {
    console.log("Updated images");
    return;
  }

  // Compare images
  const imagesDiffResults = await Promise.all(
    images.map((image, index) =>
      imgDiff({
        actualFilename: buildImagePath(0, "actual"),
        diffFilename: buildImagePath(0, "diff"),
        expectedFilename: buildImagePath(0, "expected"),
        generateOnlyDiffFile: true,
      }),
    ),
  );
  expect(imagesDiffResults.every((result) => result.imagesAreSame)).toBe(true);

  // Remove actual images
  images.forEach((_, index) => {
    fs.unlinkSync(buildImagePath(index, "actual"));
  });
})