Skip to content

Fix clipped assertView screenshots in offset iframes #1334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DudaGod merged 1 commit into from
Sep 28, 2026
Merged

Fix clipped assertView screenshots in offset iframes #1334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions src/browser/client-scripts/screen-shooter/operations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
findFixedPositionedParent,
forEachRoot,
getMainDocumentElem,
getMainWindow,
getScreenshooterNamespaceData
} from "./utils/dom";
import {
Expand Down Expand Up @@ -49,7 +50,8 @@ export function computeScrollOffset(element: Element): Coord<"page", "css", "y">
}

export function computeViewportSize(): Size<"css"> {
const visualViewport = window.visualViewport;
const mainWindow = getMainWindow();
const visualViewport = mainWindow.visualViewport;

// Visual viewport occasionally returns more correct values than innerWidth/Height, but may not be available in older browsers
if (visualViewport && visualViewport.width > 0 && visualViewport.height > 0) {
Expand All @@ -60,15 +62,17 @@ export function computeViewportSize(): Size<"css"> {
}

return {
width: window.innerWidth as Length<"css", "x">,
height: window.innerHeight as Length<"css", "y">
width: mainWindow.innerWidth as Length<"css", "x">,
height: mainWindow.innerHeight as Length<"css", "y">
};
}

export function computeViewportOffset(): Point<"page", "css"> {
const mainWindow = getMainWindow();

return {
left: window.pageXOffset as Coord<"page", "css", "x">,
top: window.pageYOffset as Coord<"page", "css", "y">
left: mainWindow.pageXOffset as Coord<"page", "css", "x">,
top: mainWindow.pageYOffset as Coord<"page", "css", "y">
};
}

Expand Down
8 changes: 5 additions & 3 deletions src/browser/client-scripts/screen-shooter/utils/clip-rect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@ import { Rect, Coord, Length, getIntersection } from "@isomorphic";
import * as lib from "@lib";
import { getBoundingClientContentRect } from "./element-rect";
import { isRootLikeElement } from "./scroll";
import { findContainingBlock } from "./dom";
import { findContainingBlock, getMainWindow } from "./dom";
import { getReadableElementDescriptor } from "./descriptions";

function getViewportRect(): Rect<"viewport", "css"> {
const mainWindow = getMainWindow();

return {
top: 0 as Coord<"viewport", "css", "y">,
left: 0 as Coord<"viewport", "css", "x">,
width: window.innerWidth as Length<"css", "x">,
height: window.innerHeight as Length<"css", "y">
width: mainWindow.innerWidth as Length<"css", "x">,
height: mainWindow.innerHeight as Length<"css", "y">
};
}

Expand Down
4 changes: 4 additions & 0 deletions src/browser/client-scripts/screen-shooter/utils/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export function getMainDocumentElem(currDocumentElem?: HTMLElement): HTMLElement
return getMainDocumentElem(currWindow.document.documentElement);
}

export function getMainWindow(): Window {
return getMainDocumentElem().ownerDocument.defaultView ?? window;

@DudaGod DudaGod Sep 25, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getMainWindow() finds the window of the top page. getMainDocumentElem() goes up from the current iframe through the parent iframes to the top document, and ownerDocument.defaultView returns its window

}

export function forEachRoot(cb: (root: Element | ShadowRoot) => void): void {
function traverseRoots(root: Element | ShadowRoot): void {
cb(root);
Expand Down
Binary file added test/e2e/screens/8486705/chrome/iframe-element.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions test/e2e/static/offset-iframe-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
margin: 0;
}

.target-element {
width: 100%;
height: 200px;
background: linear-gradient(to right, red, blue);
}
</style>
</head>
<body>
<div class="target-element"></div>
</body>
</html>
22 changes: 22 additions & 0 deletions test/e2e/static/offset-iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
margin: 0;
}

iframe {
display: block;
width: 900px;
height: 600px;
margin-left: 300px;
border: 0;
}
</style>
</head>
<body>
<iframe id="frame" src="offset-iframe-content.html"></iframe>

@DudaGod DudaGod Sep 25, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

render iframe with margin left: 300px in order to correctly check that screenshot starts from correct position

</body>
</html>
8 changes: 8 additions & 0 deletions test/e2e/tests/assert-view.testplane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,4 +478,12 @@ describe("assertView", () => {
allowViewportOverflow: true,
});
});

it("should capture the full width of an element inside an offset iframe", async ({ browser }) => {
await browser.setWindowSize(1500, 1000);
await browser.url("offset-iframe.html");

await browser.switchToFrame(await browser.$("#frame"));
await browser.assertView("iframe-element", ".target-element");
});
});
Loading