Embed font hoping that this will make the visual tests reproducible

This commit is contained in:
Przemek Więch
2026-05-12 18:08:32 +02:00
parent 9af5aa966a
commit 328008f8e9
8 changed files with 54 additions and 17 deletions

View File

@@ -2,12 +2,49 @@ import {BrowserContext, Page} from '@playwright/test';
import * as fs from 'fs';
/**
* Blocks external tracking services (like Google Analytics and Google Tag Manager)
* to guarantee a hermetic and fast test environment.
* Sets up a hermetic test environment by blocking external tracking services
* and intercepting Google Fonts to serve static embedded fonts locally.
*/
export async function blockTracking(context: BrowserContext): Promise<void> {
export async function setupHermeticEnvironment(context: BrowserContext): Promise<void> {
await context.route('**/*google-analytics.com/**', (route) => route.abort());
await context.route('**/*googletagmanager.com/**', (route) => route.abort());
// Intercept Google Fonts stylesheet requests to serve a deterministically embedded local font.
await context.route('**/fonts.googleapis.com/css2**', async (route) => {
const cssContent = `
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 100 900;
font-display: block;
src: url('http://localhost:3000/test-fonts/montserrat.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100 900;
font-display: block;
src: url('http://localhost:3000/test-fonts/montserrat.woff2') format('woff2');
}
`;
await route.fulfill({
status: 200,
contentType: 'text/css',
headers: {'Access-Control-Allow-Origin': '*'},
body: cssContent,
});
});
// Intercept requests for the locally embedded test font and serve the static binary.
await context.route('**/test-fonts/montserrat.woff2', async (route) => {
const fontBuffer = fs.readFileSync('tests/fixtures/montserrat.woff2');
await route.fulfill({
status: 200,
contentType: 'font/woff2',
headers: {'Access-Control-Allow-Origin': '*'},
body: fontBuffer,
});
});
}
/**
@@ -38,7 +75,7 @@ export async function setupGedcomRoute(context: BrowserContext): Promise<void> {
);
await mockGedcomResponse(context, gedcomContent);
await blockTracking(context);
await setupHermeticEnvironment(context);
}
/**