From 9af5aa966a3f3667cd4bad0ac595601725d00973 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemek=20Wi=C4=99ch?= <pwiech@gmail.com>
Date: Tue, 12 May 2026 17:42:58 +0200
Subject: [PATCH] Try to preload fonts in visual tests

---
 tests/charts_visual.spec.ts  | 6 ++++--
 tests/config_visual.spec.ts  | 5 ++++-
 tests/details_visual.spec.ts | 6 ++++--
 tests/helpers.ts             | 9 ++++++++-
 tests/intro_visual.spec.ts   | 3 ++-
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/tests/charts_visual.spec.ts b/tests/charts_visual.spec.ts
index 4142428..f42a3b6 100644
--- a/tests/charts_visual.spec.ts
+++ b/tests/charts_visual.spec.ts
@@ -1,9 +1,11 @@
 import {expect, test} from '@playwright/test';
-import {setupGedcomRoute} from './helpers';
+import {setupGedcomRoute, waitForFonts} from './helpers';
 
 test.describe('Core SVG Canvas Layouts @visual', () => {
-  test.beforeEach(async ({context}) => {
+  test.beforeEach(async ({page, context}) => {
     await setupGedcomRoute(context);
+    await page.goto('/');
+    await waitForFonts(page);
   });
 
   const layouts = [
diff --git a/tests/config_visual.spec.ts b/tests/config_visual.spec.ts
index 16b355a..5882c2d 100644
--- a/tests/config_visual.spec.ts
+++ b/tests/config_visual.spec.ts
@@ -1,9 +1,12 @@
 import {expect, test} from '@playwright/test';
-import {setupGedcomRoute} from './helpers';
+import {setupGedcomRoute, waitForFonts} from './helpers';
 
 test.describe('Configurations Integration @visual', () => {
   test.beforeEach(async ({page, context}) => {
     await setupGedcomRoute(context);
+    await page.goto('/');
+    await waitForFonts(page);
+
     await page.goto('/#/view?url=https://example.org/family.ged');
 
     // Wait for the sidebar and the main content container to be visible.
diff --git a/tests/details_visual.spec.ts b/tests/details_visual.spec.ts
index 8a23a3d..b1b8f06 100644
--- a/tests/details_visual.spec.ts
+++ b/tests/details_visual.spec.ts
@@ -1,11 +1,13 @@
 import {expect, test} from '@playwright/test';
 import dedent from 'dedent';
 import * as fs from 'fs';
-import {blockTracking, mockGedcomResponse} from './helpers';
+import {blockTracking, mockGedcomResponse, waitForFonts} from './helpers';
 
 test.describe('Details panel visual validation @visual', () => {
-  test.beforeEach(async ({context}) => {
+  test.beforeEach(async ({page, context}) => {
     await blockTracking(context);
+    await page.goto('/');
+    await waitForFonts(page);
   });
 
   test('Complex Names Test', async ({page, context}) => {
diff --git a/tests/helpers.ts b/tests/helpers.ts
index bbb9b70..39e0176 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -1,4 +1,4 @@
-import {BrowserContext} from '@playwright/test';
+import {BrowserContext, Page} from '@playwright/test';
 import * as fs from 'fs';
 
 /**
@@ -40,3 +40,10 @@ export async function setupGedcomRoute(context: BrowserContext): Promise<void> {
   await mockGedcomResponse(context, gedcomContent);
   await blockTracking(context);
 }
+
+/**
+ * Ensures all custom web fonts are fully loaded and rendered.
+ */
+export async function waitForFonts(page: Page): Promise<void> {
+  await page.evaluate(() => document.fonts.ready);
+}
diff --git a/tests/intro_visual.spec.ts b/tests/intro_visual.spec.ts
index b4592ca..492da18 100644
--- a/tests/intro_visual.spec.ts
+++ b/tests/intro_visual.spec.ts
@@ -1,10 +1,11 @@
 import {expect, test} from '@playwright/test';
-import {blockTracking} from './helpers';
+import {blockTracking, waitForFonts} from './helpers';
 
 test.describe('Intro page visual validation @visual', () => {
   test.beforeEach(async ({page, context}) => {
     await blockTracking(context);
     await page.goto('/');
+    await waitForFonts(page);
   });
 
   test('intro-page', async ({page}) => {