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