@wdio/visual-service 6.1.0 โ 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +524 -500
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @wdio/visual-service
|
|
2
2
|
|
|
3
|
+
## 6.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 1df5350: # Improve iPhone support
|
|
8
|
+
|
|
9
|
+
## ๐
Polish @wdio/visual-reporter
|
|
10
|
+
|
|
11
|
+
- Mobile: support iOS 18 and the iPhone 16 series for the blockouts
|
|
12
|
+
|
|
13
|
+
## ๐ Bugs fixed @wdio/visual-reporter
|
|
14
|
+
|
|
15
|
+
- Mobile: don't use the device blockouts for element screenshot
|
|
16
|
+
- Mobile: when the blockouts had the value `{x: 0, y: 0, width: 0, height: 0}` then Resemble picked this up as a full blockout. This caused false positives for iOS
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [1df5350]
|
|
19
|
+
- webdriver-image-comparison@7.2.1
|
|
20
|
+
|
|
21
|
+
## 6.2.0
|
|
22
|
+
|
|
23
|
+
### Minor Changes
|
|
24
|
+
|
|
25
|
+
- 6e20f06: Upgrade dependencies
|
|
26
|
+
|
|
3
27
|
## 6.1.0
|
|
4
28
|
|
|
5
29
|
### Minor Changes
|
|
@@ -53,429 +77,429 @@ We've update all dependencies.
|
|
|
53
77
|
|
|
54
78
|
### Patch Changes
|
|
55
79
|
|
|
56
|
-
-
|
|
57
|
-
|
|
80
|
+
- Updated dependencies [ea08748]
|
|
81
|
+
- webdriver-image-comparison@7.1.0
|
|
58
82
|
|
|
59
83
|
## 6.0.0
|
|
60
84
|
|
|
61
85
|
### Major Changes
|
|
62
86
|
|
|
63
|
-
-
|
|
87
|
+
- 9fdb2d2: feat: work with V9
|
|
64
88
|
|
|
65
89
|
### Patch Changes
|
|
66
90
|
|
|
67
|
-
-
|
|
68
|
-
|
|
91
|
+
- Updated dependencies [9fdb2d2]
|
|
92
|
+
- webdriver-image-comparison@7.0.0
|
|
69
93
|
|
|
70
94
|
## 5.2.1
|
|
71
95
|
|
|
72
96
|
### Patch Changes
|
|
73
97
|
|
|
74
|
-
-
|
|
98
|
+
- cae36ad: Update deps
|
|
75
99
|
|
|
76
100
|
## 5.2.0
|
|
77
101
|
|
|
78
102
|
### Minor Changes
|
|
79
103
|
|
|
80
|
-
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
104
|
+
- 0b01b64: ### @wdio/visual-service
|
|
105
|
+
|
|
106
|
+
#### ๐ New Features
|
|
107
|
+
|
|
108
|
+
**Added Reporting output**
|
|
109
|
+
You now have the option to export the compare results into a JSON report file. By enabling the module option `createJsonReportFiles: true`, each image that is compared will create a report stored in the `actual` folder, next to each `actual` image result.
|
|
110
|
+
|
|
111
|
+
The output will look like this:
|
|
112
|
+
|
|
113
|
+
```json
|
|
114
|
+
{
|
|
115
|
+
"parent": "check methods",
|
|
116
|
+
"test": "should fail comparing with a baseline",
|
|
117
|
+
"tag": "examplePageFail",
|
|
118
|
+
"instanceData": {
|
|
119
|
+
"browser": {
|
|
120
|
+
"name": "chrome-headless-shell",
|
|
121
|
+
"version": "126.0.6478.183"
|
|
122
|
+
},
|
|
123
|
+
"platform": {
|
|
124
|
+
"name": "mac",
|
|
125
|
+
"version": "not-known"
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
"commandName": "checkScreen",
|
|
129
|
+
"boundingBoxes": {
|
|
130
|
+
"diffBoundingBoxes": [
|
|
131
|
+
{
|
|
132
|
+
"left": 1088,
|
|
133
|
+
"top": 717,
|
|
134
|
+
"right": 1186,
|
|
135
|
+
"bottom": 730
|
|
136
|
+
}
|
|
137
|
+
//....
|
|
138
|
+
],
|
|
139
|
+
"ignoredBoxes": [
|
|
140
|
+
{
|
|
141
|
+
"left": 159,
|
|
142
|
+
"top": 652,
|
|
143
|
+
"right": 356,
|
|
144
|
+
"bottom": 703
|
|
145
|
+
}
|
|
146
|
+
//...
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
"fileData": {
|
|
150
|
+
"actualFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
|
|
151
|
+
"baselineFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
|
|
152
|
+
"diffFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
|
|
153
|
+
"fileName": "examplePageFail-local-chrome-latest-1366x768.png",
|
|
154
|
+
"size": {
|
|
155
|
+
"actual": {
|
|
156
|
+
"height": 768,
|
|
157
|
+
"width": 1366
|
|
124
158
|
},
|
|
125
|
-
"
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
"diffFilePath": "/Users/wswebcreation/Git/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
|
|
129
|
-
"fileName": "examplePageFail-local-chrome-latest-1366x768.png",
|
|
130
|
-
"size": {
|
|
131
|
-
"actual": {
|
|
132
|
-
"height": 768,
|
|
133
|
-
"width": 1366
|
|
134
|
-
},
|
|
135
|
-
"baseline": {
|
|
136
|
-
"height": 768,
|
|
137
|
-
"width": 1366
|
|
138
|
-
},
|
|
139
|
-
"diff": {
|
|
140
|
-
"height": 768,
|
|
141
|
-
"width": 1366
|
|
142
|
-
}
|
|
143
|
-
}
|
|
159
|
+
"baseline": {
|
|
160
|
+
"height": 768,
|
|
161
|
+
"width": 1366
|
|
144
162
|
},
|
|
145
|
-
"
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
163
|
+
"diff": {
|
|
164
|
+
"height": 768,
|
|
165
|
+
"width": 1366
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
"misMatchPercentage": "12.90",
|
|
170
|
+
"rawMisMatchPercentage": 12.900729014153246
|
|
171
|
+
}
|
|
172
|
+
```
|
|
149
173
|
|
|
150
|
-
|
|
174
|
+
When all tests are executed, a new JSON file with the collection of the comparisons will be generated and can be found in the root of your actual folder. The data is grouped by:
|
|
151
175
|
|
|
152
|
-
|
|
153
|
-
|
|
176
|
+
- `describe` for Jasmine/Mocha or `Feature` for CucumberJS
|
|
177
|
+
- `it` for Jasmine/Mocha or `Scenario` for CucumberJS
|
|
154
178
|
|
|
155
|
-
|
|
179
|
+
and then sorted by:
|
|
156
180
|
|
|
157
|
-
|
|
158
|
-
|
|
181
|
+
- `commandName`, which are the compare method names used to compare the images
|
|
182
|
+
- `instanceData`, browser first, then device, then platform
|
|
159
183
|
|
|
160
|
-
|
|
184
|
+
it will look like this
|
|
161
185
|
|
|
162
|
-
|
|
163
|
-
|
|
186
|
+
```json
|
|
187
|
+
[
|
|
188
|
+
{
|
|
189
|
+
"description": "check methods",
|
|
190
|
+
"data": [
|
|
164
191
|
{
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
"rawMisMatchPercentage": 1.335403703025868
|
|
195
|
-
}
|
|
196
|
-
]
|
|
197
|
-
}
|
|
198
|
-
]
|
|
192
|
+
"test": "should fail comparing with a baseline",
|
|
193
|
+
"data": [
|
|
194
|
+
{
|
|
195
|
+
"tag": "examplePageFail",
|
|
196
|
+
"instanceData": {},
|
|
197
|
+
"commandName": "checkScreen",
|
|
198
|
+
"framework": "mocha",
|
|
199
|
+
"boundingBoxes": {
|
|
200
|
+
"diffBoundingBoxes": [],
|
|
201
|
+
"ignoredBoxes": []
|
|
202
|
+
},
|
|
203
|
+
"fileData": {},
|
|
204
|
+
"misMatchPercentage": "14.34",
|
|
205
|
+
"rawMisMatchPercentage": 14.335403703025868
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"tag": "exampleElementFail",
|
|
209
|
+
"instanceData": {},
|
|
210
|
+
"commandName": "checkElement",
|
|
211
|
+
"framework": "mocha",
|
|
212
|
+
"boundingBoxes": {
|
|
213
|
+
"diffBoundingBoxes": [],
|
|
214
|
+
"ignoredBoxes": []
|
|
215
|
+
},
|
|
216
|
+
"fileData": {},
|
|
217
|
+
"misMatchPercentage": "1.34",
|
|
218
|
+
"rawMisMatchPercentage": 1.335403703025868
|
|
219
|
+
}
|
|
220
|
+
]
|
|
199
221
|
}
|
|
200
|
-
|
|
201
|
-
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
]
|
|
225
|
+
```
|
|
202
226
|
|
|
203
|
-
|
|
227
|
+
The report data will give you the opportunity to build your own visual report without doing all the magic and data collection yourself.
|
|
204
228
|
|
|
205
|
-
|
|
229
|
+
### webdriver-image-comparison
|
|
206
230
|
|
|
207
|
-
|
|
231
|
+
#### ๐ New Features
|
|
208
232
|
|
|
209
|
-
|
|
233
|
+
- Add support to generate single JSON report files
|
|
210
234
|
|
|
211
|
-
|
|
235
|
+
### @wdio/ocr-service
|
|
212
236
|
|
|
213
|
-
|
|
237
|
+
#### ๐
Polish
|
|
214
238
|
|
|
215
|
-
|
|
239
|
+
- Refactored the CLI to use `@inquirer/prompts` instead of `inquirer`
|
|
216
240
|
|
|
217
|
-
|
|
241
|
+
### Committers: 1
|
|
218
242
|
|
|
219
|
-
|
|
243
|
+
- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
|
|
220
244
|
|
|
221
|
-
|
|
245
|
+
```
|
|
222
246
|
|
|
223
|
-
|
|
247
|
+
```
|
|
224
248
|
|
|
225
249
|
### Patch Changes
|
|
226
250
|
|
|
227
|
-
-
|
|
228
|
-
|
|
251
|
+
- Updated dependencies [0b01b64]
|
|
252
|
+
- webdriver-image-comparison@6.1.0
|
|
229
253
|
|
|
230
254
|
## 5.1.1
|
|
231
255
|
|
|
232
256
|
### Patch Changes
|
|
233
257
|
|
|
234
|
-
-
|
|
258
|
+
- 26c1a17: This release contains better support for Multiremote tests on the instances and global level, including better Native App support. This is related to issue https://github.com/webdriverio/visual-testing/issues/418 which is fixed by this release
|
|
235
259
|
|
|
236
|
-
|
|
260
|
+
# ๐
Polish
|
|
237
261
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
262
|
+
- cab1219: Update dependencies
|
|
263
|
+
- 2583542 / 8b1f837: add new tests
|
|
264
|
+
- eec29e1 / e2b2d38: update images
|
|
241
265
|
|
|
242
|
-
|
|
266
|
+
# ๐ Bug Fixes
|
|
243
267
|
|
|
244
|
-
|
|
268
|
+
- 29f6f82 / 1ba9817: fix issue https://github.com/webdriverio/visual-testing/issues/418
|
|
245
269
|
|
|
246
|
-
|
|
270
|
+
# Committers: 1
|
|
247
271
|
|
|
248
|
-
|
|
272
|
+
- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
|
|
249
273
|
|
|
250
|
-
-
|
|
251
|
-
|
|
274
|
+
- Updated dependencies [26c1a17]
|
|
275
|
+
- webdriver-image-comparison@6.0.2
|
|
252
276
|
|
|
253
277
|
## 5.1.0
|
|
254
278
|
|
|
255
279
|
### Minor Changes
|
|
256
280
|
|
|
257
|
-
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
});
|
|
281
|
-
|
|
282
|
-
it("should create screenshots for the logged out state when it logs in", async () => {
|
|
283
|
-
const componentId = "example-page--logged-out";
|
|
284
|
-
await browser.waitForStorybookComponentToBeLoaded({
|
|
285
|
-
id: componentId,
|
|
286
|
-
});
|
|
287
|
-
|
|
288
|
-
await expect($("header")).toMatchElementSnapshot(
|
|
289
|
-
`${componentId}-logged-out-state`
|
|
290
|
-
);
|
|
291
|
-
await $("button=Log in").click();
|
|
292
|
-
await expect($("header")).toMatchElementSnapshot(
|
|
293
|
-
`${componentId}-logged-in-state`
|
|
294
|
-
);
|
|
295
|
-
});
|
|
281
|
+
- a0e29f2: Adding storybook interaction testing
|
|
282
|
+
|
|
283
|
+
### Storybook Interaction Testing
|
|
284
|
+
|
|
285
|
+
Storybook Interaction Testing allows you to interact with your component by creating custom scripts with WDIO commands to set a component into a certain state. For example, see the code snippet below:
|
|
286
|
+
|
|
287
|
+
```ts
|
|
288
|
+
import { browser, expect } from "@wdio/globals";
|
|
289
|
+
|
|
290
|
+
describe("Storybook Interaction", () => {
|
|
291
|
+
it("should create screenshots for the logged in state when it logs out", async () => {
|
|
292
|
+
const componentId = "example-page--logged-in";
|
|
293
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
294
|
+
id: componentId,
|
|
295
|
+
});
|
|
296
|
+
|
|
297
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
298
|
+
`${componentId}-logged-in-state`
|
|
299
|
+
);
|
|
300
|
+
await $("button=Log out").click();
|
|
301
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
302
|
+
`${componentId}-logged-out-state`
|
|
303
|
+
);
|
|
296
304
|
});
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
### New Custom Command
|
|
314
|
-
|
|
315
|
-
A new custom command called `browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' })` will be added to the `browser/driver`-object that will automatically load the component and wait for it to be done, so you don't need to use the `browser.url('url.com')` method. It can be used like this
|
|
316
|
-
|
|
317
|
-
```ts
|
|
318
|
-
import { browser, expect } from "@wdio/globals";
|
|
319
|
-
|
|
320
|
-
describe("Storybook Interaction", () => {
|
|
321
|
-
it("should create screenshots for the logged in state when it logs out", async () => {
|
|
322
|
-
const componentId = "example-page--logged-in";
|
|
323
|
-
await browser.waitForStorybookComponentToBeLoaded({
|
|
324
|
-
id: componentId,
|
|
325
|
-
});
|
|
326
|
-
|
|
327
|
-
await expect($("header")).toMatchElementSnapshot(
|
|
328
|
-
`${componentId}-logged-in-state`
|
|
329
|
-
);
|
|
330
|
-
await $("button=Log out").click();
|
|
331
|
-
await expect($("header")).toMatchElementSnapshot(
|
|
332
|
-
`${componentId}-logged-out-state`
|
|
333
|
-
);
|
|
334
|
-
});
|
|
335
|
-
|
|
336
|
-
it("should create screenshots for the logged out state when it logs in", async () => {
|
|
337
|
-
const componentId = "example-page--logged-out";
|
|
338
|
-
await browser.waitForStorybookComponentToBeLoaded({
|
|
339
|
-
id: componentId,
|
|
340
|
-
});
|
|
341
|
-
|
|
342
|
-
await expect($("header")).toMatchElementSnapshot(
|
|
343
|
-
`${componentId}-logged-out-state`
|
|
344
|
-
);
|
|
345
|
-
await $("button=Log in").click();
|
|
346
|
-
await expect($("header")).toMatchElementSnapshot(
|
|
347
|
-
`${componentId}-logged-in-state`
|
|
348
|
-
);
|
|
349
|
-
});
|
|
305
|
+
|
|
306
|
+
it("should create screenshots for the logged out state when it logs in", async () => {
|
|
307
|
+
const componentId = "example-page--logged-out";
|
|
308
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
309
|
+
id: componentId,
|
|
310
|
+
});
|
|
311
|
+
|
|
312
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
313
|
+
`${componentId}-logged-out-state`
|
|
314
|
+
);
|
|
315
|
+
await $("button=Log in").click();
|
|
316
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
317
|
+
`${componentId}-logged-in-state`
|
|
318
|
+
);
|
|
350
319
|
});
|
|
351
|
-
|
|
320
|
+
});
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
Two tests on two different components are executed. Each test first sets a state and then takes a screenshot. You will also notice that a new custom command has been introduced, which can be found [here](#new-custom-command).
|
|
324
|
+
|
|
325
|
+
The above spec file can be saved in a folder and added to the command line with the following command:
|
|
326
|
+
|
|
327
|
+
```sh
|
|
328
|
+
npm run test.local.desktop.storybook.localhost -- --spec='tests/specs/storybook-interaction/*.ts'
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
The Storybook runner will first automatically scan your Storybook instance and then add your tests to the stories that need to be compared. If you don't want the components that you use for interaction testing to be compared twice, you can add a filter to remove the "default" stories from the scan by providing the [`--skipStories`](#--skipstories) filter. This would look like this:
|
|
352
332
|
|
|
353
|
-
|
|
333
|
+
```sh
|
|
334
|
+
npm run test.local.desktop.storybook.localhost -- --skipStories="/example-page.*/gm" --spec='tests/specs/storybook-interaction/*.ts'
|
|
335
|
+
```
|
|
354
336
|
|
|
355
|
-
|
|
337
|
+
### New Custom Command
|
|
356
338
|
|
|
357
|
-
|
|
358
|
-
- **Mandatory:** No
|
|
359
|
-
- **Default:** `#storybook-root > :first-child` for Storybook V7 and `#root > :first-child:not(script):not(style)` for Storybook V6
|
|
360
|
-
- **Example:**
|
|
339
|
+
A new custom command called `browser.waitForStorybookComponentToBeLoaded({ id: 'componentId' })` will be added to the `browser/driver`-object that will automatically load the component and wait for it to be done, so you don't need to use the `browser.url('url.com')` method. It can be used like this
|
|
361
340
|
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
341
|
+
```ts
|
|
342
|
+
import { browser, expect } from "@wdio/globals";
|
|
343
|
+
|
|
344
|
+
describe("Storybook Interaction", () => {
|
|
345
|
+
it("should create screenshots for the logged in state when it logs out", async () => {
|
|
346
|
+
const componentId = "example-page--logged-in";
|
|
347
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
348
|
+
id: componentId,
|
|
349
|
+
});
|
|
350
|
+
|
|
351
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
352
|
+
`${componentId}-logged-in-state`
|
|
353
|
+
);
|
|
354
|
+
await $("button=Log out").click();
|
|
355
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
356
|
+
`${componentId}-logged-out-state`
|
|
357
|
+
);
|
|
366
358
|
});
|
|
367
|
-
```
|
|
368
359
|
|
|
369
|
-
|
|
360
|
+
it("should create screenshots for the logged out state when it logs in", async () => {
|
|
361
|
+
const componentId = "example-page--logged-out";
|
|
362
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
363
|
+
id: componentId,
|
|
364
|
+
});
|
|
365
|
+
|
|
366
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
367
|
+
`${componentId}-logged-out-state`
|
|
368
|
+
);
|
|
369
|
+
await $("button=Log in").click();
|
|
370
|
+
await expect($("header")).toMatchElementSnapshot(
|
|
371
|
+
`${componentId}-logged-in-state`
|
|
372
|
+
);
|
|
373
|
+
});
|
|
374
|
+
});
|
|
375
|
+
```
|
|
370
376
|
|
|
371
|
-
|
|
372
|
-
- for the element to wait to be visible before a screenshot is taken
|
|
377
|
+
The options are:
|
|
373
378
|
|
|
374
|
-
|
|
379
|
+
#### `clipSelector`
|
|
375
380
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
381
|
+
- **Type:** `string`
|
|
382
|
+
- **Mandatory:** No
|
|
383
|
+
- **Default:** `#storybook-root > :first-child` for Storybook V7 and `#root > :first-child:not(script):not(style)` for Storybook V6
|
|
384
|
+
- **Example:**
|
|
379
385
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
386
|
+
```ts
|
|
387
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
388
|
+
clipSelector: "#your-selector",
|
|
389
|
+
id: "componentId",
|
|
390
|
+
});
|
|
391
|
+
```
|
|
383
392
|
|
|
384
|
-
|
|
393
|
+
This is the selector that will be used:
|
|
385
394
|
|
|
386
|
-
|
|
395
|
+
- to select the element to take the screenshot of
|
|
396
|
+
- for the element to wait to be visible before a screenshot is taken
|
|
387
397
|
|
|
388
|
-
|
|
389
|
-
- **Mandatory:** No
|
|
390
|
-
- **Default:** 1100 milliseconds
|
|
391
|
-
- **Example:**
|
|
398
|
+
#### `id`
|
|
392
399
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
timeout: 20000,
|
|
397
|
-
});
|
|
398
|
-
```
|
|
400
|
+
- **Type:** `string`
|
|
401
|
+
- **Mandatory:** yes
|
|
402
|
+
- **Example:**
|
|
399
403
|
|
|
400
|
-
|
|
404
|
+
```ts
|
|
405
|
+
await browser.waitForStorybookComponentToBeLoaded({ '#your-selector', id: 'componentId' })
|
|
406
|
+
```
|
|
401
407
|
|
|
402
|
-
|
|
408
|
+
Use the `id` of the story that can be found in the URL of the story. For example, the `id` in this URL `http://localhost:6006/?path=/story/example-page--logged-out` is `example-page--logged-out`
|
|
403
409
|
|
|
404
|
-
|
|
405
|
-
- **Mandatory:** No
|
|
406
|
-
- **Default:** `http://127.0.0.1:6006`
|
|
407
|
-
- **Example:**
|
|
410
|
+
#### `timeout`
|
|
408
411
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
412
|
+
- **Type:** `number`
|
|
413
|
+
- **Mandatory:** No
|
|
414
|
+
- **Default:** 1100 milliseconds
|
|
415
|
+
- **Example:**
|
|
416
|
+
|
|
417
|
+
```ts
|
|
418
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
419
|
+
id: "componentId",
|
|
420
|
+
timeout: 20000,
|
|
421
|
+
});
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
The max timeout we want to wait for a component to be visible after loading on the page
|
|
425
|
+
|
|
426
|
+
#### `url`
|
|
415
427
|
|
|
416
|
-
|
|
428
|
+
- **Type:** `string`
|
|
429
|
+
- **Mandatory:** No
|
|
430
|
+
- **Default:** `http://127.0.0.1:6006`
|
|
431
|
+
- **Example:**
|
|
432
|
+
|
|
433
|
+
```ts
|
|
434
|
+
await browser.waitForStorybookComponentToBeLoaded({
|
|
435
|
+
id: "componentId",
|
|
436
|
+
url: "https://your.url",
|
|
437
|
+
});
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
The URL where your Storybook instance is hosted.
|
|
417
441
|
|
|
418
442
|
## 5.0.1
|
|
419
443
|
|
|
420
444
|
### Patch Changes
|
|
421
445
|
|
|
422
|
-
-
|
|
423
|
-
-
|
|
424
|
-
|
|
446
|
+
- 169b7c5: fix(webdriver-image-comparison): export WicElement
|
|
447
|
+
- Updated dependencies [169b7c5]
|
|
448
|
+
- webdriver-image-comparison@6.0.1
|
|
425
449
|
|
|
426
450
|
## 5.0.0
|
|
427
451
|
|
|
428
452
|
### Major Changes
|
|
429
453
|
|
|
430
|
-
-
|
|
454
|
+
- 66b9f11: # ๐ฅ Breaking
|
|
431
455
|
|
|
432
|
-
|
|
456
|
+
This PR replaces Canvas as a dependency with Jimp. This removes the need to use system dependencies and will reduce the number of system dependency errors/issues (node-gyp/canvas and so on). This will, in the end, make the life of our end users way easier due to:
|
|
433
457
|
|
|
434
|
-
|
|
435
|
-
|
|
458
|
+
- less errors
|
|
459
|
+
- less complex test environments
|
|
436
460
|
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
461
|
+
> [!note]
|
|
462
|
+
> Extensive research has been done and we have chosen to "fork" ResembleJS, adjust it by making use of Jimp instead of Canvas and break the browser API because the fork will only be used in a nodejs environment
|
|
463
|
+
> Investigation showed that creating a wrapper would even make it slower, so we went for the breaking change in the API by just replacing Canvas with Jimp
|
|
440
464
|
|
|
441
|
-
|
|
442
|
-
|
|
465
|
+
> [!important]
|
|
466
|
+
> There is a performance impact where Canvas is around 70% faster than Jimp. This has been measured without using WebdriverIO and only comparing images. When the "old" implementation with WebdriverIO combined with Canvas or Jimp is compared, we hardly see a performance impact.
|
|
443
467
|
|
|
444
|
-
|
|
468
|
+
# ๐ New Features
|
|
445
469
|
|
|
446
|
-
|
|
470
|
+
Update the baseline images through the command line by adding the argument `--update-visual-baseline`. This will
|
|
447
471
|
|
|
448
|
-
|
|
449
|
-
|
|
472
|
+
- automatically copy the actual take screenshot and put it in the baseline folder
|
|
473
|
+
- if there are differences it will let the test pass because the baseline has been updated
|
|
450
474
|
|
|
451
|
-
|
|
475
|
+
**Usage:**
|
|
452
476
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
477
|
+
```sh
|
|
478
|
+
npm run test.local.desktop --update-visual-baseline
|
|
479
|
+
```
|
|
456
480
|
|
|
457
|
-
|
|
481
|
+
When running logs info/debug mode you will see the following logs added
|
|
458
482
|
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
483
|
+
```logs
|
|
484
|
+
[0-0] ..............
|
|
485
|
+
[0-0] #####################################################################################
|
|
486
|
+
[0-0] INFO:
|
|
487
|
+
[0-0] Updated the actual image to
|
|
488
|
+
[0-0] /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
|
|
489
|
+
[0-0] #####################################################################################
|
|
490
|
+
[0-0] ..........
|
|
491
|
+
```
|
|
468
492
|
|
|
469
|
-
|
|
493
|
+
# ๐
Polish
|
|
470
494
|
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
495
|
+
- remove Vitest fix
|
|
496
|
+
- add app images
|
|
497
|
+
- update the build
|
|
474
498
|
|
|
475
499
|
### Patch Changes
|
|
476
500
|
|
|
477
|
-
-
|
|
478
|
-
|
|
501
|
+
- Updated dependencies [66b9f11]
|
|
502
|
+
- webdriver-image-comparison@6.0.0
|
|
479
503
|
|
|
480
504
|
## 4.1.3
|
|
481
505
|
|
|
@@ -483,301 +507,301 @@ We've update all dependencies.
|
|
|
483
507
|
|
|
484
508
|
# ๐ Bug Fixes
|
|
485
509
|
|
|
486
|
-
-
|
|
487
|
-
-
|
|
510
|
+
- Fixes https://github.com/webdriverio/visual-testing/issues/286
|
|
511
|
+
- Fixes https://github.com/webdriverio/visual-testing/issues/333
|
|
488
512
|
|
|
489
513
|
## 4.1.2
|
|
490
514
|
|
|
491
515
|
### Patch Changes
|
|
492
516
|
|
|
493
|
-
-
|
|
517
|
+
- 7713c13: Fix beforeTest incl types
|
|
494
518
|
|
|
495
519
|
## 4.1.1
|
|
496
520
|
|
|
497
521
|
### Patch Changes
|
|
498
522
|
|
|
499
|
-
-
|
|
523
|
+
- 4dcfeea: add missing dependency and update deps
|
|
500
524
|
|
|
501
525
|
## 4.1.0
|
|
502
526
|
|
|
503
527
|
### Minor Changes
|
|
504
528
|
|
|
505
|
-
-
|
|
529
|
+
- c9fab82: change console.log to wdio logger
|
|
506
530
|
|
|
507
531
|
### Patch Changes
|
|
508
532
|
|
|
509
|
-
-
|
|
510
|
-
|
|
533
|
+
- Updated dependencies [c9fab82]
|
|
534
|
+
- webdriver-image-comparison@5.1.0
|
|
511
535
|
|
|
512
536
|
## 4.0.2
|
|
513
537
|
|
|
514
538
|
### Patch Changes
|
|
515
539
|
|
|
516
|
-
-
|
|
540
|
+
- f878cab: # ๐ Feature
|
|
517
541
|
|
|
518
|
-
|
|
542
|
+
- Add device support for Storybook, it can be used like this
|
|
519
543
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
544
|
+
```sh
|
|
545
|
+
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
|
|
546
|
+
```
|
|
523
547
|
|
|
524
|
-
|
|
548
|
+
#### Committers: 1
|
|
525
549
|
|
|
526
|
-
|
|
550
|
+
- Wim Selles ([@wswebcreation](https://github.com/wswebcreation))
|
|
527
551
|
|
|
528
|
-
-
|
|
529
|
-
|
|
552
|
+
- Updated dependencies [f878cab]
|
|
553
|
+
- webdriver-image-comparison@5.0.1
|
|
530
554
|
|
|
531
555
|
## 4.0.1
|
|
532
556
|
|
|
533
557
|
### Patch Changes
|
|
534
558
|
|
|
535
|
-
-
|
|
559
|
+
- bb4ece7: Fix storybook filtering
|
|
536
560
|
|
|
537
561
|
## 4.0.0
|
|
538
562
|
|
|
539
563
|
### Major Changes
|
|
540
564
|
|
|
541
|
-
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
],
|
|
565
|
+
- b717d9a: # ๐ฅ Breaking changes
|
|
566
|
+
|
|
567
|
+
- the new element screenshot is producing "smaller" screenshots on certain Android OS versions (not all), but it's more "accurate" so we accept this
|
|
568
|
+
|
|
569
|
+
# ๐ New Features
|
|
570
|
+
|
|
571
|
+
## Add StoryBook๐ support
|
|
572
|
+
|
|
573
|
+
Automatically scan local/remote storybook instances to create element screenshots of each component by adding
|
|
574
|
+
|
|
575
|
+
```ts
|
|
576
|
+
export const config: WebdriverIO.Config = {
|
|
577
|
+
// ...
|
|
578
|
+
services: ["visual"],
|
|
579
|
+
// ....
|
|
580
|
+
};
|
|
581
|
+
```
|
|
582
|
+
|
|
583
|
+
to your `services` and running `npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook` through the command line.
|
|
584
|
+
It will automatically use Chrome. The following options can be provided through the command line
|
|
585
|
+
|
|
586
|
+
- `--headless`, defaults to `true`
|
|
587
|
+
- `--numShards {number}`, this will be the amount of parallel instances that will be used to run the stories. This will be limited by the `maxInstances` in your `wdio.conf`-file. When running in `headless`-mode then do not increase the number to more than 20 to prevent flakiness
|
|
588
|
+
- `--clip {boolean}`, try to take an element instead of a viewport screenshot, defaults to `true`
|
|
589
|
+
- `--clipSelector {string}`, this is the selector that will be used to:
|
|
590
|
+
|
|
591
|
+
- select the element to take the screenshot of
|
|
592
|
+
- the element to wait for to be visible before a screenshot is taken
|
|
593
|
+
|
|
594
|
+
defaults to `#storybook-root > :first-child` for V7 and `#root > :first-child:not(script):not(style)` for V6
|
|
595
|
+
|
|
596
|
+
- `--version`, the version of storybook, defaults to 7. This is needed to know if the V6 `clipSelector` needs to be used.
|
|
597
|
+
- `--browsers {edge,chrome,safari,firefox}`, defaults to Chrome
|
|
598
|
+
- `--skipStories`, this can be:
|
|
599
|
+
- a string (`example-button--secondary,example-button--small`)
|
|
600
|
+
- or a regex (`"/.*button.*/gm"`) to skip certain stories
|
|
601
|
+
|
|
602
|
+
You can also provide service options
|
|
603
|
+
|
|
604
|
+
```ts
|
|
605
|
+
export const config: WebdriverIO.Config = {
|
|
606
|
+
// ...
|
|
607
|
+
services: [
|
|
608
|
+
[
|
|
609
|
+
'visual',
|
|
610
|
+
{
|
|
611
|
+
// Some default options
|
|
612
|
+
baselineFolder: join(process.cwd(), './__snapshots__/'),
|
|
613
|
+
debug: true,
|
|
614
|
+
// The storybook options
|
|
615
|
+
storybook: {
|
|
616
|
+
clip: false,
|
|
617
|
+
clipSelector: ''#some-id,
|
|
618
|
+
numShards: 4,
|
|
619
|
+
skipStories: ['example-button--secondary', 'example-button--small'],
|
|
620
|
+
url: 'https://www.bbc.co.uk/iplayer/storybook/',
|
|
621
|
+
version: 6,
|
|
622
|
+
},
|
|
623
|
+
},
|
|
601
624
|
],
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
625
|
+
],
|
|
626
|
+
// ....
|
|
627
|
+
}
|
|
628
|
+
```
|
|
605
629
|
|
|
606
|
-
|
|
630
|
+
The baseline images will be stored in the following structure:
|
|
607
631
|
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
632
|
+
```log
|
|
633
|
+
{projectRoot}
|
|
634
|
+
|_`__snapshots__`
|
|
635
|
+
|_`{category}`
|
|
636
|
+
|_`{componentName}`
|
|
637
|
+
|_{browserName}
|
|
638
|
+
|_`{{component-id}-element-{browser}-{resolution}-dpr-{dprValue}}.png`
|
|
639
|
+
```
|
|
616
640
|
|
|
617
|
-
|
|
641
|
+
which will look like this
|
|
618
642
|
|
|
619
|
-
|
|
643
|
+
|
|
620
644
|
|
|
621
|
-
|
|
622
|
-
|
|
645
|
+
> [!NOTE]
|
|
646
|
+
> Storybook 6.5 or higher is supported
|
|
623
647
|
|
|
624
|
-
|
|
648
|
+
# ๐
Polish
|
|
625
649
|
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
650
|
+
- `hideScrollBars` is disabled by default when using the Storybook runner
|
|
651
|
+
- By default, all element screenshots in the browser, except for iOS, will use the native method to take element screenshots. This will make taking an element screenshot more than 5% faster. If it fails it will fall back to the "viewport" screenshot and create a cropped element screenshot.
|
|
652
|
+
- Taking an element screenshot becomes 70% faster due to removing the fixed scroll delay of 500ms and changing the default scrolling behaviour to an instant scroll
|
|
653
|
+
- refactor web element screenshots and update the screenshots
|
|
654
|
+
- added more UTs to increase the coverage
|
|
631
655
|
|
|
632
|
-
|
|
656
|
+
# ๐ Bug Fixes
|
|
633
657
|
|
|
634
|
-
|
|
658
|
+
- When the element has no height or width, we default to the viewport screen size to prevent not cropping any screenshot. An error like below will be logged in red
|
|
635
659
|
|
|
636
|
-
|
|
660
|
+
```logs
|
|
637
661
|
|
|
638
|
-
|
|
662
|
+
The element has no width or height. We defaulted to the viewport screen size of width: ${width} and height: ${height}.
|
|
639
663
|
|
|
640
|
-
|
|
664
|
+
```
|
|
641
665
|
|
|
642
|
-
|
|
666
|
+
- There were cases where element screenshots were automatically rotated which was not intended
|
|
643
667
|
|
|
644
668
|
### Patch Changes
|
|
645
669
|
|
|
646
|
-
-
|
|
647
|
-
|
|
670
|
+
- Updated dependencies [b717d9a]
|
|
671
|
+
- webdriver-image-comparison@5.0.0
|
|
648
672
|
|
|
649
673
|
## 3.1.0
|
|
650
674
|
|
|
651
675
|
### Minor Changes
|
|
652
676
|
|
|
653
|
-
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
677
|
+
- 43ed502: Add font loading features:
|
|
678
|
+
- add `waitForFontsLoaded` so the module automatically waits for all fonts to be loaded, enabled by default
|
|
679
|
+
- add `enableLayoutTesting` so all text will become transparent so
|
|
680
|
+
- font rendering issues won't cause flakiness
|
|
681
|
+
- image comparison can be done on layout
|
|
658
682
|
|
|
659
683
|
### Patch Changes
|
|
660
684
|
|
|
661
|
-
-
|
|
662
|
-
|
|
685
|
+
- Updated dependencies [43ed502]
|
|
686
|
+
- webdriver-image-comparison@4.1.0
|
|
663
687
|
|
|
664
688
|
## 3.0.2
|
|
665
689
|
|
|
666
690
|
### Patch Changes
|
|
667
691
|
|
|
668
|
-
-
|
|
669
|
-
|
|
692
|
+
- 14b6ae6: Support BS real device names
|
|
693
|
+
Fix hide/remove elements
|
|
670
694
|
|
|
671
695
|
## 3.0.1
|
|
672
696
|
|
|
673
697
|
### Patch Changes
|
|
674
698
|
|
|
675
|
-
-
|
|
676
|
-
-
|
|
677
|
-
|
|
699
|
+
- c8fdcd3: Fix to override visibility/display value
|
|
700
|
+
- Updated dependencies [c8fdcd3]
|
|
701
|
+
- webdriver-image-comparison@4.0.2
|
|
678
702
|
|
|
679
703
|
## 3.0.0
|
|
680
704
|
|
|
681
705
|
### Major Changes
|
|
682
706
|
|
|
683
|
-
-
|
|
707
|
+
- fd74a35: (feat): set default baseline folder next to test file
|
|
684
708
|
|
|
685
709
|
### Patch Changes
|
|
686
710
|
|
|
687
|
-
-
|
|
688
|
-
-
|
|
689
|
-
|
|
711
|
+
- e93a878: fix default snapshot path to be overwritten through method/service options
|
|
712
|
+
- Updated dependencies [fd74a35]
|
|
713
|
+
- webdriver-image-comparison@4.0.1
|
|
690
714
|
|
|
691
715
|
## 2.0.0
|
|
692
716
|
|
|
693
717
|
### Major Changes
|
|
694
718
|
|
|
695
|
-
-
|
|
719
|
+
- ef386b6: # ๐ฅ Breaking changes:
|
|
696
720
|
|
|
697
|
-
|
|
721
|
+
- `resizeDimensions` on the element can now only be an object, it has been deprecated for a while
|
|
698
722
|
|
|
699
|
-
|
|
723
|
+
# ๐
New Features
|
|
700
724
|
|
|
701
|
-
|
|
725
|
+
- Next to supporting Web snapshot testing this module now also supports ๐ฅ **Native App** ๐ฅ snapshot testing. The methods `saveElement|checkElement | saveScreen | checkScreen` and the matchers `toMatchElementSnapshot | toMatchScreenSnapshot` are available for **Native Apps**
|
|
702
726
|
|
|
703
|
-
|
|
704
|
-
|
|
727
|
+
> [!NOTE]
|
|
728
|
+
> This module will automatically detect the context (web | webview | native_app) and will handle all complex logic for you
|
|
705
729
|
|
|
706
|
-
|
|
730
|
+
The methods `saveFullPageScreen | checkFullPageScreen | saveTabbablePage|checkTabbablePage` will throw an error when they are used in the native context for native mobile apps and will look like this
|
|
707
731
|
|
|
708
|
-
|
|
709
|
-
|
|
732
|
+
```logs
|
|
733
|
+
$ wdio tests/configs/wdio.local.android.emus.app.conf.ts
|
|
710
734
|
|
|
711
|
-
|
|
735
|
+
Execution of 1 workers started at 2024-01-30T06:18:24.865Z
|
|
712
736
|
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
737
|
+
[0-0] RUNNING in Android - file:///tests/specs/mobile.app.spec.ts
|
|
738
|
+
[0-0] Error in "@wdio/visual-service mobile app.should compare a screen successful for 'Pixel_7_Pro_Android_14_API_34' in PORTRAIT-mode"
|
|
739
|
+
Error: The method saveFullPageScreen is not supported in native context for native mobile apps!
|
|
740
|
+
at /wdio/visual-testing/packages/webdriver-image-comparison/src/commands/saveFullPageScreen.ts:26:15
|
|
741
|
+
at step (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:33:23)
|
|
742
|
+
at Object.next (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:14:53)
|
|
743
|
+
at /wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:8:71
|
|
744
|
+
at new Promise (<anonymous>)
|
|
745
|
+
at __awaiter (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:4:12)
|
|
746
|
+
at saveFullPageScreen (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:47:12)
|
|
747
|
+
at Browser.<anonymous> (file:///wdio/visual-testing/packages/service/dist/service.js:101:24)
|
|
748
|
+
[0-0] FAILED in Android - file:///tests/specs/mobile.app.spec.ts
|
|
725
749
|
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
750
|
+
"spec" Reporter:
|
|
751
|
+
------------------------------------------------------------------
|
|
752
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] Running: /wdio/visual-testing/apps/app.apk on Android
|
|
753
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] Session ID: c1101184-e3d5-42b5-a31f-8ebaa211f1a1
|
|
754
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0]
|
|
755
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] ยป /tests/specs/mobile.app.spec.ts
|
|
756
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] @wdio/visual-service mobile app
|
|
757
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] โ should compare a screen successful for 'Pixel_7_Pro_Android_14_API_34' in PORTRAIT-mode
|
|
758
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0]
|
|
759
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] 1 failing (1.5s)
|
|
760
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0]
|
|
761
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] 1) @wdio/visual-service mobile app should compare a screen successful for 'Pixel_7_Pro_Android_14_API_34' in PORTRAIT-mode
|
|
762
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] The method saveFullPageScreen is not supported in native context for native mobile apps!
|
|
763
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] Error: The method saveFullPageScreen is not supported in native context for native mobile apps!
|
|
764
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at /wdio/visual-testing/packages/webdriver-image-comparison/src/commands/saveFullPageScreen.ts:26:15
|
|
765
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at step (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:33:23)
|
|
766
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at Object.next (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:14:53)
|
|
767
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at /wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:8:71
|
|
768
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at new Promise (<anonymous>)
|
|
769
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at __awaiter (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:4:12)
|
|
770
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at saveFullPageScreen (/wdio/visual-testing/packages/webdriver-image-comparison/dist/commands/saveFullPageScreen.js:47:12)
|
|
771
|
+
[/wdio/visual-testing/apps/app.apk Android #0-0] at Browser.<anonymous> (file:///wdio/visual-testing/packages/service/dist/service.js:101:24)
|
|
748
772
|
|
|
749
773
|
|
|
750
|
-
|
|
774
|
+
Spec Files: 0 passed, 1 failed, 1 total (100% completed) in 00:00:11
|
|
751
775
|
|
|
752
|
-
|
|
753
|
-
|
|
776
|
+
error Command failed with exit code 1.
|
|
777
|
+
```
|
|
754
778
|
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
779
|
+
- `autoSaveBaseline` is true by default, so if no baseline images are present it will automatically create a new baseline
|
|
780
|
+
- Mobile screenshots of the complete screen now automatically exclude all native OS elements like the notification bar, home bar, address bar, and so on, the settings `blockOutSideBar | blockOutStatusBar |blockOutToolBar` are now all defaulted to `true`
|
|
781
|
+
-
|
|
758
782
|
|
|
759
|
-
|
|
783
|
+
# ๐ Fixed bugs:
|
|
760
784
|
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
785
|
+
- element screenshots could also get resized dimensions, which would cut out a bigger portion around the element. This was failing when the dimensions got out of the boundaries of the official screenshot. This has now been fixed with:
|
|
786
|
+
- not going outside of the screenshot
|
|
787
|
+
- log extra warnings
|
|
764
788
|
|
|
765
789
|
### Patch Changes
|
|
766
790
|
|
|
767
|
-
-
|
|
768
|
-
|
|
791
|
+
- Updated dependencies [ef386b6]
|
|
792
|
+
- webdriver-image-comparison@4.0.0
|
|
769
793
|
|
|
770
794
|
## 1.0.0
|
|
771
795
|
|
|
772
796
|
### Major Changes
|
|
773
797
|
|
|
774
|
-
-
|
|
798
|
+
- 36d3868: Support for WebdriverIO v8
|
|
775
799
|
|
|
776
800
|
### Minor Changes
|
|
777
801
|
|
|
778
|
-
-
|
|
802
|
+
- 36d3868: (feat): add visual matcher
|
|
779
803
|
|
|
780
804
|
### Patch Changes
|
|
781
805
|
|
|
782
|
-
-
|
|
783
|
-
|
|
806
|
+
- Updated dependencies [36d3868]
|
|
807
|
+
- webdriver-image-comparison@3.0.0
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@wdio/visual-service",
|
|
3
3
|
"author": "Wim Selles - wswebcreation",
|
|
4
4
|
"description": "Image comparison / visual regression testing for WebdriverIO",
|
|
5
|
-
"version": "6.1
|
|
5
|
+
"version": "6.2.1",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://webdriver.io/docs/visual-testing",
|
|
8
8
|
"repository": {
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
"type": "module",
|
|
21
21
|
"types": "./dist/index.d.ts",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@wdio/globals": "^9.1
|
|
24
|
-
"@wdio/logger": "^9.1.
|
|
25
|
-
"@wdio/types": "^9.1.
|
|
23
|
+
"@wdio/globals": "^9.2.1",
|
|
24
|
+
"@wdio/logger": "^9.1.3",
|
|
25
|
+
"@wdio/types": "^9.1.3",
|
|
26
26
|
"node-fetch": "^3.3.2",
|
|
27
|
-
"webdriver-image-comparison": "^7.1
|
|
27
|
+
"webdriver-image-comparison": "^7.2.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {},
|
|
30
30
|
"scripts": {
|