Skip to content

Commit 33951d5

Browse files
github-actions[bot]wdio-bot
github-actions[bot]
and
wdio-bot
authored
chore: release [skip ci] (#1148)
Co-authored-by: WebdriverIO Release Bot <bot@webdriver.io>
1 parent c56e1ae commit 33951d5

5 files changed

Lines changed: 127 additions & 60 deletions

File tree

‎.changeset/fix-1146-bidi-viewport-origin.md‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎packages/image-comparison-core/CHANGELOG.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,66 @@
11
# @wdio/image-comparison-core
22

3+
## 1.2.3
4+
5+
### Patch Changes
6+
7+
- c56e1ae: ## #1146 Fix BiDi element screenshots missing composited layers (scrollbars, fixed/sticky overlays)
8+
9+
### Root cause
10+
11+
When `checkElement` / `saveElement` is used with the WebDriver BiDi protocol, the screenshot was taken with `browsingContext.captureScreenshot` using `origin: 'document'`. This renders the document layout independently of the browser's compositor, which means **composited layers are never included** — element-level scrollbars, `position: fixed` / `position: sticky` overlays, and elements with a `will-change` CSS property all render as invisible or without their correct visual state.
12+
13+
The switch to `origin: 'document'` was introduced in an earlier fix (commit `227f10a`) to avoid a `zero dimensions` error that occurred when `origin: 'viewport'` was used for elements that were outside the visible viewport. That fix was correct for out-of-viewport elements, but it also silently broke composited-layer capture for all elements.
14+
15+
### Fix: new `biDiOrigin` method option
16+
17+
A new **method-level** option `biDiOrigin` has been added to `saveElement` / `checkElement`. It is BiDi-only and ignored for the legacy WebDriver screenshot path.
18+
19+
| Value | Behaviour |
20+
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
21+
| `'document'` _(default)_ | Previous behaviour — works for any element position but composited layers (scrollbars, overlays, `will-change`) are not captured |
22+
| `'viewport'` | Captures the composited frame as the browser painted it — scrollbars, fixed/sticky overlays and `will-change` layers are included. The element must be visible in the viewport; descriptive errors are thrown when it is not |
23+
24+
#### Usage
25+
26+
```ts
27+
// Capture an element with its scrollbar / overlay visible:
28+
await browser.checkElement(element, "myTag", { biDiOrigin: "viewport" });
29+
await browser.saveElement(element, "myTag", { biDiOrigin: "viewport" });
30+
```
31+
32+
#### Error messages when `biDiOrigin: 'viewport'` cannot produce a valid screenshot
33+
34+
**Element larger than the viewport** — must fall back to `'document'`:
35+
36+
```
37+
[BiDi viewport screenshot] The element dimensions (1400x800px) exceed the viewport (1280x720px).
38+
You must use the default `biDiOrigin: 'document'` for this element.
39+
Note: with `'document'` origin, composited layers such as scrollbars, fixed/sticky overlays,
40+
and elements using `will-change` may not appear in the screenshot.
41+
```
42+
43+
**Element not in the viewport at all** — needs scrolling:
44+
45+
```
46+
[BiDi viewport screenshot] The element is not in the viewport
47+
(element: x=0, y=900, 300x200px; viewport: 1280x720px).
48+
Call `element.scrollIntoView()` before taking the screenshot, or set `autoElementScroll: true`.
49+
```
50+
51+
**Element partially outside the viewport but fits** — needs to be scrolled fully into view:
52+
53+
```
54+
[BiDi viewport screenshot] The element is not fully visible in the viewport
55+
(element: x=-20, y=100, 300x200px; viewport: 1280x720px).
56+
The element fits within the viewport — scroll it fully into view by calling
57+
`element.scrollIntoView()` or setting `autoElementScroll: true`.
58+
```
59+
60+
### Committers: 1
61+
62+
- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
63+
364
## 1.2.2
465

566
### Patch Changes

‎packages/image-comparison-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wdio/image-comparison-core",
3-
"version": "1.2.2",
3+
"version": "1.2.3",
44
"author": "Wim Selles - wswebcreation",
55
"description": "Image comparison core module for @wdio/visual-service - WebdriverIO visual testing framework",
66
"keywords": [

‎packages/visual-service/CHANGELOG.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,69 @@
11
# @wdio/visual-service
22

3+
## 9.2.3
4+
5+
### Patch Changes
6+
7+
- c56e1ae: ## #1146 Fix BiDi element screenshots missing composited layers (scrollbars, fixed/sticky overlays)
8+
9+
### Root cause
10+
11+
When `checkElement` / `saveElement` is used with the WebDriver BiDi protocol, the screenshot was taken with `browsingContext.captureScreenshot` using `origin: 'document'`. This renders the document layout independently of the browser's compositor, which means **composited layers are never included** — element-level scrollbars, `position: fixed` / `position: sticky` overlays, and elements with a `will-change` CSS property all render as invisible or without their correct visual state.
12+
13+
The switch to `origin: 'document'` was introduced in an earlier fix (commit `227f10a`) to avoid a `zero dimensions` error that occurred when `origin: 'viewport'` was used for elements that were outside the visible viewport. That fix was correct for out-of-viewport elements, but it also silently broke composited-layer capture for all elements.
14+
15+
### Fix: new `biDiOrigin` method option
16+
17+
A new **method-level** option `biDiOrigin` has been added to `saveElement` / `checkElement`. It is BiDi-only and ignored for the legacy WebDriver screenshot path.
18+
19+
| Value | Behaviour |
20+
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
21+
| `'document'` _(default)_ | Previous behaviour — works for any element position but composited layers (scrollbars, overlays, `will-change`) are not captured |
22+
| `'viewport'` | Captures the composited frame as the browser painted it — scrollbars, fixed/sticky overlays and `will-change` layers are included. The element must be visible in the viewport; descriptive errors are thrown when it is not |
23+
24+
#### Usage
25+
26+
```ts
27+
// Capture an element with its scrollbar / overlay visible:
28+
await browser.checkElement(element, "myTag", { biDiOrigin: "viewport" });
29+
await browser.saveElement(element, "myTag", { biDiOrigin: "viewport" });
30+
```
31+
32+
#### Error messages when `biDiOrigin: 'viewport'` cannot produce a valid screenshot
33+
34+
**Element larger than the viewport** — must fall back to `'document'`:
35+
36+
```
37+
[BiDi viewport screenshot] The element dimensions (1400x800px) exceed the viewport (1280x720px).
38+
You must use the default `biDiOrigin: 'document'` for this element.
39+
Note: with `'document'` origin, composited layers such as scrollbars, fixed/sticky overlays,
40+
and elements using `will-change` may not appear in the screenshot.
41+
```
42+
43+
**Element not in the viewport at all** — needs scrolling:
44+
45+
```
46+
[BiDi viewport screenshot] The element is not in the viewport
47+
(element: x=0, y=900, 300x200px; viewport: 1280x720px).
48+
Call `element.scrollIntoView()` before taking the screenshot, or set `autoElementScroll: true`.
49+
```
50+
51+
**Element partially outside the viewport but fits** — needs to be scrolled fully into view:
52+
53+
```
54+
[BiDi viewport screenshot] The element is not fully visible in the viewport
55+
(element: x=-20, y=100, 300x200px; viewport: 1280x720px).
56+
The element fits within the viewport — scroll it fully into view by calling
57+
`element.scrollIntoView()` or setting `autoElementScroll: true`.
58+
```
59+
60+
### Committers: 1
61+
62+
- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
63+
64+
- Updated dependencies [c56e1ae]
65+
- @wdio/image-comparison-core@1.2.3
66+
367
## 9.2.2
468

569
### Patch Changes

‎packages/visual-service/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@wdio/visual-service",
33
"author": "Wim Selles - wswebcreation",
44
"description": "Image comparison / visual regression testing for WebdriverIO",
5-
"version": "9.2.2",
5+
"version": "9.2.3",
66
"license": "MIT",
77
"homepage": "https://webdriver.io/docs/visual-testing",
88
"repository": {

0 commit comments

Comments
 (0)