Rayrun
← Back to Discord Forum

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?

This thread is trying to answer question "How can I force reload of source page to test multiple themes in a Svelte-kit project using Vite?"

6 replies

I should also mention that this is a Svelte-kit project and uses Vite, so just setting the HTML in playwright is not an option either

Since you have a static list of themes/css, you could either create multiple projects in your Playwright config and a fixture to specify the theme/css or you could parameterize the test and route

Instead of replacing the content in the markup, you could use a page route

To catch the request for the css and respond with the theme/css you want, given from a para in the projects of your Playwright config or via the static list where you if parameterize the tests

Yeah it's kind of looking like multiple projects, I don't want to mess too much with the HTML or routes as they are end user installable templates that are being tested as well. Thanks for the advice!

Do it the hard way or easy? Have one page for each template/css and be done with it? Pretty simple? Even better create a base page the you can templatize and generate each, but you could use SSR that svelete provides?

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.