Force reload of source page to test multiple themes

Hi,

I'm trying to iterate through a bunch of theme.css files and get a snapshot of each for testing for regressions. I'm updating the source files with the new theme-X.css file and reloading the page as per the following:

// @ts-check
import { test, expect } from '@playwright/test';
import { readFileSync, writeFileSync } from 'node:fs';


const themes = [
    'skeleton',
    'modern',
    'hamlindigo',
    'rocket',
    'sahara',
    'gold-nouveau',
    'vintage',
    'seafoam',
    'crimson'];

const appHtml = readFileSync('./src/app.html', 'utf-8');
const layoutHtml = readFileSync('./src/routes/+layout.svelte', 'utf-8');
for (let i = 0; i < themes.length; i++) {
    writeFileSync('./src/app.html', appHtml.replace(/data-theme=".*"/, `data-theme="${themes[i]}"`));
    writeFileSync('./src/routes/+layout.svelte', layoutHtml.replace(/theme-.*\.css/, `theme-${themes[i]}.css`));
    test(`test theme ${themes[i]}`, async ({ page }) => {
        await page.goto(`/#${themes[i]}`);
        await page.reload({waitUntil: 'domcontentloaded'});
        const screenshot = await page.screenshot({path: `tests/themescreens/theme-${themes[i]}.png`, fullPage:true});
        expect(screenshot).toMatchSnapshot(`theme-${themes[i]}.png`);
    });
}

and the reload doesn't seem to pick up the new source file contents even though i can see them changing in VSCode as the tests are running.

Any ideas on how I might be able to approach this?