Vitest Browser Mode screenshot fullPage support

[JoaoCnh]

I've been trying to take some full page screenshots with Vitest Browser Mode but I haven't been successful so far.

Playwright supports full page screenshotting.

From the vitest source code for the screenshot browser command it seems I can pass the fullPage option even though it's not available in the types.

What I've tried using the fullPage option:

• my page has no global styles so it can't be an overflow: hidden issue;
• scroll to the bottom after render (results in just the bottom being shown in the viewport);

I'm also not very experienced with Playwright so I might be missing something.
Has anyone come across this yet?

[JoaoCnh]

So this is an example of what happens:

the red square sits above the fold but there is more content that just renders as white. These are just divs with colours, no animations or anything.

[JoaoCnh]

I haven't delved too deep but I found this orchestrator html file where html is set to overflow: hidden and that might be the reason why?

[ygkn]

I found a workaround for taking full-page screenshots in Vitest browser mode!

Workaround

Adding these lines before taking a screenshot resolves the issue:

(window.frameElement as HTMLIFrameElement).style.width = `${document.body.offsetWidth}px`;
(window.frameElement as HTMLIFrameElement).style.height = `${document.body.offsetHeight}px`;

How it works

This workaround manually adjusts the iframe dimensions to match the document body size, ensuring that the entire content is visible before capturing the screenshot.

Example

I've created a working example that demonstrates this workaround:

test("LongText screenshot", async () => {
  render(<LongText />);

  await page.screenshot(); // __screenshots__/src/components/LongText.test.tsx/LongText-1.png

  (
    window.frameElement as HTMLIFrameElement
  ).style.width = `${document.body.offsetWidth}px`;
  (
    window.frameElement as HTMLIFrameElement
  ).style.height = `${document.body.offsetHeight}px`;

  await page.screenshot(); // __screenshots__/src/components/LongText.test.tsx/LongText-2.png
});

https://github.com/ygkn/vite-screenshot-fullpage-test/blob/0b7bc25ddfa6c708c9a62f0d668b237e4ec2fab2/src/components/LongText.test.tsx#L6-L19

w/o this workaround	w/ this workaround

Hope this helps others facing the same issue!

[adbutterfield]

I just hit the same issue, but with screenshots for test failures. The workaround seems to work. But a bit clunky to have to do it after each render in all of the tests.

[adbutterfield]

I ended up extending page in my setup file with a custom renderFullScreen, and calling that in all the tests instead of render:

async function renderFullPage(ui: React.ReactNode): Promise<ReturnType<typeof page.render>> {
  const screen = await page.render(ui);
  // workaround to get full page screenshots
  // from this discussion: https://github.com/vitest-dev/vitest/discussions/7749
  (window.frameElement as HTMLIFrameElement).style.width = `${document.body.offsetWidth}px`;
  (window.frameElement as HTMLIFrameElement).style.height = `${document.body.offsetHeight}px`;
  return screen;
}

page.extend({
  renderFullPage,
});

[adbutterfield]

I found an issue with setting this actually. If you have tests that change the viewport, you'll also have to update the width on the frameElement. I added a couple helper functions to use in my tests:

async function renderFullPage(ui: React.ReactNode): Promise<ReturnType<typeof page.render>> {
  const screen = await page.render(ui);
  // workaround to get full page screenshots
  // from this discussion: https://github.com/vitest-dev/vitest/discussions/7749
  (window.frameElement as HTMLIFrameElement).style.width = `${document.body.offsetWidth}px`;
  (window.frameElement as HTMLIFrameElement).style.height = `${document.body.offsetHeight}px`;
  return screen;
}

async function useMobileViewport() {
  (window.frameElement as HTMLIFrameElement).style.width = '375px';
  await page.viewport(375, 667);
}

async function useDesktopViewport() {
  (window.frameElement as HTMLIFrameElement).style.width = '1200px';
  await page.viewport(1200, 800);
}

page.extend({
  renderFullPage,
  useMobileViewport,
  useDesktopViewport
});

[erunion]

It also would be nice to be able to do this with the .toMatchScreenshot() assertion.

[janus-reith]

I tried with:

(window.frameElement as HTMLIFrameElement).style.width = `${document.body.offsetWidth}px`;
(window.frameElement as HTMLIFrameElement).style.height = `${document.body.offsetHeight}px`;

but had no success. Same screenshot of the initially visible screen area, not the full page.

[adbutterfield]

I went back to working in this the other day after getting pulled off to other things and it wasn't working like it did before either...

I ended up adding that block before AND after rendering the component, plus adding some config to my vitest.config.ts to make it work:

export default defineConfig({
  // ...other config
  test: {
    // ...other config
    projects: [
      {
        // ...other config
        test: {
          // ...other config
          browser: {
            expect: {
              toMatchScreenshot: {
                // ...other config
                screenshotOptions: {
                  fullPage: true,
                },
              },
            },
          },
        },
      },
    ],
  },
});

[adbutterfield]

Looking into this deeper today, actually this fullPage: true option doesn't do anything, because under the hood vitest uses lLocator.takeScreenshot() and not Page.takeScreenshot() so the argument is ignored...

However, here is my new approach that seems to work:

/**
 * Render a React component and resize the iframe to fit the content.
 * This ensures full-page screenshots capture the entire component.
 */
async function renderFullPage(
  ui: React.ReactNode,
  options?: RenderFullPageOptions,
): Promise<RenderResult> {
  await vrtCommands.waitForPageReady();

  // Reset body so it doesn't constrain content
  document.body.style.margin = '0';
  document.body.style.padding = '0';

  // Render the component
  const screen = await page.render(ui);

  // Add padding to the container (not body) so that focus rings and
  // outlines aren't clipped — Playwright screenshots the container's
  // bounding rect, so padding must be inside it.
  const container = screen.container as HTMLElement;
  container.style.boxSizing = 'border-box';
  container.style.padding = '16px';

  // Wait for images if requested
  if (options?.waitForImages) {
    const imageOptions =
      typeof options.waitForImages === 'object' ? options.waitForImages : undefined;
    await vrtCommands.waitForImagesToLoad(imageOptions);
  }

  // Wait one frame for layout to settle after render, then resize
  // the iframe and all outer ancestors to match the content size.
  await new Promise<void>((resolve) => {
    requestAnimationFrame(() => {
      const width = document.body.scrollWidth;
      const height = document.body.scrollHeight;

      const iframeEl = window.frameElement as HTMLIFrameElement;
      iframeEl.style.width = `${width}px`;
      iframeEl.style.height = `${height}px`;

      // Walk up all ancestors so the iframe isn't clipped.
      let ancestor = iframeEl.parentElement;
      while (ancestor) {
        (ancestor as HTMLElement).style.width = `${width}px`;
        (ancestor as HTMLElement).style.height = `${height}px`;
        (ancestor as HTMLElement).style.overflow = 'visible';
        ancestor = ancestor.parentElement;
      }

      resolve();
    });
  });

  return screen;
}