webdriverio / webdriverio/visual-testing
[Driver bug] iOS element screenshot returns full element size but only viewport-visible content; rest is black
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 153
- Forks
- 59
- PR merge metrics
- No merged PRs in 30d
Description
Summary
When taking an element screenshot on iOS (Safari, real device or simulator) via the WebDriver takeElementScreenshot command, the driver returns an image that has the dimensions of the element's full bounding rect (e.g. 390×844 px), but only the viewport-visible portion of the element is filled with real pixel data; the rest of the image is black.
This is an upstream driver bug: the automation stack (iOS Safari / WebDriver implementation) returns a full-size bitmap but only captures the visible content. This repository does not create or pad the image; it uses the driver response as-is.
Environment
- Platform: iOS (Safari), real device or simulator
- Flow: Web context,
saveWebElement/checkWebElement(element screenshot of a DOM element) - Reproducible: Whenever the element is taller (or larger) than the viewport
Observed behavior
- User takes an element screenshot of a tall element (e.g. a section that extends below the fold).
- The saved/compared image has width × height equal to the element's full bounding rect (e.g. 390×844).
- Only the top part of the image (the part that was visible in the viewport) shows the actual UI.
- The remaining part of the image is solid black.
So the image is "cropped" to the element's size by the driver, but the driver only fills the viewport-visible region; the rest is black.
Expected behavior
The driver should either:
- Return an image of the full element content (e.g. by capturing the whole element or stitching viewport captures), or
- Return an image that is only as large as the captured content (viewport-visible part only), without a full-size buffer filled with black.
Technical note
In this project, the web element screenshot path calls browser.takeElementScreenshot(elementId) and uses the returned base64 image and its dimensions. No canvas or black padding is applied here; the black area is present in the image returned by the driver.
References
- W3C WebDriver: Element Screenshot
Example
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Trace the web element screenshot path from saveWebElement/checkWebElement to browser.takeElementScreenshot(elementId), then inspect the returned base64 image and dimensions on iOS. Confirm whether the black area is already present in the driver response; done requires determining whether this repository can address it or whether an upstream driver fix is needed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, typescript
- Domain
- mobile-dev, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100