Why does my client-side test cause a flash of the original page?

A “flash of the original page” in a client-side test usually means the browser is rendering the server’s initial HTML before your test code has a chance to change it.

Common reasons:

1. The page is server-rendered first

   • The browser downloads and paints the HTML immediately.
   • Your client-side script runs afterward, so you briefly see the original content.

2. Your test waits too long to modify the DOM

   • If you’re using window.onload, setTimeout, or async setup, the original page may already have been painted.

3. Hydration / SPA bootstrapping happens after first paint

   • Frameworks like React, Vue, or Angular often show server HTML first, then replace it during hydration.

4. The test environment still loads real assets

   • CSS, fonts, images, or scripts can delay your test logic and let the page flash.

5. Navigation or reload occurs

   • If the test triggers a reload, the browser will briefly show the default/original page again.

How to avoid it:

• Inject test overrides before the page renders if possible.
• Use document.write, early script injection, or a test hook that runs before app startup.
• Hide the body until your test setup is complete, then reveal it.
• Mock network requests and startup data so the app doesn’t render the real content first.
• If using a framework, intercept at the earliest lifecycle point available.

If you want, I can help diagnose this for your specific setup if you share:

• the test framework,
• the app framework,
• and the code that sets up the client-side test.