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