fix: DPR issue with takeElementScreenshot in web

[alcpereira]

When taking an element screenshot in web, the DPR is not taken into account.
This fix adds a bypass for DPR > 1 to use the fallback solution (full screenshot then resizing)

[changeset-bot]

🦋 Changeset detected

Latest commit: 459525f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
webdriver-image-comparison	Patch
@wdio/visual-service	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wswebcreation]

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

[wswebcreation]

Hi @alcpereira

Thanks for the PR, but this breaks almost all device screenshots. Can you take a loot at my comment?

[wswebcreation]

Closing this one as it will be solved with #917