microsoft/playwright · error

The gallery page does not define window.mount().

Error message

The gallery page does not define window.mount().

What it means

The Playwright component-gallery mount() fixture drives a gallery page that must expose window.mount() to render a story. The page.evaluate call checks typeof window.mount === 'function' before invoking it; if the page loaded at baseURL does not define it, this error is thrown in the browser and propagated to the test.

Solutions

  1. Verify baseURL points at the running component gallery server.
  2. Open the page and run `typeof window.mount` in the console; if undefined, rebuild/update the gallery bundle.
  3. Ensure navigation to baseURL is not failing or being intercepted before mount() runs.
  4. If you maintain a custom gallery, implement window.mount({ story, props }) returning a promise.

Example fix

// before (gallery page missing the hook)
// nothing defines mount
// after
window.mount = async ({ story, props }) => {
  const { render } = await import('./stories/' + story);
  render(document.getElementById('root'), props);
};
Defensive patterns

Strategy: validation

Validate before calling

const res = await request.get(baseURL);
if (!res.ok()) throw new Error(`Gallery page not reachable at ${baseURL}: ${res.status()}`);
const definesMount = await page.evaluate(() => typeof (window as any).mount === 'function');
if (!definesMount) throw new Error('Gallery bundle does not define window.mount() — rebuild/update it.');

Type guard

function gallerySupportsMount(w: Window): w is Window & { mount: (p: { story: string; props?: unknown }) => Promise<void> } {
  return typeof (w as any).mount === 'function';
}

Try / catch

try {
  const component = await mount('my-story', { foo: 1 });
} catch (e) {
  if ((e as Error).message.includes('window.mount()')) {
    throw new Error('Gallery page at baseURL lacks window.mount() — check baseURL and gallery bundle version.');
  }
  throw e;
}

Prevention

When it happens

Trigger: Calling the mount(storyId, props) fixture after navigating to baseURL when the loaded page does not define window.mount as a function — wrong page served, gallery bundle not loaded/outdated, custom gallery missing the hook, or a 404/error page rendered.

Common situations: baseURL pointing at a site that is not the component gallery, gallery dev server not running or serving a stale bundle, custom gallery implementation lacking window.mount, or SPA routing/service workers intercepting the navigation.

Understand the failure class

Background: 'Could not be found', 'does not exist', 'not found in database': the resource-not-found family when an ID, slug, key, or URI lookup comes back empty — this error's family across 20 libraries.

Related errors

AI-assisted analysis of microsoft/playwright@f1d33b5029 (2026-09-21). Data as JSON: /api/errors/abea7b2e2e262f93. Report an issue: GitHub.

Appendix: source

Thrown at packages/playwright/src/index.ts:514

      await use(await context.newPage());
      return;
    }

    // First time we are reusing the context, we should create the page.
    let [page] = context.pages();
    if (!page)
      page = await context.newPage();
    await use(page);
  },

  mount: async ({ page, baseURL }, use) => {
    // exposeFunctions turns any callbacks in props into real, browser-callable
    // functions that dispatch back to the test.
    const callMount = (params: { story: string, props?: Record<string, any> }) =>
      page.evaluate(async p => {
        const w = window as any;
        if (typeof w.mount !== 'function')
          throw new Error('The gallery page does not define window.mount().');
        await w.mount(p);
      }, params, { exposeFunctions: true, serialize: ['Map', 'Set'] });
    await use(async (storyId: string, props?: any) => {
      if (!baseURL)
        throw new Error('mount() requires `baseURL` to point at the component gallery. Set it in your Playwright config.');
      // The gallery is a single page (served at baseURL) that exposes window.mount()/window.unmount().
      await page.goto(baseURL);
      await callMount({ story: storyId, props });
      // Points at the gallery root, scope the queries: component.getByRole(...).
      return Object.assign(page.locator('#root'), {
        // update() re-renders the same story with new props without navigating; if the gallery
        // reuses its root/instance, the framework reconciles and component state is preserved.
        update: (newProps?: any) => callMount({ story: storyId, props: newProps }),
        unmount: () => page.evaluate(async () => {
          await (window as any).unmount?.();
        }),
      });
    });

View on GitHub (pinned to f1d33b5029)