@applitools/eyes-webdriverio 5.45.4 → 5.46.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 CHANGED
@@ -1,5 +1,90 @@
1
1
  # Changelog
2
2
 
3
+ ## [5.46.0](https://github.com/applitools/eyes.sdk.javascript1/compare/js/eyes-webdriverio-v5.45.6...js/eyes-webdriverio@5.46.0) (2023-09-11)
4
+
5
+
6
+ ### Features
7
+
8
+ * rework log event on opent eyes ([#1842](https://github.com/applitools/eyes.sdk.javascript1/issues/1842)) ([532756b](https://github.com/applitools/eyes.sdk.javascript1/commit/532756b75c1023967c3781316148c890dbcfaac8))
9
+
10
+
11
+ ### Code Refactoring
12
+
13
+ * refactored spec driver interface ([#1839](https://github.com/applitools/eyes.sdk.javascript1/issues/1839)) ([aa49ec2](https://github.com/applitools/eyes.sdk.javascript1/commit/aa49ec2a7d14b8529acc3a8a4c2baecfa113d98a))
14
+
15
+
16
+ ### Dependencies
17
+
18
+ * @applitools/core bumped to 3.10.3
19
+ #### Bug Fixes
20
+
21
+ * suppport coded regions with layoutBreakpoints reload ([7903347](https://github.com/applitools/eyes.sdk.javascript1/commit/79033472b9475992a44cf3828ff334c958ae2066))
22
+ * @applitools/eyes bumped to 1.8.3
23
+
24
+
25
+ ## [5.45.5](https://github.com/applitools/eyes.sdk.javascript1/compare/js/eyes-webdriverio@5.45.4...js/eyes-webdriverio@5.45.5) (2023-09-04)
26
+
27
+
28
+ ### Dependencies
29
+
30
+ * @applitools/utils bumped to 1.6.0
31
+ #### Features
32
+
33
+ * add support for fallback in `req` ([#1899](https://github.com/applitools/eyes.sdk.javascript1/issues/1899)) ([d69c4b5](https://github.com/applitools/eyes.sdk.javascript1/commit/d69c4b5830370c471dfc25b6e2caddca8b458df9))
34
+ * @applitools/socket bumped to 1.1.10
35
+
36
+ * @applitools/req bumped to 1.6.0
37
+ #### Features
38
+
39
+ * add support for fallback in `req` ([#1899](https://github.com/applitools/eyes.sdk.javascript1/issues/1899)) ([d69c4b5](https://github.com/applitools/eyes.sdk.javascript1/commit/d69c4b5830370c471dfc25b6e2caddca8b458df9))
40
+ * update testcafe ([#1884](https://github.com/applitools/eyes.sdk.javascript1/issues/1884)) ([104f1b6](https://github.com/applitools/eyes.sdk.javascript1/commit/104f1b6cc0d4f107ba46404383de2fa11fe99dcf))
41
+
42
+
43
+
44
+ * @applitools/image bumped to 1.1.5
45
+
46
+ * @applitools/spec-driver-webdriver bumped to 1.0.44
47
+
48
+ * @applitools/spec-driver-selenium bumped to 1.5.58
49
+
50
+ * @applitools/spec-driver-puppeteer bumped to 1.2.0
51
+ #### Features
52
+
53
+ * update testcafe ([#1884](https://github.com/applitools/eyes.sdk.javascript1/issues/1884)) ([104f1b6](https://github.com/applitools/eyes.sdk.javascript1/commit/104f1b6cc0d4f107ba46404383de2fa11fe99dcf))
54
+
55
+
56
+
57
+ * @applitools/ufg-client bumped to 1.8.0
58
+ #### Features
59
+
60
+ * add support for fallback in `req` ([#1899](https://github.com/applitools/eyes.sdk.javascript1/issues/1899)) ([d69c4b5](https://github.com/applitools/eyes.sdk.javascript1/commit/d69c4b5830370c471dfc25b6e2caddca8b458df9))
61
+
62
+
63
+
64
+ * @applitools/logger bumped to 2.0.10
65
+
66
+ * @applitools/driver bumped to 1.14.0
67
+ #### Features
68
+
69
+ * update testcafe ([#1884](https://github.com/applitools/eyes.sdk.javascript1/issues/1884)) ([104f1b6](https://github.com/applitools/eyes.sdk.javascript1/commit/104f1b6cc0d4f107ba46404383de2fa11fe99dcf))
70
+
71
+
72
+
73
+ * @applitools/screenshoter bumped to 3.8.10
74
+
75
+ * @applitools/nml-client bumped to 1.5.10
76
+
77
+ * @applitools/tunnel-client bumped to 1.2.2
78
+
79
+ * @applitools/ec-client bumped to 1.7.7
80
+
81
+ * @applitools/core-base bumped to 1.5.3
82
+
83
+ * @applitools/core bumped to 3.10.1
84
+
85
+ * @applitools/eyes bumped to 1.8.1
86
+
87
+
3
88
  ## [5.45.4](https://github.com/applitools/eyes.sdk.javascript1/compare/js/eyes-webdriverio@5.45.3...js/eyes-webdriverio@5.45.4) (2023-08-30)
4
89
 
5
90
 
package/README.md CHANGED
@@ -7,1200 +7,6 @@
7
7
  </div>
8
8
  <br/>
9
9
 
10
- ### Table of contents
11
-
12
- - [Installation](#installation)
13
- - [Applitools API key](#applitools-api-key)
14
- - [Usage](#usage)
15
- - [Getting started with the API](#getting-started-with-the-api)
16
- - [Eyes constructor](#eyes-constructor)
17
- - [open](#open)
18
- - [Visual tests and baselines](#visual-tests-and-baselines)
19
- - [Batches](#batches)
20
- - [check](#check)
21
- - [Arguments to `eyes.check`](#arguments-to-eyescheck)
22
- - [`tag`](#tag)
23
- - [`checkSettings`](#checksettings)
24
- - [Page screenshot](#page-screenshot)
25
- - [Region screenshot](#region-screenshot)
26
- - [Switching into frames](#switching-into-frames)
27
- - [Region in shadow DOM](#region-in-shadow-dom)
28
- - [Ignore Regions](#ignore-regions)
29
- - [Floating Regions](#floating-regions)
30
- - [Content/Strict/Layout Regions](#contentstrictlayout-regions)
31
- - [Accessiblity Regions](#accessiblity-regions)
32
- - [Scroll root element](#scroll-root-element)
33
- - [Variation group ID](#variation-group-id)
34
- - [Lazy loading (`lazyLoad`)](#lazy-loading-lazyload)
35
- - [WebView (`webview`)](#webview-webview)
36
- - [Other checkSettings configuration](#other-checksettings-configuration)
37
- - [close](#close)
38
- - [Runners](#runners)
39
- - [Purpose of runners](#purpose-of-runners)
40
- - [1. Use the Ultrafast grid](#1-use-the-ultrafast-grid)
41
- - [2. Manage tests across multiple `Eyes` instances](#2-manage-tests-across-multiple-eyes-instances)
42
- - [Using the SDK as a service](#using-the-sdk-as-a-service)
43
- - [What is the service?](#what-is-the-service)
44
- - [What is the difference from just using the SDK directly?](#what-is-the-difference-from-just-using-the-sdk-directly)
45
- - [How to use the service](#how-to-use-the-service)
46
- - [Configure the service](#configure-the-service)
47
- - [Running with the Ultrafast grid](#running-with-the-ultrafast-grid)
48
- - [Verbose logging](#verbose-logging)
49
- - [Override `testName` and `appName`](#override-testname-and-appname)
50
- - [Batch completion notifications](#batch-completion-notifications)
51
- - [Using the service API](#using-the-service-api)
52
- - [`browser.eyesCheck(tag, checkSettings)`](#browsereyeschecktag-checksettings)
53
- - [`browser.eyesGetTestResults()`](#browsereyesgettestresults)
54
- - [`browser.eyesSetScrollRootElement(selector)`](#browsereyessetscrollrootelementselector)
55
- - [`browser.eyesSetConfiguration(configuration)`](#browsereyessetconfigurationconfiguration)
56
- - [`browser.eyesGetConfiguration()`](#browsereyesgetconfiguration)
57
- - [`browser.eyesAddProperty(key, value)`](#browsereyesaddpropertykey-value)
58
- - [`browser.eyesClearProperties()`](#browsereyesclearproperties)
59
- - [Visual locators](#visual-locators)
60
- - [Recipes for common tasks](#recipes-for-common-tasks)
61
- - [Configure Server URL](#configure-server-url)
62
- - [Configure Proxy](#configure-proxy)
63
- - [Make every visual test correspond to a webdriver.io test](#make-every-visual-test-correspond-to-a-webdriverio-test)
64
- - [Organize tests in batches](#organize-tests-in-batches)
65
- - [Method 1: environment variable](#method-1-environment-variable)
66
- - [Method 2: `eyes.setBatch`](#method-2-eyessetbatch)
67
- - [Stitch mode](#stitch-mode)
68
- - [Background information](#background-information)
69
- - [1. Stitch mode: Scroll](#1-stitch-mode-scroll)
70
- - [2. Stitch mode: CSS](#2-stitch-mode-css)
71
- - [Stitch overlap](#stitch-overlap)
72
- - [Match level](#match-level)
73
- - [Ignore displacements](#ignore-displacements)
74
- - [Test properties](#test-properties)
75
- - [Test results](#test-results)
76
- - [Logging](#logging)
77
- - [Configuring browsers for the Ultrafast grid](#configuring-browsers-for-the-ultrafast-grid)
78
- - [Desktop browsers](#desktop-browsers)
79
- - [Chrome device emulation](#chrome-device-emulation)
80
- - [iOS device](#ios-device)
81
-
82
- ## Installation
83
-
84
- Install Eyes-WebdriverIO as a local dev dependency in your tested project:
85
-
86
- ```bash
87
- npm i -D @applitools/eyes-webdriverio
88
- ```
89
-
90
- ## Applitools API key
91
-
92
- In order to authenticate via the Applitools server, you need to supply the Eyes-WebdriverIO SDK with the API key you got from Applitools. Read more about how to obtain the API key [here](https://applitools.com/docs/topics/overview/obtain-api-key.html).
93
-
94
- To do this, set the environment variable `APPLITOOLS_API_KEY` to the API key before running your tests.
95
- For example, on Linux/Mac:
96
-
97
- ```bash
98
- export APPLITOOLS_API_KEY=<your_key>
99
- npx wdio wdio.conf.js
100
- ```
101
-
102
- And on Windows:
103
-
104
- ```bash
105
- set APPLITOOLS_API_KEY=<your_key>
106
- npx wdio wdio.conf.js
107
- ```
108
-
109
- It's also possible to set the API key programmatically like so:
110
-
111
- ```js
112
- eyes.setApiKey('<your API key>')
113
- ```
114
-
115
- ## Usage
116
-
117
- After defining the API key, you will be able to use commands from Eyes-WebdriverIO in your webdriver.io tests to take screenshots and use Applitools Eyes to manage them.
118
-
119
- For example:
120
-
121
- ```js
122
- const {Eyes, Target} = require('@applitools/eyes-webdriverio')
123
-
124
- describe('My first visual test', function() {
125
- it('should check the webdriver.io website', async function() {
126
- browser.get('https://webdriver.io');
127
-
128
- const eyes = new Eyes();
129
- await eyes.open(browser, "webdriver.io website", "My first webdriver.io test!")
130
- await eyes.check('home page', Target.window().fully())
131
- await eyes.close()
132
- });
133
- });
134
- ```
135
-
136
- ## Getting started with the API
137
-
138
- ### Eyes constructor
139
-
140
- Creates an instance of `Eyes`, which then exposes methods to run and configure visual tests.
141
-
142
- ```js
143
- const eyes = new Eyes(runner)
144
- ```
145
-
146
- - `runner` - A runner instance which manages tests across multiple `Eyes` instances. The runner can be an instance of either a `ClassicRunenr` or a `VisualGridRunner`. For more information, see the [Runners](#runners) section below.
147
-
148
- ### open
149
-
150
- Creates an Applitools test.
151
- This will start a session with the Applitools server.
152
-
153
- ```js
154
- eyes.open(browser, appName, testName, viewportSize)
155
- ```
156
-
157
- #### Visual tests and baselines
158
-
159
- By using the `open`/`check`/`close` methods on `Eyes`, you are creating visual tests in Applitools Eyes. A visual test is a sequence of screenshots, compared with a baseline. The baseline is also a sequence of screenshots. The specific baseline to compare against is found by using the values for:
160
-
161
- 1. Browser
162
- 2. Operating system
163
- 3. App name
164
- 4. Test name
165
- 5. Viewport size
166
-
167
- The baseline is created automatically when running a test with specific values for these 5 parameters for the first time. For example, you run a test with **Chrome** on **OS X** and specify the **app name**, **test name** and **viewport size** via `eyes.open(t, 'some app', 'some test', {width: 1200, height: 800})`. The first time the test runs with these parameters, a baseline will be created. Any subsequent execution with the same values will compare screenshots against this baseline. The test will actually be created after running `eyes.close`, and the results of the test are returned as a `TestResults` object.
168
-
169
- _For more information, visit our documentation page:
170
- https://applitools.com/docs/topics/general-concepts/how-eyes-compares-checkpoints.html_
171
-
172
- #### Batches
173
-
174
- It's possible to aggregate tests that are run in different processes, or in different Eyes instances, under the same batch. This is done by providing the same batch ID to these tests.
175
-
176
- For instructions, see the [Organize tests in batches](#organize-tests-in-batches) section below.
177
-
178
- _For more information, visit our documentation page:
179
- https://applitools.com/docs/topics/working-with-test-batches/working-with-test-batches-in-overview.html_
180
-
181
- ### check
182
-
183
- Generates a screenshot of the current page and add it to the Applitools Test.
184
-
185
- ```js
186
- eyes.check(tag, checkSettings)
187
- ```
188
-
189
- #### Arguments to `eyes.check`
190
-
191
- ##### `tag`
192
-
193
- Defines a name for the checkpoint in the Eyes Test Manager. The name may be any string and serves to identify the step to the user in the Test manager. You may change the tag value without impacting testing in any way since Eyes does not use the tag to identify the baseline step that corresponds to the checkpoint - Eyes matches steps based on their content and position in the sequences of images of the test. See [How Eyes compares checkpoints and baseline images](https://applitools.com/docs/topics/general-concepts/how-eyes-compares-checkpoints.html) for details.
194
-
195
- ##### `checkSettings`
196
-
197
- Holds the checkpoint's configuration. This is defined using a fluent API, starting with `Target`.
198
-
199
- ###### Page screenshot
200
-
201
- - For taking a viewport screenshot, call `Target.window()`.
202
- - For a full page screenshot, call `Target.window().fully()`.
203
-
204
- ###### Region screenshot
205
-
206
- To take an element screenshot, it's possible to specify either a locator or the element representation itself. For example:
207
-
208
- ```js
209
- const locator = by.css('.banner')
210
- eyes.check('region by locator', Target.region(locator))
211
-
212
- const el = element(locator)
213
- eyes.check('region by element', Target.region(el))
214
- ```
215
-
216
- Passing a string is interpreted as a css selector:
217
-
218
- ```js
219
- eyes.check('region by css selector', Target.region('.banner'))
220
- ```
221
-
222
- It's also possible to specify the absolute coordinates for the desired region:
223
-
224
- ```js
225
- eyes.check('region by coordinates', Target.region({
226
- left: 10,
227
- top: 20,
228
- width: 200,
229
- height: 80
230
- }))
231
- ```
232
-
233
- For all the above options, it's possible to specify `.fully()` in order to take the entire content of an element that can be scrolled.
234
-
235
- ###### Switching into frames
236
-
237
- For taking screenshots of elements inside iframes, it's possible to specify the frame using the `Target.frame` fluent API. For example:
238
-
239
- ```js
240
- eyes.check('element inside frame', Target.frame('frame-1').region(by.css('.element-inside frame')))
241
- ```
242
-
243
- It's possible to take a screenshot of the entire frame:
244
-
245
- ```js
246
- eyes.check('entire frame', Target.frame('frame-1').fully())
247
- ```
248
-
249
- Multiple frame calls can be made, thus creating a "frame chain". For example:
250
-
251
- ```js
252
- eyes.check('element inside nested frames', Target.frame('frame-1').frame('frame-1-1').region(by.css('.nested-element')))
253
- ```
254
-
255
- ###### Region in shadow DOM
256
-
257
- ```js
258
- eyes.check('region in shadow DOM', Target.shadow('EleWithShadowRoot').region('nested-region').fully())
259
- ```
260
-
261
- ###### Ignore Regions
262
-
263
- <!-- TODO add explanation -->
264
-
265
- ```js
266
- eyes.check('viewport screenshot with ignore region', Target.window().ignoreRegion('.dynamic-content-here'))
267
- ```
268
-
269
- Possible input types are:
270
-
271
- - string (interpreted as css selector)
272
- - `by` locator
273
- - element
274
- - coordinates (`{left, top, width, height}`)
275
-
276
- ###### Floating Regions
277
-
278
- <!-- TODO add explanation -->
279
-
280
- ```js
281
- eyes.check(
282
- 'viewport screenshot with floating region',
283
- Target.window().floatingRegion('.floating-area', 10, 10, 10, 10)) // up, down, left, right
284
- ```
285
-
286
- Possible input types are:
287
-
288
- - string (interpreted as css selector)
289
- - `by` locator
290
- - element
291
- - coordinates (`{left, top, width, height}`)
292
-
293
- ###### Content/Strict/Layout Regions
294
-
295
- <!-- TODO add explanation -->
296
-
297
- ```js
298
- eyes.check('viewport screenshot with content region', Target.window().contentRegion('.some-element'))
299
-
300
- eyes.check('viewport screenshot with strict region', Target.window().strictRegion('.some-element'))
301
-
302
- eyes.check('viewport screenshot with layout region', Target.window().layoutRegion('.some-element'))
303
- ```
304
-
305
- Possible input types are:
306
-
307
- - string (interpreted as css selector)
308
- - `by` locator
309
- - element
310
- - coordinates (`{left, top, width, height}`)
311
-
312
- ###### Accessiblity Regions
313
-
314
- <!-- TODO add explanation -->
315
-
316
- ```js
317
- const {AccessibilityRegionType} = require('@applitools/eyes-webdriverio')
318
-
319
- eyes.check(
320
- 'viewport screenshot with accessibility region',
321
- Target.window().accessibilityRegion('.some-element', AccessibilityRegionType.LargeText)
322
- )
323
- ```
324
-
325
- Possible input types are:
326
-
327
- - string (interpreted as css selector)
328
- - `by` locator
329
- - element
330
- - coordinates (`{left, top, width, height}`)
331
-
332
- ###### Scroll root element
333
-
334
- <!-- TODO add explanation -->
335
-
336
- ```js
337
- eyes.check(
338
- 'full page with custom scroll root element',
339
- Target.window().fully().scrollRootElement('.main-content')
340
- )
341
- ```
342
-
343
- Possible input types are:
344
-
345
- - string (interpreted as css selector)
346
- - `by` locator
347
- - element
348
-
349
- ##### Variation group ID
350
-
351
- ```js
352
- eyes.check(Target.window().variationGroupId('Login button on the right'))
353
- ```
354
-
355
- _For more information, visit our documentation page: https://applitools.com/docs/features/baseline-variations-groups.html_
356
-
357
- ##### Lazy loading (`lazyLoad`)
358
-
359
- It's possible to have the SDK scroll the entire page (or a specific length of the page) to make sure all lazyily loaded assets are on the page before performing a check.
360
-
361
- ```js
362
- // lazy loads with sensible defaults
363
- eyes.check(Target.window().lazyLoad())
364
-
365
- // lazy loads with options specified
366
- eyes.check(Target.window().lazyLoad({
367
- maxAmountToScroll: 1000, // total pixels of the page to be scrolled
368
- scrollLength: 250, // amount of pixels to use for each scroll attempt
369
- waitingTime: 500, // milliseconds to wait in-between each scroll attempt
370
- }))
371
- ```
372
-
373
- Possible input types are:
374
-
375
- - nothing (enables sensible defaults)
376
- - options object (`{maxAmountToScroll, waitingTime, scrollLength}`)
377
-
378
- Other details:
379
-
380
- - If an option is omitted, the sensible default for that value will be used
381
- - The SDK will repeatedly scroll the page using the `scrollLength` until either the page cannot be scrolled further or the `maxAmountToScroll` has been reached (whichever happens first)
382
- - If more time is needed for additional content to load, then increase the waitingTime to a value higher than 500 milliseconds. If better performance is desired and additional content lazily loads faster than the default waitingTime, then reduce it to a value below 500 milliseconds
383
-
384
- ##### WebView (`webview`)
385
-
386
- When working with native apps that have webviews, it's possible to capture their contents in a check command.
387
-
388
- You do this by specifying it in the check settings like so:
389
-
390
- ```js
391
- // the SDK will automatically switch to the first available web view
392
- eyes.check(Target.webview())
393
-
394
- // they can also specify the webview id (if it's static and they know what it is)
395
- eyes.check(Target.webview('webview-id'))
396
- ```
397
-
398
- After the check command, the SDK will switch the driver back to the app context that it was prior to performing the check.
399
-
400
- ##### Density metrics (`densityMetrics`)
401
-
402
- In order to set the density metrics for the screenshot, use the `densityMetrics` method. This method accepts a object value with the following properties:
403
-
404
- - `xdpi` - The exact physical pixels per inch of the screen in the X dimension.
405
- - `ydpi` - The exact physical pixels per inch of the screen in the Y dimension.
406
- - `scaleRatio` - The scale ratio.
407
-
408
- ```js
409
- // set density metrics
410
- eyes.check(Target.window().densityMetrics({
411
- xdpi: 100,
412
- ydpi: 100,
413
- scaleRatio: 1
414
- }))
415
- ```
416
-
417
- ###### Other checkSettings configuration
418
-
419
- <!-- TODO add explanation -->
420
-
421
- - `hideScrollbars`
422
- - `hideCaret`
423
- - `ignoreDisplacements`
424
- - `useDom`
425
- - `enablePatterns`
426
- - `withName`
427
-
428
- ### close
429
-
430
- Closes the applitools test and check that all screenshots are valid.
431
-
432
- It is important to call this at the end of each test, symmetrically to `open`(or in `afterEach()`, see [Best practice for using the SDK](#best-practice-for-using-the-sdk)).
433
-
434
- ```js
435
- const testResults = await eyes.close(throwEx)
436
- ```
437
-
438
- - `throwEx` - (Boolean) throw an error if visual differences were found, or if the test failed for any other reason. The deault is `true`.
439
-
440
- Return value: [`TestResults`](#test-results).
441
-
442
- ## Runners
443
-
444
- There are two types of runners: `ClassicRunner` and `VisualGridRunner`:
445
-
446
- 1. `ClassicRunner` - used when the screenshot is taken by the SDK itself.
447
-
448
- ```js
449
- const {ClassicRunner} = require('@applitools/eyes-webdriverio')
450
- const runner = new ClassicRunner()
451
- ```
452
-
453
- 2. `VisualGridRunner` - used when the screenshot is taken by the **Ultrafast grid**.
454
-
455
- ```js
456
- const {VisualGridRunner} = require('@applitools/eyes-webdriverio')
457
- const runner = new VisualGridRunner(concurrentSessions)
458
- ```
459
-
460
- - `concurrentSessions` - (Number) the number of visual tests that are allowed to run at the same time. Default: `1`.
461
-
462
- ### Purpose of runners
463
-
464
- There are two purposes for using runners:
465
-
466
- #### 1. Use the Ultrafast grid
467
-
468
- This is done simply by specifying the `VisualGridRunner`. Browsers are specified by using the [`Configuration`](#configuration) API. For example:
469
-
470
- ```js
471
- const {Eyes, VisualGridRunner, BrowserType, DeviceName} = require('@applitools/eyes-webdriverio')
472
- const eyes = new Eyes(new VisualGridRunner)
473
- const configuration = eyes.getConfiguration()
474
-
475
- configuration.addBrowser({width: 1200, height: 800, name: BrowserType.CHROME})
476
- configuration.addBrowser({width: 1200, height: 800, name: BrowserType.FIREFOX})
477
- configuration.addBrowser({width: 1200, height: 800, name: BrowserType.SAFARI})
478
- configuration.addBrowser({width: 1200, height: 800, name: BrowserType.EDGE})
479
- configuration.addBrowser({width: 1200, height: 800, name: BrowserType.IE_11})
480
- configuration.addBrowser({deviceName: DeviceName.Galaxy_S9_Plus})
481
-
482
- eyes.setConfiguration(configuration)
483
- ```
484
-
485
- #### 2. Manage tests across multiple `Eyes` instances
486
-
487
- If you decide to create more than one instance of `Eyes` in your tests (for example, if you run `new Eyes()` in `beforeEach` test hooks), the runner provides a method called **`getAllTestResults`** for collecting test results across all eyes instances.
488
-
489
- Consider the following:
490
-
491
- ```js
492
- const {Eyes, ClassicRunner, StitchMode} = require('applitools/eyes-webdriverio')
493
- const runner = new VisualGridRunner(10)
494
-
495
- async function runTest(url, ...browsers) {
496
- await driver.get(url)
497
- const eyes = new Eyes(runner)
498
- const configuration = eyes.getConfiguration()
499
- configuration.addBrowsers(...browsers)
500
- eyes.setConfiguration(configuration)
501
- await eyes.open(driver, appName, testName, viewportSize)
502
- await eyes.check(undefined, Target.window().fully())
503
- eyes.close()
504
- }
505
-
506
- async function collectResults() {
507
- const testResultsSummary = await runner.getAllTestResults()
508
- for (const testResultContainer of testResultsSummary) {
509
- const testResults = testResultContainer.getTestResults()
510
- console.log(formatTestResults(testResults)) // see the Recipes section below for the implementation of this function
511
- }
512
- }
513
-
514
- Promise.all([
515
- runTest('https://example.org',
516
- {width: 1200, height: 800, name: BrowserType.CHROME},
517
- {width: 1200, height: 800, name: BrowserType.FIREFOX}
518
- ),
519
- runTest('https://applitools.com',
520
- {deviceName: DeviceName.Galaxy_S9_Plus},
521
- {deviceName: DeviceName.iPhone_X}
522
- )
523
- ]).then(collectResults)
524
- ```
525
-
526
- This snippet of code runs two visual tests in parallel on two websites, using a specific configuration for each url. To achieve this, multiple `Eyes` instances are used, but in order to wait for all test results, we call `runner.getAllTestResults`. We then iterate through the results and print out a formatted summary.
527
-
528
- <!-- TODO
529
- ## Configuration
530
-
531
- show logs
532
- save debug data ???
533
- api key
534
- server url
535
- proxy
536
- connection timeout ???
537
- remove session ???
538
- ignore baseline
539
- save new tests
540
- save failed tests
541
- match timeout
542
- match level
543
- isDisabled
544
- batch
545
- properties
546
- branch name
547
- parent branch name
548
- baseline branch name
549
- environment name
550
- save diffs
551
- send dom
552
- host app
553
- host os
554
- host app info
555
- host os info
556
- device info
557
- app name
558
- test name
559
- display name
560
- viewport size
561
- accessibility validation
562
- use dom
563
- enable patterns
564
- ignore displacements
565
- ignore caret
566
- force full page screenshot
567
- wait before screenshots
568
- stitch mode
569
- hide scrollbars
570
- hide caret
571
- stitch overlap
572
- dont close batches
573
- concurrent sessions ???
574
- add browsers
575
- -->
576
-
577
- ## Using the SDK as a service
578
-
579
- ### What is the service?
580
-
581
- As users of webdriver.io, you may choose to use the SDK directly. However, webdriver.io provides an addon mechanism called *Services*, which makes it possible to reduce boilerplate code and simplify test logic. Read more about it [here](https://webdriver.io/docs/customservices.html).
582
-
583
- Eyes-WebdriverIO can be used as a webdriver.io service. Using the service provides several boilerplate operations and default values, and lets you concentrate on the core logic.
584
-
585
- ### What is the difference from just using the SDK directly?
586
-
587
- Here are the main differences between the service and the SDK:
588
-
589
- 1. No need to call `eyes.open` and `eyes.close`. Only `eyes.check` (or its service equivalent, `browser.eyesCheck`) is needed. The `open` and `close` calls are made between different `it`'s, so each functional test that contains visual checkpoints will appear in Eyes dashboard separately.
590
-
591
- 2. No need to specify `testName` and `appName` in the configuration. These values are automatically extracted from the `it`'s and `describe`'s. The default test name is the containing `it`, and the default app name is the `it`'s containing `describe`.
592
-
593
- _For more information, see [Override `testName` and `appName`](#override--testname--and--appname-) section_.
594
-
595
- 3. No need to instantiate the `Eyes` class. It is instantiated for you, and configured appropriately from `wdio.conf.js`.
596
-
597
- 4. Receiving batch completion notifications when test execution is done. See [Batch completion notifications](#batch-completion-notifications).
598
-
599
- ### How to use the service
600
-
601
- First, add Eyes-WebdriverIO to your configuration as a service. Add the following to your webdriver.io configuration file:
602
-
603
- ```js
604
- const {EyesService} = require('@applitools/eyes-webdriverio')
605
-
606
- exports.config = {
607
- // ...
608
- services: [[EyesService, {
609
- // webdriver.io version 6: Eyes service configuration here
610
- }]],
611
- // ...
612
- eyes: {
613
- // webdriver.io version 5: Eyes service configuration here
614
- }
615
- }
616
- ```
617
-
618
- There's a difference where configuration of the service needs to be, depending on the webdriver.io version you use. See more information in the [webdriver.io blog](https://webdriver.io/blog/#service-configurations).
619
-
620
- ### Configure the service
621
-
622
- Every configuration parameter that exists in the configuration for Applitools' Eyes SDK for webdriver.io can be specified in the `wdio.conf.js` file (or any other webdriver.io configuration file specified by the user).
623
-
624
- For example:
625
-
626
- ```js
627
- exports.config = {
628
- // In webdriver.io 6:
629
- services: [[EyesService, {
630
- viewportSize: {width: 1200, height: 800},
631
- matchLevel: 'Layout',
632
- matchTimeout: 0,
633
- batch: {name: 'This will appear as the batch name in Eyes dashboard'},
634
- // ...
635
- }]],
636
- }
637
- ```
638
-
639
- _For more information, visit our documentation page: https://applitools.com/docs/api/eyes-sdk/index-gen/class-configuration-webdriverio_sdk5-javascript.html_
640
-
641
- #### Running with the Ultrafast grid
642
-
643
- To run tests with the Ultrafast grid, specify the following in the `wdio.conf.js` file:
644
-
645
- ```js
646
- exports.config = {
647
- eyes: {
648
- useVisualGrid: true,
649
- // ...
650
- }
651
- }
652
- ```
653
-
654
- To specify which viewport sizes and browsers to render on the Ultrafast grid, use the `browsersInfo` entry in the configuration. For example:
655
-
656
- ```js
657
- exports.config = {
658
- eyes: {
659
- useVisualGrid: true,
660
- browsersInfo: [
661
- {width: 1200, height: 800, name: 'chrome'},
662
- {width: 1200, height: 800, name: 'firefox'},
663
- {width: 1200, height: 800, name: 'safari'},
664
- {width: 1200, height: 800, name: 'edgechromium'}
665
- {width: 1200, height: 800, name: 'ie'}
666
- {deviceName: 'Galaxy S9 Plus'}
667
- ]
668
- // ...
669
- }
670
- }
671
- ```
672
-
673
- #### Verbose logging
674
-
675
- For troubleshooting, it is possible to enable versbose logging by specifying the following in the `wdio.conf.js` file:
676
-
677
- ```js
678
- exports.config = {
679
- // ...
680
- enableEyesLogs: true,
681
- // ...
682
- }
683
- ```
684
-
685
- #### Override `testName` and `appName`
686
-
687
- Here's an example for overriding the default values:
688
-
689
- ```js
690
- const configuration = browser.eyesGetConfiguration()
691
- configuration.setAppName('<YOUR_APP_NAME>')
692
- configuration.setTestName('<YOUR_TEST_NAME>')
693
- browser.eyesSetConfiguration(configuration)
694
- ```
695
-
696
- #### Batch completion notifications
697
-
698
- Here's how to setup batch notifications:
699
-
700
- ```js
701
- // wdio.conf.js
702
-
703
- exports.config = {
704
- // ...
705
- eyes: {
706
- batch: {notifyOnCompletion: true}
707
- }
708
- // ...
709
- }
710
- ```
711
-
712
- _For more information about batch notifications, and the remaining steps required to setup notifications, see https://applitools.com/docs/features/batch-completion-notifications.html_.
713
-
714
- ### Using the service API
715
-
716
- #### `browser.eyesCheck(tag, checkSettings)`
717
-
718
- Generates a screenshot of the current page and adds it to the Applitools Test. See the [`eyes.check`](#check) section for more details about the arguments.
719
-
720
- #### `browser.eyesGetTestResults()`
721
-
722
- Close the current visual test and return the test results. For example:
723
-
724
- ```js
725
- describe('webdriver.io page', () => {
726
- it('is visually perfect', () => {
727
- browser.url('https://webdriver.io')
728
- browser.eyesCheck('homepage')
729
- $('a[href="/docs/gettingstarted.html"]').click()
730
- browser.eyesCheck('getting started page')
731
- const testResults = browser.eyesGetTestResults()
732
-
733
- // example for using the testResults -
734
- // fail the test if visual differences were found
735
- if (testResults.getStatus() !== 'Passed') {
736
- const testName = `'${testResults.getName()}' of '${testResults.getAppName()}'`
737
- throw new Error(`Test ${testName} detected differences! See details at: ${testResults.getUrl()}`)
738
- }
739
- })
740
- })
741
- ```
742
-
743
- _For more information, visit our documentation page: https://applitools.com/docs/api/eyes-sdk/index-gen/class-testresults-webdriverio_sdk5-javascript.html_
744
-
745
- #### `browser.eyesSetScrollRootElement(selector)`
746
-
747
- Sets the scroll root element to a specific element on the page. This is the element that will be scrolled when taking a full page screenshot.
748
-
749
- For example:
750
-
751
- ```js
752
- browser.eyesSetScrollRootElement('.container')
753
- ```
754
-
755
- #### `browser.eyesSetConfiguration(configuration)`
756
-
757
- Sets a new configuration for the underlying Eyes instance. This will override the configuration specified in the `wdio.conf.js` file for the remainder of test execution.
758
-
759
- _For example, see the [Override `testName` and `appName`](#override--testname--and--appname-) section_.
760
-
761
- #### `browser.eyesGetConfiguration()`
762
-
763
- Gets the configuration object that's defined for the underlying Eyes instance.
764
-
765
- _For example, see the [Override `testName` and `appName`](#override--testname--and--appname-) section_.
766
-
767
- #### `browser.eyesAddProperty(key, value)`
768
-
769
- Adds a custom key name/value property that will be associated with your tests. You can view these properties and filter and group by these properties in the Test Manager
770
-
771
- #### `browser.eyesClearProperties()`
772
-
773
- Clears any custom key name/value properties.
774
-
775
- ## Visual locators
776
-
777
- Information about what are visual locators and how to use them can be found in the documentation page [here](https://applitools.com/docs/features/visual-locators.html).
778
-
779
- The API to locate a visual locator in Eyes-WebdriverIO has the following TypeScript signature:
780
-
781
- ```ts
782
- // Note: This is a formal TypeScript definition.
783
- // The reason we use the generic type TLocator here is that is shows how the return value of eyes.locate is an object
784
- // with the same keys as the array of locatorNames in the input to eyes.locate.
785
- // We explain this in more detail in the example below.
786
-
787
- interface Eyes {
788
- locate<TLocator extends string>(settings: VisualLocatorSettings<TLocator>): Promise<Record<TLocator, Array<Region>>>
789
- }
790
-
791
- interface VisualLocatorSettings<TLocator extends string> {
792
- locatorNames: Array<TLocator>;
793
- firstOnly: boolean;
794
- }
795
-
796
- interface Region {
797
- x: number;
798
- y: number;
799
- width: number;
800
- height: number;
801
- }
802
- ```
803
-
804
- Here is an example for using this API and applying a touch action in Appium:
805
-
806
- ```js
807
- // first need to call eyes.open
808
- await eyes.open(browser, 'Test app', 'Test visual locators')
809
-
810
- // example for using eyes.locate
811
- const regionsMap = await eyes.locate({
812
- locatorNames: ['locator_a', 'locator_b', 'locator_c'],
813
- })
814
-
815
- // now get the coordinates of one of the locators
816
- const regionsForLocator_A = regionsMap['locator_a']
817
-
818
- // if region is found, perform press at the middle
819
- if (regionsForLocator_A && regionsForLocator_A.length > 0) {
820
- const region = regionsForLocator_A[0]
821
- const clickLocation = {
822
- x: region.left + region.width / 2,
823
- y: region.top + region.height / 2,
824
- }
825
- await browser.touchAction([
826
- {action: 'press', x: clickLocation.x, y: clickLocation.y},
827
- {action: 'wait', ms: 500},
828
- 'release',
829
- ])
830
- }
831
- ```
832
-
833
- ## Recipes for common tasks
834
-
835
- ### Configure Server URL
836
-
837
- By default, Eyes-WebdriverIO communicates with Applitools' public Eyes cloud server, located at `https://eyesapi.applitools.com`.
838
-
839
- If you have a dedicated cloud or an on-premise server, configure a different Eyes server URL as follows:
840
-
841
- ```js
842
- eyes.setServerUrl('https://mycompanyeyesapi.applitools.com')
843
- ```
844
-
845
- ### Configure Proxy
846
-
847
- If your company's network requires requests to go through the corporate proxy, you may configure it as follows:
848
-
849
- ```js
850
- eyes.setProxy('http://yourproxy.com')
851
-
852
- // provide username and password:
853
- eyes.setProxy('http://user:pass@yourproxy.com')
854
- // OR
855
- eyes.setProxy({
856
- url: 'https://yourproxy.com',
857
- username: 'user',
858
- password: 'pass'
859
- })
860
-
861
- // use tunneling in case of HTTP over HTTPS proxy:
862
- eyes.setProxy({
863
- url: 'http://yourproxy.com',
864
- isHttpOnly: true
865
- })
866
- ```
867
-
868
- ### Make every visual test correspond to a webdriver.io test
869
-
870
- Every call to `eyes.open` and `eyes.close` defines a test in Applitools Eyes, and all the calls to `eyes.check` between them are called "steps". In order to get a test structure in Applitools that corresponds to the test structure in webdriver.io, it's best to open/close tests in every `test` call.
871
-
872
- For example, when running with Mocha as a test runner:
873
-
874
- ```js
875
- describe('My first visual test', function() {
876
- beforeEach(async () => {
877
- await eyes.open(browser, "webdriver.io website", "My first webdriver.io test!")
878
- })
879
- afterEach(async () => {
880
- await eyes.close()
881
- })
882
- it('...', async function() {
883
- // ...
884
- });
885
- });
886
- ```
887
-
888
- ### Organize tests in batches
889
-
890
- It's possible to manage how visual tests are aggregated into batches. Here are two methods for clustering tests into a single batch:
891
-
892
- #### Method 1: environment variable
893
-
894
- Run all the processes that execute webdriver.io with the same value for `APPLITOOLS_BATCH_ID`. For example, execute all webdriver.io files specified in the configuration file `wdio.conf.js` with the same randomly generated UUID:
895
-
896
- ```sh
897
- #! Unix based machines:
898
- APPLITOOLS_BATCH_ID=`uuidgen` npx wdio wdio.conf.js
899
- ```
900
-
901
- It's also possible to control the batch name that shows up in Test Manager. For example:
902
-
903
- ```sh
904
- export APPLITOOLS_BATCH_ID=`uuidgen`
905
- export APPLITOOLS_BATCH_NAME="Login tests"
906
- npm test
907
- ```
908
-
909
- #### Method 2: `eyes.setBatch`
910
-
911
- Provide all Eyes instances with the same value for batch ID. For example:
912
-
913
- ```js
914
- eyes.setBatch({
915
- id: SOME_SHARED_VALUE_THAT_WILL_BE_THE_SAME_FOR_ALL_TEST_FILES,
916
- name: 'My batch'
917
- })
918
- ```
919
-
920
- ### Stitch mode
921
-
922
- The default stitch mode is `Scroll`. In order to change it:
923
-
924
- ```js
925
- const {Eyes, StitchMode} = require('@applitools/eyes-webdriverio')
926
-
927
- const eyes = new Eyes()
928
- eyes.setStitchMode(StitchMode.CSS)
929
-
930
- // to go back to scroll:
931
- eyes.setStitchMode(StitchMode.SCROLL)
932
- ```
933
-
934
- #### Background information
935
-
936
- Eyes-WebdriverIO allows you to control if the checkpoint image should include only the viewport - i.e. what you see in the browser window when you first load a page, or if it should also include the full page - i.e. what you would see if you manually scrolled down, or across, a page that is larger than the viewport.
937
-
938
- When Eyes-WebdriverIO takes a full page screenshot, it does so by taking multiple screenshots of the viewport at different locations of the page (via the webdriver.io browser driver), and then "stitching" them together. The output is one clear, potentially very large, screenshot of what can be revealed on the page when it is scrolled.
939
-
940
- There are two methods for creating the stitched screenshot, and they are both related to the way the page is moved relative to the viewport. Here they are:
941
-
942
- ##### 1. Stitch mode: Scroll
943
-
944
- Using this method, the page is scrolled, just as a user would scroll. Eyes-WebdriverIO takes the viewport screenshot, then scrolls the page to calculated locations.
945
- The issue with this method is that the page might respond to scroll events, and change the way it appears visually between the screenshots.
946
-
947
- ##### 2. Stitch mode: CSS
948
-
949
- Using this method, the page is moved around by changing the CSS property `transform` on the HTML element with different values for `translate(x,y)`.
950
- This method is not sensitive to scroll events, and is usually the recommended method for stitching.
951
-
952
- ### Stitch overlap
953
-
954
- The stitch overlap is the length of the intersecting area between two screenshots that are stitched together. It's like placing two printed pictures one on top of the other with some overlapping area between them.
955
-
956
- This is useful in cases of fixed elements, like a footer, that show up in each of the sub-screenshots. Using a stitch overlap bigger than the size of the footer would make it disappear from every image, and only show up at the bottom of the full page screenshot.
957
-
958
- The default stitch overlap is 50 pixels. To change it:
959
-
960
- ```js
961
- eyes.setStitchOverlap(60)
962
- ```
963
-
964
- ### Match level
965
-
966
- The **match level** determines the way by which Eyes compares the checkpoint image with the baseline image.
967
-
968
- The default match level is `Strict`. To change it:
969
-
970
- ```js
971
- // Option 1: For the rest of the execution
972
- const {MatchLevel} = require('@applitools/eyes-webdriverio')
973
- eyes.setMatchLevel(MatchLevel.Layout)
974
-
975
- // Option 2: For a single checkpoint
976
- eyes.check(Target.window().layout())
977
- eyes.check(Target.window().strict())
978
- eyes.check(Target.window().content())
979
- eyes.check(Target.window().exact())
980
- ```
981
-
982
- _For more information, visit our documentation page: https://applitools.com/docs/common/cmn-eyes-match-levels.html_
983
-
984
- ### Ignore displacements
985
-
986
- By using **ignore displacements** you can hide diffs that arise from content whose position on the page has changed, and focus on mismatches caused by actual changes in the content.
987
-
988
- The default is `false`. To change it:
989
-
990
- ```js
991
- // For the rest of the execution
992
- eyes.setIgnoreDisplacements(true)
993
-
994
- // For a single checkpoint
995
- eyes.check(Target.window().ignoreDisplacements())
996
- ```
997
-
998
- _For more information, visit our documentation page: https://applitools.com/docs/topics/test-manager/viewers/tm-diff-displacement.html_
999
-
1000
- ### Test properties
1001
-
1002
- It's possible to provide additional information about each test in custom fields, which can then show up in Test Manager in their own column.
1003
-
1004
- This is done by calling `setProperties` on the configuration, and providing it with an array of properties with the structure `{name, value}`. For example:
1005
-
1006
- ```js
1007
- const {Eyes} = require('@applitools/eyes-webdriverio')
1008
-
1009
- const eyes = new Eyes()
1010
-
1011
- const configuration = eyes.getConfiguration()
1012
- configuration.setProperties([{name: 'my custom property', value: 'some value'}])
1013
- eyes.setConfiguration(configuration)
1014
- ```
1015
-
1016
- The test properties could also be specified per batch by calling `setProperties` on the batch info, and providing it with an array of properties with the structure `{name, value}`. For example:
1017
-
1018
- ```js
1019
- const {Eyes, BatchInfo} = require('@applitools/eyes-webdriverio')
1020
-
1021
- const eyes = new Eyes()
1022
-
1023
- const batch = new BatchInfo()
1024
- batch.setProperties([{name: 'my custom batch property', value: 'some value'}])
1025
-
1026
- const configuration = eyes.getConfiguration()
1027
- configuration.setBatch(batch)
1028
- eyes.setConfiguration(configuration)
1029
- ```
1030
-
1031
- ### Test results
1032
-
1033
- The results of the test can be consumed as the return value from `eyes.close`. Here's an example for creating a formatted output string out of the `TestResults` object:
1034
-
1035
- ```js
1036
- function formatTestResults(testResults) {
1037
- return `
1038
- Test name : ${testResults.getName()}
1039
- Test status : ${testResults.getStatus()}
1040
- URL to results : ${testResults.getUrl()}
1041
- Total number of steps : ${testResults.getSteps()}
1042
- Number of matching steps : ${testResults.getMatches()}
1043
- Number of visual diffs : ${testResults.getMismatches()}
1044
- Number of missing steps : ${testResults.getMissing()}
1045
- Display size : ${testResults.getHostDisplaySize().toString()}
1046
- Steps :
1047
- ${testResults
1048
- .getStepsInfo()
1049
- .map(step => {
1050
- return ` ${step.getName()} - ${getStepStatus(step)}`
1051
- })
1052
- .join('\n')}`
1053
- }
1054
-
1055
- function getStepStatus(step) {
1056
- if (step.getIsDifferent()) {
1057
- return 'Diff'
1058
- } else if (!step.getHasBaselineImage()) {
1059
- return 'New'
1060
- } else if (!step.getHasCurrentImage()) {
1061
- return 'Missing'
1062
- } else {
1063
- return 'Passed'
1064
- }
1065
- }
1066
- ```
1067
-
1068
- _For the full list of methods, visit our documentation page: https://applitools.com/docs/api/eyes-sdk/index-gen/class-testresults-selenium4-javascript.html_ (This is for our Selenium SDK, but all methods are relevant for Eyes-WebdriverIO as well)
1069
-
1070
- ### Logging
1071
-
1072
- To enable logging to the console, use the `ConsoleLogHandler` class:
1073
-
1074
- ```js
1075
- import {Eyes, ConsoleLogHandler} from '@applitools/eyes-webdriverio'
1076
-
1077
- const eyes = new Eyes()
1078
- eyes.setLogHandler(new ConsoleLogHandler())
1079
-
1080
- // To enable verbose logging:
1081
- eyes.setLogHandler(new ConsoleLogHandler(true))
1082
- ```
1083
-
1084
- To write logs to file, use the `FileLogHandler` class. It's possible to configure the file path, verbosity, and whether to append to file.
1085
-
1086
- The API is as follows:
1087
-
1088
- ```js
1089
- new FileLogHandler(isVerbose, filepath, append)
1090
- ```
1091
-
1092
- Default values are:
1093
-
1094
- - `isVerbose`: `false`
1095
- - `filepath`: `'eyes.log'`, meaning a file with this name will be created in the current working directory.
1096
- - `append`: `true`, meaning that every test will append to the file instead of recreating it.
1097
-
1098
- For example:
1099
-
1100
- ```js
1101
- const {Eyes, FileLogHandler} = require('@applitools/eyes-webdriverio')
1102
- const path = require('path')
1103
-
1104
- const eyes = new Eyes()
1105
-
1106
- // append non-verbose logs to logs/eyes.log (relative to current working directory)
1107
- eyes.setLogHandler(new FileLogHandler(false, path.resolve('logs', 'eyes.log')))
1108
-
1109
- // write verbose logs to a new file at logs/eyes-{timestamp}.log (relative to current working directory)
1110
- eyes.setLogHandler(new FileLogHandler(true, path.resolve('logs', `eyes-${Date.now()}.log`), false))
1111
- ```
1112
-
1113
- ### Configuring browsers for the Ultrafast grid
1114
-
1115
- When it comes to multiple browsers and mobile devices, the Ultrafast grid shines.
1116
- It's now possible to run one functional test, and in the background have multiple screenshots rendered for different browsers, viewport sizes, and mobile devices.
1117
-
1118
- The API methods are:
1119
-
1120
- - `configuration.addBrowser(browser)` for adding a single browser configuration.
1121
- - `configuration.addBrowsers(browser1, browser2, ...)` for adding single or multiple browser configurations.
1122
-
1123
- Here are examples for how to execute visual tests on different browsers and platforms:
1124
-
1125
- #### Desktop browsers
1126
-
1127
- ```js
1128
- const {BrowserType} = require('@applitools/eyes-webdriverio')
1129
- // ...
1130
- const configuration = eyes.getConfiguration()
1131
- configuration.addBrowsers(
1132
- {name: BrowserType.EDGE_CHROMIUM, width: 768, height: 1024},
1133
- {name: BrowserType.EDGE_LEGACY, width: 768, height: 1024},
1134
- {name: BrowserType.FIREFOX, width: 768, height: 1024},
1135
- {name: BrowserType.CHROME, width: 768, height: 1024},
1136
- {name: BrowserType.IE_11, width: 768, height: 1024},
1137
- {name: BrowserType.IE_10, width: 768, height: 1024},
1138
- {name: BrowserType.SAFARI, width: 768, height: 1024},
1139
- {name: BrowserType.CHROME_ONE_VERSION_BACK, width: 768, height: 1024},
1140
- {name: BrowserType.CHROME_TWO_VERSIONS_BACK, width: 768, height: 1024},
1141
- // ...
1142
- )
1143
- eyes.setConfiguration(configuration)
1144
- ```
1145
-
1146
- #### Chrome device emulation
1147
-
1148
- Predefined device:
1149
-
1150
- ```js
1151
- const {ScreenOrientation, DeviceName} = require('@applitools/eyes-webdriverio')
1152
- // ...
1153
- const configuration = eyes.getConfiguration()
1154
- configuration.addBrowsers(
1155
- {
1156
- chromeEmulationInfo: {
1157
- deviceName: DeviceName.iPhone_6_7_8,
1158
- },
1159
- },
1160
- {
1161
- chromeEmulationInfo: {
1162
- deviceName: DeviceName.Galaxy_S9_Plus,
1163
- screenOrientation: ScreenOrientation.LANDSCAPE,
1164
- },
1165
- },
1166
- )
1167
- eyes.setConfiguration(configuration)
1168
- ```
1169
-
1170
- Custom device:
1171
-
1172
- ```js
1173
- const configuration = eyes.getConfiguration()
1174
- configuration.addBrowser({
1175
- chromeEmulationInfo: {
1176
- width: 800,
1177
- height: 600,
1178
- deviceScaleFactor: 3,
1179
- },
1180
- })
1181
- eyes.setConfiguration(configuration)
1182
- ```
1183
-
1184
- #### iOS device
1185
-
1186
- ```js
1187
- const {IosDeviceName, ScreenOrientation, IosVersion} = require('@applitools/eyes-webdriverio')
1188
- // ...
1189
- const configuration = eyes.getConfiguration()
1190
- configuration.addBrowser({
1191
- iosDeviceInfo: {
1192
- deviceName: IosDeviceName.iPhone_11,
1193
- screenOrientation: ScreenOrientation.LANDSCAPE, // optional, default: ScreenOrientation.PORTRAIT
1194
- iosVersion: IosVersion.LATEST // optional, default: undefined (i.e. the default is determined by the Ultrafast grid)
1195
- },
1196
- })
1197
- eyes.setConfiguration(configuration)
1198
- ```
1199
-
1200
- The list of devices is available at https://github.com/applitools/eyes.sdk.javascript1/blob/master/packages/eyes-api/src/enums/IosDeviceName.ts
1201
-
1202
- Possible values for `iosVersion` are:
1203
-
1204
- - `IosVersion.LATEST` - the latest iOS version that's supported by the UFG
1205
- - `IosVersion.LATEST_ONE_VERSION_BACK'` - one version prior to the latest version
1206
- - `undefined` - the UFG's default
10
+ ## Resources
11
+ - [Quick start](https://applitools.com/tutorials/quickstart/web/webdriverio)
12
+ - [API reference](https://applitools.com/docs/api-ref/sdk-api/wdiogeneric/javascript/)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applitools/eyes-webdriverio",
3
- "version": "5.45.4",
3
+ "version": "5.46.0",
4
4
  "description": "Applitools Eyes SDK for WebdriverIO",
5
5
  "keywords": [
6
6
  "eyes-webdriverio",
@@ -13,15 +13,7 @@
13
13
  "tests",
14
14
  "webdriverio"
15
15
  ],
16
- "homepage": "https://applitools.com",
17
- "bugs": {
18
- "url": "https://github.com/applitools/eyes.sdk.javascript1/issues"
19
- },
20
- "repository": {
21
- "type": "git",
22
- "url": "git@github.com:applitools/eyes.sdk.javascript1.git",
23
- "directory": "js/packages/eyes-webdriverio"
24
- },
16
+ "homepage": "https://applitools.com/docs/api-ref/sdk-api/wdiogeneric/javascript/",
25
17
  "license": "SEE LICENSE IN LICENSE",
26
18
  "author": {
27
19
  "name": "Applitools Team",
@@ -98,12 +90,12 @@
98
90
  "up:framework": "yarn add --dev --caret webdriverio${APPLITOOLS_FRAMEWORK_VERSION:+@$APPLITOOLS_FRAMEWORK_VERSION}"
99
91
  },
100
92
  "dependencies": {
101
- "@applitools/driver": "1.13.6",
102
- "@applitools/eyes": "1.8.0",
103
- "@applitools/spec-driver-webdriver": "1.0.43"
93
+ "@applitools/driver": "1.14.0",
94
+ "@applitools/eyes": "1.8.3",
95
+ "@applitools/spec-driver-webdriver": "1.0.44"
104
96
  },
105
97
  "devDependencies": {
106
- "@applitools/api-extractor": "^1.2.21",
98
+ "@applitools/api-extractor": "^1.2.22",
107
99
  "@applitools/bongo": "^5.6.1",
108
100
  "@applitools/generic": "^3.3.10",
109
101
  "@applitools/test-utils": "^1.5.17",
package/types/index.d.ts CHANGED
@@ -357,7 +357,21 @@ export type TargetAutomation = {
357
357
  webview(webview?: undefined | string): CheckSettingsAutomation;
358
358
  webview(webview?: undefined | boolean): CheckSettingsAutomation;
359
359
  };
360
+ export const TargetAutomation: {
361
+ window(): CheckSettingsAutomation;
362
+ region(region: (RegionPlain | (Element | (string | Selector | { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; })))): CheckSettingsAutomation;
363
+ region(region: LegacyRegionPlain): CheckSettingsAutomation;
364
+ frame(context: { frame: number | (Element | (string | Selector | { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; })); scrollRootElement?: undefined | (Element | (string | Selector | { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; })); }): CheckSettingsAutomation;
365
+ frame(frame: number, scrollRootElement?: undefined | (Element | (string | Selector | { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; }))): CheckSettingsAutomation;
366
+ frame(frame: (Element | (string | Selector | { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; })), scrollRootElement?: undefined | (Element | (string | Selector | { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; }))): CheckSettingsAutomation;
367
+ shadow(selector: string): CheckSettingsAutomation;
368
+ shadow(selector: Selector): CheckSettingsAutomation;
369
+ shadow(selector: { selector: string | Selector; type?: undefined | string; shadow?: undefined | EyesSelector<Selector>; frame?: undefined | EyesSelector<Selector>; }): CheckSettingsAutomation;
370
+ webview(webview?: undefined | string): CheckSettingsAutomation;
371
+ webview(webview?: undefined | boolean): CheckSettingsAutomation;
372
+ };
360
373
  export type Target = TargetImage & TargetAutomation;
374
+ export const Target: TargetImage & TargetAutomation;
361
375
  export type OCRRegion = { target: Element | RegionPlain | EyesSelector<Selector>; hint?: undefined | string; minMatch?: undefined | number; language?: undefined | string; };
362
376
  export type ConfigurationPlain = {
363
377
  debugScreenshots?: undefined | { save: boolean; path?: undefined | string; prefix?: undefined | string; };
@@ -1178,6 +1192,16 @@ export type TargetImage = {
1178
1192
  url(imageUrl: string): CheckSettingsImage;
1179
1193
  url(imageUrl: URL): CheckSettingsImage;
1180
1194
  };
1195
+ export const TargetImage: {
1196
+ image(image: string): CheckSettingsImage;
1197
+ image(image: Buffer): CheckSettingsImage;
1198
+ image(image: URL): CheckSettingsImage;
1199
+ buffer(imageBuffer: Buffer): CheckSettingsImage;
1200
+ base64(imageBase64: string): CheckSettingsImage;
1201
+ path(imagePath: string): CheckSettingsImage;
1202
+ url(imageUrl: string): CheckSettingsImage;
1203
+ url(imageUrl: URL): CheckSettingsImage;
1204
+ };
1181
1205
  export type CutProviderPlain = { top: number; right: number; bottom: number; left: number; } | { x: number; y: number; width: number; height: number; };
1182
1206
  export class CutProvider implements Required<{
1183
1207
  x: number;