Skip to content

fix: DPR issue with takeElementScreenshot in web #887

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: DPR issue with takeElementScreenshot in web #887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0c5d45
fix: dpr issue with takeElementScreenshot in web
alcpereira Apr 23, 2025
459525f
chore: changeset
alcpereira Apr 23, 2025
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
5 changes: 5 additions & 0 deletions .changeset/tender-teeth-fail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"webdriver-image-comparison": patch
---

Fix an issue in Web where the takeElementScreenshot does not consider the DPR of the device
3 changes: 2 additions & 1 deletion packages/webdriver-image-comparison/src/commands/saveWebElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ export default async function saveWebElement(
isIOS,
isLandscape,
// When the element needs to be resized, we need to take a screenshot of the whole page
fallback: !!saveElementOptions.method.resizeDimensions || false,
// or when devicePixelRatio is different than 1 as the browser takeElementScreenshot does not consider DPR
fallback: (devicePixelRatio && devicePixelRatio > 1) || !!saveElementOptions.method.resizeDimensions || false,
Comment on lines +93 to +94
Copy link
Member

@wswebcreation wswebcreation Apr 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Introducing this would break almost all web element screenshots for mobile because it needs to cut out the elements from the screenshots. The cutout fails in nearly all landscape devices because that's the hardest one.

My suggestion would be to introduce a new flag, something called enableHighResElementScreenshot. This flag should be set to false by default. Something like this

/**
 * When set to `true`, enables a fallback mechanism for element screenshots
 * that accounts for the device pixel ratio (DPR).
 * 
 * This works around a known issue in the Selenium `Take Element Screenshot` API,
 * which returns screenshots in CSS pixels and ignores DPR.
 * 
 * The fallback captures a full viewport screenshot (which includes DPR scaling),
 * then crops the element from it, resulting in a high-resolution, DPR-aware element image.
 * 
 * @default false
 */
enableHighResElementScreenshot?: boolean;

This also means that I have a lot of work to do for the devices to make DPR screenshots 😢 , but that is part of the job

screenShot,
takeElementScreenshot,
})
Expand Down
Loading