diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts index 75ecd6a8ce58..c44c4d791e29 100644 --- a/packages/browser/src/client/orchestrator.ts +++ b/packages/browser/src/client/orchestrator.ts @@ -366,7 +366,7 @@ export class IframeOrchestrator { iframe.style.setProperty('border', 'none') iframe.style.setProperty('background-color', '#fff') iframe.style.setProperty('width', 'var(--viewport-width)') - iframe.style.setProperty('height', 'var(--viewport-height)') + iframe.style.setProperty('height', 'var(--inner-height, var(--viewport-height))') // enable scaling only when using the UI, without UI the iframe fills the page if (config.browser.ui) { diff --git a/packages/browser/src/client/tester/expect/toMatchScreenshot.ts b/packages/browser/src/client/tester/expect/toMatchScreenshot.ts index c714b9e7bf85..ea763ef34807 100644 --- a/packages/browser/src/client/tester/expect/toMatchScreenshot.ts +++ b/packages/browser/src/client/tester/expect/toMatchScreenshot.ts @@ -40,6 +40,11 @@ export default async function toMatchScreenshot( : `${this.currentTestName} ${counter.current}` const isPageTarget = isBrowserPage(actual) + const isFullPage = isPageTarget && options.screenshotOptions && 'fullPage' in options.screenshotOptions && options.screenshotOptions.fullPage + + if (isFullPage && window.frameElement) { + (window.frameElement as HTMLIFrameElement).style.setProperty('--inner-height', `${document.documentElement.scrollHeight}px`) + } const [element, ...mask] = await Promise.all([ isPageTarget ? undefined : serializeElement(actual, options), @@ -75,6 +80,10 @@ export default async function toMatchScreenshot( ] satisfies ScreenshotMatcherArguments, ) + if (isFullPage && window.frameElement) { + (window.frameElement as HTMLIFrameElement).style.removeProperty('--inner-height') + } + if (result.pass === false) { const attachments: VisualRegressionArtifact['attachments'] = []