Testing SvelteKit Static Builds with Base Paths

When a SvelteKit project uses @sveltejs/adapter-static and configures a custom paths.base (e.g., /omp-webui), serving the raw build directory directly will result in broken asset paths (404s) during local QA.

The Fix

Wrap the build output in a directory structure that matches the base path before serving:

# 1. Clear previous wrapper
rm -rf www

# 2. Create directory matching the base path
mkdir -p www/omp-webui

# 3. Copy build contents into the wrapper
cp -r build/* www/omp-webui/

# 4. Serve the wrapper directory
npx serve www -l 4173 &

You can then correctly access the site at http://localhost:4173/omp-webui/.

Headless Browser QA Workarounds

If you are automating UI verification and the browser tool fails to process tab.screenshot({ save: true }) (e.g., throwing H.replace is not a function), use the raw Puppeteer page object:

// Drop down to raw Puppeteer to write directly to disk
await page.screenshot({ path: '/path/to/screenshot.png', fullPage: true });

Alternatively, skip the vision model entirely and verify styles and rendering via DOM computed styles:

const isThemeActive = await page.$eval('.drawer', el => getComputedStyle(el).backgroundColor !== 'rgba(0, 0, 0, 0)');
const text = await page.$eval('.hero h1', el => el.textContent.trim());
return { isThemeActive, text };