webdriverio / webdriverio/visual-testing

[Driver bug] iOS element screenshot returns full element size but only viewport-visible content; rest is black

Open
#1,127 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug third party bug
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

  1. User takes an element screenshot of a tall element (e.g. a section that extends below the fold).
  2. The saved/compared image has width × height equal to the element's full bounding rect (e.g. 390×844).
  3. Only the top part of the image (the part that was visible in the viewport) shows the actual UI.
  4. 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

Example

Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.