dump

e2e/404.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { screenshotFullPage } from './utils';
 
 test.describe('404', () => {
   test('should redirect 404', async ({ page }) => {
@@ -7,8 +8,7 @@ test.describe('404', () => {
   });
 
   test(`screen`, async ({ page }) => {
-    await page.goto(`/404`);
-    await expect(page).toHaveScreenshot([`404.png`], { fullPage: true });
+    await screenshotFullPage({ page, url: `/404`, arg: [`404.png`] });
   });
 
   test(`dom`, async ({ page }) => {

e2e/about.spec.ts

@@ -1,9 +1,9 @@
 import { expect, test } from '@playwright/test';
+import { screenshotFullPage } from './utils';
 
 test.describe('about', () => {
   test(`screen`, async ({ page }) => {
-    await page.goto(`/about`);
-    await expect(page).toHaveScreenshot([`about.png`], { fullPage: true });
+    await screenshotFullPage({ page, url: `/about`, arg: [`about.png`] });
   });
 
   test(`dom`, async ({ page }) => {

e2e/post/screen.spec.ts

@@ -1,14 +1,16 @@
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { urls } from './utils';
+import { screenshotFullPage } from 'e2e/utils';
 
 test.describe(`screen`, () => {
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < urls.length; i++) {
     const url = urls[i];
 
     test(`${url}`, async ({ page }) => {
-      await page.goto(`/posts/${url}`);
-      await expect(page).toHaveScreenshot([`${url}.png`], {
-        fullPage: true,
+      await screenshotFullPage({
+        page,
+        url: `/posts/${url}`,
+        arg: [`${url}.png`],
         timeout: 10 * 1000,
       });
     });

e2e/utils.ts

@@ -0,0 +1,40 @@
+import { expect, type Page } from '@playwright/test';
+
+type ScreenshotOptions = {
+  fullPage: boolean;
+  timeout?: number;
+  clip: { x: number; y: number; width: number; height: number };
+};
+
+export const screenshotFullPage = async ({
+  page,
+  url,
+  arg,
+  timeout,
+}: {
+  page: Page;
+  url: string;
+  arg: string[];
+  timeout?: number;
+}) => {
+  await page.goto(url);
+  await page.evaluate(() => document.fonts.ready);
+  // https://github.com/microsoft/playwright/issues/18827#issuecomment-2031261562
+  await page.locator('#__next').scrollIntoViewIfNeeded();
+  await page.waitForTimeout(1000);
+
+  const { width } = page.viewportSize();
+  const height = await page.evaluate(
+    () => document.scrollingElement.scrollHeight,
+  );
+
+  const options: ScreenshotOptions = {
+    fullPage: true,
+    clip: { x: 0, y: 0, width, height },
+  };
+  if (timeout >= 0) {
+    options.timeout = timeout;
+  }
+
+  await expect(page).toHaveScreenshot([...arg], options);
+};

playwright.config.ts

@@ -61,7 +61,7 @@ export default defineConfig({
   /* For global expect settings */
   expect: {
     toHaveScreenshot: {
-      maxDiffPixelRatio: 0.2,
+      maxDiffPixelRatio: 0.1,
     },
   },
 });