@applitools/eyes-testcafe 2.0.0-beta.9 → 3.0.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 +540 -0
- package/LICENSE +1 -1
- package/README.md +7 -531
- package/dist/api.js +51 -0
- package/dist/extract-environment.js +15 -0
- package/dist/index-legacy.js +5 -0
- package/dist/index.js +19 -0
- package/dist/legacy.js +225 -0
- package/dist/spec-driver.js +245 -0
- package/package.json +73 -77
- package/types/index-legacy.d.ts +2 -0
- package/types/index.d.ts +1833 -0
- package/dist/captureFrameAndPoll.js +0 -1468
- package/dist/captureFrameAndPollForIE.js +0 -12569
- package/index.js +0 -30
- package/lib/BordersAwareElementContentLocationProvider.js +0 -79
- package/lib/Eyes.js +0 -927
- package/lib/EyesFactory.js +0 -73
- package/lib/EyesTestCafe.js +0 -1277
- package/lib/EyesTestcafeUtils.js +0 -440
- package/lib/EyesVisualGrid.js +0 -345
- package/lib/ImageOrientationHandler.js +0 -31
- package/lib/JavascriptHandler.js +0 -20
- package/lib/TestCafeExecutor.js +0 -57
- package/lib/capture/EyesWebDriverScreenshot.js +0 -650
- package/lib/capture/EyesWebDriverScreenshotFactory.js +0 -32
- package/lib/capture/FirefoxScreenshotImageProvider.js +0 -63
- package/lib/capture/ImageProviderFactory.js +0 -38
- package/lib/capture/SafariScreenshotImageProvider.js +0 -254
- package/lib/capture/TakesScreenshotImageProvider.js +0 -35
- package/lib/errors/EyesDriverOperationError.js +0 -10
- package/lib/errors/NoFramesError.js +0 -7
- package/lib/fluent/AccessibilityRegionByElement.js +0 -46
- package/lib/fluent/AccessibilityRegionBySelector.js +0 -58
- package/lib/fluent/FloatingRegionByElement.js +0 -56
- package/lib/fluent/FloatingRegionBySelector.js +0 -63
- package/lib/fluent/FrameLocator.js +0 -110
- package/lib/fluent/IgnoreRegionByElement.js +0 -51
- package/lib/fluent/IgnoreRegionBySelector.js +0 -57
- package/lib/fluent/SelectorByElement.js +0 -37
- package/lib/fluent/SelectorByLocator.js +0 -47
- package/lib/fluent/Target.js +0 -17
- package/lib/fluent/TestcafeCheckSettings.js +0 -352
- package/lib/frames/Frame.js +0 -149
- package/lib/frames/FrameChain.js +0 -175
- package/lib/getCaptureDomScript.js +0 -14
- package/lib/hash.js +0 -15
- package/lib/isTestcafeSelector.js +0 -7
- package/lib/makeClientFunctionWrapper.js +0 -61
- package/lib/positioning/CssTranslatePositionMemento.js +0 -39
- package/lib/positioning/CssTranslatePositionProvider.js +0 -130
- package/lib/positioning/ElementPositionMemento.js +0 -36
- package/lib/positioning/ElementPositionProvider.js +0 -88
- package/lib/positioning/FirefoxRegionPositionCompensation.js +0 -45
- package/lib/positioning/ImageRotation.js +0 -22
- package/lib/positioning/OverflowAwareCssTranslatePositionProvider.js +0 -17
- package/lib/positioning/OverflowAwareScrollPositionProvider.js +0 -17
- package/lib/positioning/RegionPositionCompensationFactory.js +0 -37
- package/lib/positioning/SafariRegionPositionCompensation.js +0 -26
- package/lib/positioning/ScrollPositionMemento.js +0 -36
- package/lib/positioning/ScrollPositionProvider.js +0 -118
- package/lib/positioning/fixImageMarkPosition.js +0 -36
- package/lib/regionVisibility/MoveToRegionVisibilityStrategy.js +0 -55
- package/lib/regionVisibility/NopRegionVisibilityStrategy.js +0 -35
- package/lib/regionVisibility/RegionVisibilityStrategy.js +0 -30
- package/lib/runner/ClassicRunner.js +0 -49
- package/lib/runner/EyesRunner.js +0 -41
- package/lib/runner/TestResultContainer.js +0 -38
- package/lib/runner/TestResultsSummary.js +0 -112
- package/lib/runner/VisualGridRunner.js +0 -57
- package/lib/safeExecuteFunction.js +0 -28
- package/lib/wrappers/EyesTargetLocator.js +0 -335
- package/lib/wrappers/EyesWebDriver.js +0 -571
- package/lib/wrappers/EyesWebElement.js +0 -383
- package/lib/wrappers/EyesWebElementPromise.js +0 -68
package/README.md
CHANGED
|
@@ -1,535 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+

|
|
4
|
+
### Applitools Eyes SDK for [TestCafe](https://testcafe.io/)
|
|
5
|
+
[](https://www.npmjs.com/package/@applitools/eyes-testcafe)
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
## Installation
|
|
9
|
-
|
|
10
|
-
Install Eyes-Testcafe as a local dev dependency in your tested project:
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm i -D @applitools/eyes-testcafe@beta
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Applitools API key
|
|
17
|
-
|
|
18
|
-
In order to authenticate via the Applitools server, you need to supply the Eyes-Testcafe 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).
|
|
19
|
-
|
|
20
|
-
To to this, set the environment variable `APPLITOOLS_API_KEY` to the API key before running your tests.
|
|
21
|
-
For example, on Linux/Mac:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
export APPLITOOLS_API_KEY=<your_key>
|
|
25
|
-
npx testcafe chrome:headless some-test-dir
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
And on Windows:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
set APPLITOOLS_API_KEY=<your_key>
|
|
32
|
-
npx testcafe chrome:headless some-test-dir
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
It's also possible to specify the API key in the `applitools.config.js` file. The property name is `apiKey`. For example:
|
|
36
|
-
|
|
37
|
-
```js
|
|
38
|
-
module.exports = {
|
|
39
|
-
apiKey: 'YOUR_API_KEY',
|
|
40
|
-
...
|
|
41
|
-
}
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
See the [Advanced configuration](#method-3-the-applitoolsconfigjs-file) section below for more information on using the config file.
|
|
45
|
-
|
|
46
|
-
## Usage
|
|
47
|
-
|
|
48
|
-
After defining the API key, you will be able to use commands from Eyes-Testcafe in your testcafe tests to take screenshots and use Applitools Eyes to manage them:
|
|
49
|
-
|
|
50
|
-
### Example
|
|
51
|
-
|
|
52
|
-
```js
|
|
53
|
-
import Eyes from '@applitools/eyes-testcafe';
|
|
54
|
-
const eyes = new Eyes();
|
|
55
|
-
|
|
56
|
-
fixture`Hello world`
|
|
57
|
-
.page('https://applitools.com/helloworld')
|
|
58
|
-
.afterEach(async () => eyes.close())
|
|
59
|
-
.after(async () => eyes.waitForResults());
|
|
60
|
-
|
|
61
|
-
test('Cookies', async t => {
|
|
62
|
-
await eyes.open({
|
|
63
|
-
appName: 'Hello World!',
|
|
64
|
-
testName: 'My first JavaScript test!',
|
|
65
|
-
browser: [{ width: 800, height: 600, name: 'firefox' }],
|
|
66
|
-
t
|
|
67
|
-
});
|
|
68
|
-
await eyes.checkWindow('Main Page');
|
|
69
|
-
await t.click('button')
|
|
70
|
-
await eyes.checkWindow('Click!');
|
|
71
|
-
});
|
|
72
|
-
```
|
|
7
|
+
</div>
|
|
73
8
|
<br/>
|
|
74
9
|
|
|
75
|
-
|
|
76
|
-
- [
|
|
77
|
-
- [Open](#open)
|
|
78
|
-
- [CheckWindow](#checkWindow)
|
|
79
|
-
- [tag](#tag)
|
|
80
|
-
- [target](#target)
|
|
81
|
-
- [fully](#fully)
|
|
82
|
-
- [selector](#selector)
|
|
83
|
-
- [region](#region)
|
|
84
|
-
- [ignore](#ignore)
|
|
85
|
-
- [floating](#floating)
|
|
86
|
-
- [layout](#layout)
|
|
87
|
-
- [strict](#strict)
|
|
88
|
-
- [content](#content)
|
|
89
|
-
<!-- - [accessibility](#accessibility)
|
|
90
|
-
- [accessibilityLevel](#accessibilityLevel) -->
|
|
91
|
-
- [scriptHooks](#scriptHooks)
|
|
92
|
-
- [sendDom](#sendDom)
|
|
93
|
-
- [Close](#Close)
|
|
94
|
-
- [waitForResults](#waitForResults)
|
|
95
|
-
- [Best practices](#Best-practice-for-using-the-SDK)
|
|
96
|
-
- [Concurrency](#Concurrency)
|
|
97
|
-
- [Advanced configuration](#Advanced-configuration)
|
|
98
|
-
- [Scoped configuration](#configuration-properties)
|
|
99
|
-
- [Global configuration](#global-configuration-properties)
|
|
100
|
-
- [Examples](#Method-1-Arguments-for-eyesOpen)
|
|
101
|
-
- [Arguments for `eyesOpen`](#Method-1-Arguments-for-eyesOpen)
|
|
102
|
-
- [Environment variables](#Method-2-Environment-variables)
|
|
103
|
-
- [The `applitools.config.js` file](#Method-3-The-applitoolsconfigjs-file)
|
|
104
|
-
- [Configuring the browser](#Configuring-the-browser)
|
|
105
|
-
- [Device emulation](#Device-emulation)
|
|
106
|
-
- [Troubleshooting](#Troubleshooting)
|
|
107
|
-
|
|
108
|
-
<br/><br/><br/>
|
|
109
|
-
|
|
110
|
-
# API
|
|
111
|
-
|
|
112
|
-
### **open**
|
|
113
|
-
|
|
114
|
-
Create an Applitools test.
|
|
115
|
-
This will start a session with the Applitools server.
|
|
116
|
-
|
|
117
|
-
```js
|
|
118
|
-
eyes.open({
|
|
119
|
-
appName: '',
|
|
120
|
-
testName: '',
|
|
121
|
-
t
|
|
122
|
-
});
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
It's possible to pass a config object to `open` with all the possible configuration properties. Read the [Advanced configuration](#advanced-configuration) section for a detailed description.
|
|
126
|
-
|
|
127
|
-
### **checkWindow**
|
|
128
|
-
|
|
129
|
-
Generate a screenshot of the current page and add it to the Applitools Test.
|
|
130
|
-
|
|
131
|
-
```js
|
|
132
|
-
eyes.checkWindow(tag)
|
|
133
|
-
|
|
134
|
-
OR
|
|
135
|
-
|
|
136
|
-
eyes.checkWindow({ tag: 'your tag', target: 'your target mode' })
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
#### Arguments to `eyes.checkWindow`
|
|
140
|
-
|
|
141
|
-
- #### tag
|
|
142
|
-
(optional): A logical name for this check.
|
|
143
|
-
- #### target
|
|
144
|
-
(optional): Possible values are:
|
|
145
|
-
|
|
146
|
-
- **`window`**: This is the default value. Capture the entire window or only the viewport. If set then add [fully](#fully) as sibling to determine weather to capture full screen or viewport.
|
|
147
|
-
- **`region`**: Take a screenshot of a region of the page, specified by coordinates or a selector. If set then add [region](#region) or [selector](#selector) as siblings for specifying the region/s.
|
|
148
|
-
|
|
149
|
-
- #### fully:
|
|
150
|
-
(optional) In case [target](#target) is `window`, determines wether to capture full page or viewport only. if `true` (default) then captures full page, if `false` then captures viewport.
|
|
151
|
-
|
|
152
|
-
```js
|
|
153
|
-
// capture viewport only
|
|
154
|
-
eyes.checkWindow({
|
|
155
|
-
target: 'window',
|
|
156
|
-
fully: false,
|
|
157
|
-
});
|
|
158
|
-
```
|
|
159
|
-
- #### selector
|
|
160
|
-
(optional) In case [target](#target) is `region`, this should be the actual css, xpath or [a Testcafe Selector](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/) to an element, and the screenshot would be the content of that element. For example:
|
|
161
|
-
|
|
162
|
-
```js
|
|
163
|
-
// The shorthand string version defaults to css selectors
|
|
164
|
-
eyes.checkWindow({
|
|
165
|
-
target: 'region',
|
|
166
|
-
selector: '.my-element'
|
|
167
|
-
});
|
|
168
|
-
|
|
169
|
-
// Using a css selector
|
|
170
|
-
eyes.checkWindow({
|
|
171
|
-
target: 'region',
|
|
172
|
-
selector: {
|
|
173
|
-
type: 'css',
|
|
174
|
-
selector: '.my-element' // or '//button'
|
|
175
|
-
}
|
|
176
|
-
});
|
|
177
|
-
|
|
178
|
-
// Using a Testcafe Selector
|
|
179
|
-
import {Selector} from 'testcafe';
|
|
180
|
-
eyes.checkWindow({
|
|
181
|
-
target: 'region',
|
|
182
|
-
selector: Selector('.my-region')
|
|
183
|
-
});
|
|
184
|
-
|
|
185
|
-
// Using an xpath selector
|
|
186
|
-
eyes.checkWindow({
|
|
187
|
-
target: 'region',
|
|
188
|
-
selector: {
|
|
189
|
-
type: 'xpath',
|
|
190
|
-
selector: '//button[1]'
|
|
191
|
-
}
|
|
192
|
-
});
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
- #### region
|
|
196
|
-
(optional) In case [target](#target) is `region`, this should be an object describing the region's coordinates. For example:
|
|
197
|
-
|
|
198
|
-
```js
|
|
199
|
-
eyes.checkWindow({
|
|
200
|
-
target: 'region',
|
|
201
|
-
region: {top: 100, left: 0, width: 1000, height: 200}
|
|
202
|
-
});
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
- #### ignore
|
|
206
|
-
(optional): A single or an array of regions to ignore when checking for visual differences. For example:
|
|
207
|
-
|
|
208
|
-
```js
|
|
209
|
-
eyes.checkWindow({
|
|
210
|
-
ignore: [
|
|
211
|
-
{top: 100, left: 0, width: 1000, height: 100},
|
|
212
|
-
{selector: '.some-div-to-ignore'},
|
|
213
|
-
{selector: Selector('.some-div')}
|
|
214
|
-
]
|
|
215
|
-
});
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
- #### floating
|
|
219
|
-
(optional): A single or an array of floating regions to ignore when checking for visual differences. More information about floating regions can be found in Applitools docs [here](https://help.applitools.com/hc/en-us/articles/360006915292-Testing-of-floating-UI-elements). For example:
|
|
220
|
-
|
|
221
|
-
```js
|
|
222
|
-
eyes.checkWindow({
|
|
223
|
-
floating: [
|
|
224
|
-
{top: 100, left: 0, width: 1000, height: 100, maxUpOffset: 20, maxDownOffset: 20, maxLeftOffset: 20, maxRightOffset: 20},
|
|
225
|
-
{selector: '.some-div-to-float', maxUpOffset: 20, maxDownOffset: 20, maxLeftOffset: 20, maxRightOffset: 20},
|
|
226
|
-
{selector: Selector('.some-div'), maxUpOffset: 20, maxDownOffset: 20, maxLeftOffset: 20, maxRightOffset: 20}
|
|
227
|
-
]
|
|
228
|
-
});
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
- #### layout
|
|
232
|
-
(optional): A single or an array of regions to match as [layout level.](https://help.applitools.com/hc/en-us/articles/360007188591-Match-Levels) For example:
|
|
233
|
-
```js
|
|
234
|
-
eyes.checkWindow({
|
|
235
|
-
layout: [
|
|
236
|
-
{top: 100, left: 0, width: 1000, height: 100},
|
|
237
|
-
{selector: '.some-div-to-test-as-layout'},
|
|
238
|
-
{selector: Selector('.some-div')}
|
|
239
|
-
]
|
|
240
|
-
});
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
- #### strict
|
|
244
|
-
(optional): A single or an array of regions to match as [strict level.](https://help.applitools.com/hc/en-us/articles/360007188591-Match-Levels) For example:
|
|
245
|
-
```js
|
|
246
|
-
eyes.checkWindow({
|
|
247
|
-
strict: [
|
|
248
|
-
{top: 100, left: 0, width: 1000, height: 100},
|
|
249
|
-
{selector: '.some-div-to-test-as-strict'},
|
|
250
|
-
{selector: Selector('.some-div')}
|
|
251
|
-
]
|
|
252
|
-
});
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
- #### content
|
|
256
|
-
(optional): A single or an array of regions to match as [content level.](https://help.applitools.com/hc/en-us/articles/360007188591-Match-Levels) For example:
|
|
257
|
-
```js
|
|
258
|
-
eyes.checkWindow({
|
|
259
|
-
content: [
|
|
260
|
-
{top: 100, left: 0, width: 1000, height: 100},
|
|
261
|
-
{selector: '.some-div-to-test-as-content'},
|
|
262
|
-
{selector: Selector('.some-div')}
|
|
263
|
-
]
|
|
264
|
-
});
|
|
265
|
-
```
|
|
266
|
-
<!-- - #### accessibility
|
|
267
|
-
(optional): A single or an array of regions for checking accessibility on. For example:
|
|
268
|
-
|
|
269
|
-
```js
|
|
270
|
-
eyes.checkWindow({
|
|
271
|
-
accessibility: [
|
|
272
|
-
{accessibilityType: 'RegularText', selector: '.some-div'},
|
|
273
|
-
{accessibilityType: 'RegularText', selector: Selector('.some-div-2')},
|
|
274
|
-
{accessibilityType: 'LargeText', selector: '//*[@id="main"]/h1', type: 'xpath'},
|
|
275
|
-
{accessibilityType: 'BoldText', top: 100, left: 0, width: 1000, height: 100},
|
|
276
|
-
]
|
|
277
|
-
});
|
|
278
|
-
```
|
|
279
|
-
|
|
280
|
-
Possible accessibilityType values are: `IgnoreContrast`,`RegularText`,`LargeText`,`BoldText` and `GraphicalObject`.
|
|
281
|
-
|
|
282
|
-
- #### accessibilityLevel
|
|
283
|
-
(optional): The accessibility level to use for the screenshot. Possible values are `None`, `AA` and `AAA`.
|
|
284
|
-
```js
|
|
285
|
-
cy.eyesCheckWindow({accessibilityLevel: 'AA'})
|
|
286
|
-
``` -->
|
|
287
|
-
|
|
288
|
-
- #### scriptHooks
|
|
289
|
-
(optional): A set of scripts to be run by the browser during the rendering. It is intended to be used as a means to alter the page's state and structure at the time of rendering.
|
|
290
|
-
An object with the following properties:
|
|
291
|
-
- `beforeCaptureScreenshot`: a script that runs after the page is loaded but before taking the screenshot. For example:
|
|
292
|
-
|
|
293
|
-
```js
|
|
294
|
-
eyes.checkWindow({
|
|
295
|
-
scriptHooks: {
|
|
296
|
-
beforeCaptureScreenshot: "document.body.style.backgroundColor = 'gold'"
|
|
297
|
-
}
|
|
298
|
-
})
|
|
299
|
-
```
|
|
300
|
-
|
|
301
|
-
- #### sendDom
|
|
302
|
-
(optional): A flag to specify whether a capture of DOM and CSS should be taken when rendering the screenshot. The default value is true. This should only be modified to troubleshoot unexpected behavior, and not for normal production use.
|
|
303
|
-
|
|
304
|
-
```js
|
|
305
|
-
eyes.checkWindow({sendDom: false})
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
### **close**
|
|
309
|
-
|
|
310
|
-
Close the applitools test and check that all screenshots are valid.
|
|
311
|
-
|
|
312
|
-
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)).
|
|
313
|
-
|
|
314
|
-
Close receives no arguments.
|
|
315
|
-
|
|
316
|
-
```js
|
|
317
|
-
eyes.close();
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
### **waitForResults**
|
|
321
|
-
Wait until all tests in the fixture are completed and return their results.
|
|
322
|
-
Note that if you don't wait for the tests to be completed then in case of a visual test failure, eyes cannot fail the fixture.
|
|
323
|
-
* it is recommended to wait for the results in the testcafe `after()` hook.
|
|
324
|
-
|
|
325
|
-
```js
|
|
326
|
-
await eyes.waitForResults()
|
|
327
|
-
```
|
|
328
|
-
|
|
329
|
-
waitForResults receives `rejectOnErrors`,
|
|
330
|
-
* If `true` (default) and a visual test fails then reject with an `Error` (in case of a general error reject as well).
|
|
331
|
-
If the rejection is not handled then Testcafe fails the fixture.
|
|
332
|
-
* If `false` and a visual test fails then `waitForResults` resolves with an `Error`.
|
|
333
|
-
In case of a general `Error` reject with the `Error`.
|
|
334
|
-
|
|
335
|
-
In case all the tests passed then waitForResults resolves with the test results.
|
|
336
|
-
<!-- resolves with an Array, each element in the array represents a test (testcafe test, i.e. open checkWindow and close) and is an Array of TestResults. Each TestResults is a visual test environnement. -->
|
|
337
|
-
___
|
|
338
|
-
<br/>
|
|
339
|
-
|
|
340
|
-
## Best practice for using the SDK
|
|
341
|
-
|
|
342
|
-
Every call to `eyes.open` and `eyes.close` defines a test in Applitools Eyes, and all the calls to `eyes.checkWindow` between them are called "steps". In order to get a test structure in Applitools that corresponds to the test structure in Testcafe, it's best to open/close tests in every `test` call. **You can use `afterEach` for calling `eyes.close()`**
|
|
343
|
-
|
|
344
|
-
Also note that after all tests are done you should call eyes.waitForResults, **you can use `after()` for calling `eyes.waitForResults`**, this is is done for two reasons:
|
|
345
|
-
1. to signal testcafe to wait until all the tests have been completed.
|
|
346
|
-
2. to obtain test results if needed.
|
|
347
|
-
|
|
348
|
-
```js
|
|
349
|
-
fixture`Hello world`
|
|
350
|
-
.page('https://applitools.com/helloworld')
|
|
351
|
-
.afterEach(async () => eyes.close());
|
|
352
|
-
.after(async () => eyes.waitForResults())
|
|
353
|
-
```
|
|
354
|
-
|
|
355
|
-
Applitools will take screenshots and perform the visual comparisons in the background. Performance of the tests will not be affected during the test run, but there will be a small phase at the end of the test run that waits for visual tests to end.
|
|
356
|
-
___
|
|
357
|
-
<br/>
|
|
358
|
-
|
|
359
|
-
## Concurrency
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
The default level of concurrency for free accounts is `1`. This means that visual tests will not run in parallel during your tests, and will therefore be slow.
|
|
363
|
-
If your account does support a higher level of concurrency, it's possible to pass a different value by specifying it in the property `concurrency` in the applitools.config.js file (see [Advanced configuration](#advanced-configuration) section below).
|
|
364
|
-
|
|
365
|
-
If you are interested in speeding up your visual tests, contact sdr@applitools.com to get a trial account and faster tests with more concurrency.
|
|
366
|
-
___
|
|
367
|
-
<br/>
|
|
368
|
-
|
|
369
|
-
## Advanced configuration
|
|
370
|
-
|
|
371
|
-
There are 3 ways to specify test configuration:
|
|
372
|
-
1) Arguments to `eyes.open()`
|
|
373
|
-
2) Environment variables
|
|
374
|
-
3) The `applitools.config.js` file
|
|
375
|
-
|
|
376
|
-
The list above is also the order of precedence, which means that if you pass a property to `eyes.open` it will override the environment variable, and the environment variable will override the value defined in the `applitools.config.js` file.
|
|
377
|
-
|
|
378
|
-
#### Configuration properties:
|
|
379
|
-
|
|
380
|
-
| Property name | Default value | Description |
|
|
381
|
-
| ------------- |:------------- |:----------- |
|
|
382
|
-
| `testName` | undefined | The test name |
|
|
383
|
-
| `browser` | { width: 800, height: 600, name: 'chrome' } | The size and browser of the generated screenshots. This doesn't need to be the same as the browser that Testcafe is running. It could be a different size and also a different browser. Currently, `firefox`, `chrome`, `edge`, `ie10` and `ie11` are supported. For more info, see the [browser section below](#configuring-the-browser).<br/><br/>*Note: for best performance if possible eyes resizes the viewport to the given browser size.*|
|
|
384
|
-
| `batchId` | random | Provides ability to group tests into batches. Read more about batches [here](https://applitools.com/docs/topics/working-with-test-batches/how-to-group-tests-into-batches.html). |
|
|
385
|
-
| `batchName` | The name of the first test in the batch | Provides a name to the batch (for display purpose only). |
|
|
386
|
-
| `baselineEnvName` | undefined | The name of the environment of the baseline. |
|
|
387
|
-
| `envName` | undefined | A name for the environment in which the application under test is running. |
|
|
388
|
-
| `ignoreCaret` | false | Whether to ignore or the blinking caret or not when comparing images. |
|
|
389
|
-
| `matchLevel` | Strict | The method to use when comparing two screenshots, which expresses the extent to which the two images are expected to match. Possible values are `Strict`, `Exact`, `Layout` and `Content`. Read more about match levels [here](http://support.applitools.com/customer/portal/articles/2088359). |
|
|
390
|
-
| `baselineBranchName` | undefined | The name of the baseline branch. |
|
|
391
|
-
| `parentBranchName` | undefined | Sets the branch under which new branches are created. |
|
|
392
|
-
| `saveFailedTests` | false | Set whether or not failed tests are saved by default. |
|
|
393
|
-
| `saveNewTests` | false | Set whether or not new tests are saved by default. |
|
|
394
|
-
| `properties` | undefined | Custom properties for the eyes test. The format is an array of objects with name/value properties. For example: `[{name: 'My prop', value:'My value'}]`. |
|
|
395
|
-
| `compareWithParentBranch` | false | |
|
|
396
|
-
| `ignoreBaseline` | false | |
|
|
397
|
-
| `notifyOnCompletion` | false | If `true` batch completion notifications are sent. |
|
|
398
|
-
<br/>
|
|
399
|
-
<!-- | `accessibilityLevel` | None | The accessibility level to use for the screenshots. Possible values are `None`, `AA` and `AAA`. | -->
|
|
400
|
-
|
|
401
|
-
### Global configuration properties:
|
|
402
|
-
|
|
403
|
-
The following configuration properties cannot be defined using the first method of passing them to `eyes.open`. They should be defined either in the `applitools.config.js` file or as environment variables.
|
|
404
|
-
|
|
405
|
-
| Property name | Default value | Description |
|
|
406
|
-
| ------------- |:------------- |:----------- |
|
|
407
|
-
| `apiKey` | undefined | The API key used for working with the Applitools Eyes server. See more info in the [Applitools API key](#applitools-api-key) section above |
|
|
408
|
-
| `showLogs` | false | Whether or not you want to see logs. Logs are written to the same output of the Testcafe process. <br/><br/>_Note that you can also use [DEBUG=eyes*](https://github.com/visionmedia/debug) for debugging._|
|
|
409
|
-
| `serverUrl` | Default Eyes server URL | The URL of Eyes server |
|
|
410
|
-
| `proxy` | undefined | Sets the proxy settings to be used in network requests to Eyes server. This can be either a string to the proxy URI, or an object containing the URI, username and password.<br/><br/>For example:<br/>`{url: 'https://myproxy.com:443', username: 'my_user', password: 'my_password', isHttpOnly: false}`<br/>or:<br/>`"https://username:password@myproxy.com:443"` |
|
|
411
|
-
| `isDisabled` | false | If true, all api calls to Eyes-Testcafe are ignored. |
|
|
412
|
-
| `failTestcafeOnDiff` | true | If true, then the Testcafe test fails if an eyes visual test fails. If false and an eyes test fails, then the Testcafe test does not fail.
|
|
413
|
-
| `tapDirPath` | undefined | Directory path of a results file. If set, then a [TAP](https://en.wikipedia.org/wiki/Test_Anything_Protocol#Specification) file is created in this directory, the tap file name is created with the name eyes-[\<ISO-DATE\>](https://en.wikipedia.org/wiki/ISO_8601)\.tap and contains the Eyes test results <br><br/> _Note that results are scoped per spec file, this means that the results file is created once for each fixture file)._|
|
|
414
|
-
| `concurrency` | 1 | The maximum number of tests that can run concurrently. The default value is the allowed amount for free accounts. For paid accounts, set this number to the quota set for your account. |
|
|
415
|
-
| `dontCloseBatches`| false | If true, batches are not closed for [notifyOnCompletion](#advanced-configuration).|
|
|
416
|
-
|
|
417
|
-
### Method 1: Arguments for `eyes.open`
|
|
418
|
-
|
|
419
|
-
Pass a config object as the only argument. For example:
|
|
420
|
-
|
|
421
|
-
```js
|
|
422
|
-
eyes.open({
|
|
423
|
-
appName: 'My app',
|
|
424
|
-
batchName: 'My batch',
|
|
425
|
-
...
|
|
426
|
-
// all other configuration variables apply
|
|
427
|
-
})
|
|
428
|
-
```
|
|
429
|
-
|
|
430
|
-
### Method 2: Environment variables
|
|
431
|
-
|
|
432
|
-
The name of the corresponding environment variable is in uppercase, with the `APPLITOOLS_` prefix, and separating underscores instead of camel case:
|
|
433
|
-
|
|
434
|
-
```js
|
|
435
|
-
APPLITOOLS_APP_NAME
|
|
436
|
-
APPLITOOLS_SHOW_LOGS
|
|
437
|
-
APPLITOOLS_BATCH_NAME
|
|
438
|
-
APPLITOOLS_CONCURRENCY
|
|
439
|
-
APPLITOOLS_SAVE_DEBUG_DATA
|
|
440
|
-
APPLITOOLS_BATCH_ID
|
|
441
|
-
APPLITOOLS_BATCH_NAME
|
|
442
|
-
APPLITOOLS_BASELINE_ENV_NAME
|
|
443
|
-
APPLITOOLS_ENV_NAME
|
|
444
|
-
APPLITOOLS_IGNORE_CARET
|
|
445
|
-
APPLITOOLS_IS_DISABLED
|
|
446
|
-
APPLITOOLS_MATCH_LEVEL
|
|
447
|
-
APPLITOOLS_MATCH_TIMEOUT
|
|
448
|
-
APPLITOOLS_BRANCH_NAME
|
|
449
|
-
APPLITOOLS_BASELINE_BRANCH_NAME
|
|
450
|
-
APPLITOOLS_PARENT_BRANCH_NAME
|
|
451
|
-
APPLITOOLS_SAVE_FAILED_TESTS
|
|
452
|
-
APPLITOOLS_SAVE_NEW_TESTS
|
|
453
|
-
APPLITOOLS_COMPARE_WITH_PARENT_BRANCH
|
|
454
|
-
APPLITOOLS_IGNORE_BASELINE
|
|
455
|
-
APPLITOOLS_SERVER_URL
|
|
456
|
-
APPLITOOLS_PROXY
|
|
457
|
-
APPLITOOLS_NOTIFY_ON_COMPLETION
|
|
458
|
-
```
|
|
459
|
-
<!-- APPLITOOLS_ACCESSIBILITY_LEVEL -->
|
|
460
|
-
|
|
461
|
-
### Method 3: The `applitools.config.js` file
|
|
462
|
-
|
|
463
|
-
It's possible to have a file called `applitools.config.js` at the same folder location as `.testcaferc.json`. _(The directory from which you run TestCafe. This is usually the project's root directory)_. <br>In this file specify the desired configuration, in a valid JSON format. For example:
|
|
464
|
-
|
|
465
|
-
```js
|
|
466
|
-
module.exports = {
|
|
467
|
-
appName: 'My app',
|
|
468
|
-
showLogs: true,
|
|
469
|
-
batchName: 'My batch'
|
|
470
|
-
...
|
|
471
|
-
// all other configuration variables apply
|
|
472
|
-
}
|
|
473
|
-
```
|
|
474
|
-
<br/>
|
|
475
|
-
|
|
476
|
-
## Configuring the browser
|
|
477
|
-
|
|
478
|
-
Eyes-Testcafe will take a screenshot of the page in the requested browser, the browser can be set in the `applitools.config.js` or by passing it to `eyes.open`.
|
|
479
|
-
|
|
480
|
-
It's also possible to send an array of browsers, for example:
|
|
481
|
-
|
|
482
|
-
```js
|
|
483
|
-
eyes.open({
|
|
484
|
-
...
|
|
485
|
-
browser: [
|
|
486
|
-
{width: 800, height: 600, name: 'firefox'},
|
|
487
|
-
{width: 1024, height: 768, name: 'chrome'},
|
|
488
|
-
{width: 1024, height: 768, name: 'ie11'}
|
|
489
|
-
]
|
|
490
|
-
}
|
|
491
|
-
```
|
|
492
|
-
**Note**: that if only a single browser is set, then Eyes-Testcafe changes the testcafe's browser viewport to that size.
|
|
493
|
-
|
|
494
|
-
### Device emulation
|
|
495
|
-
|
|
496
|
-
To enable chrome's device emulation, it's possible to send a device name and screen orientation, for example:
|
|
497
|
-
|
|
498
|
-
```js
|
|
499
|
-
eyes.open({
|
|
500
|
-
...
|
|
501
|
-
browser: {
|
|
502
|
-
deviceName: 'iPhone X',
|
|
503
|
-
screenOrientation: 'landscape',
|
|
504
|
-
name: 'chrome' // optional, just to make it explicit this is browser emulation and not a real device. Only chrome is supported for device emulation.
|
|
505
|
-
}
|
|
506
|
-
}
|
|
507
|
-
```
|
|
508
|
-
|
|
509
|
-
Possible values for screen orientation are `landscape` and `portrait`, and if no value is specified, the default is `portrait`.
|
|
510
|
-
|
|
511
|
-
The list of device names is taken from [chrome devtools predefined devices](https://raw.githubusercontent.com/chromium/chromium/0aee4434a4dba42a42abaea9bfbc0cd196a63bc1/third_party/blink/renderer/devtools/front_end/emulated_devices/module.json), and can be obtained by running the following command in a unix-based shell (installing [`jq`](https://stedolan.github.io/jq/) might be needed):
|
|
512
|
-
|
|
513
|
-
```sh
|
|
514
|
-
curl -s https://raw.githubusercontent.com/chromium/chromium/0aee4434a4dba42a42abaea9bfbc0cd196a63bc1/third_party/blink/renderer/devtools/front_end/emulated_devices/module.json | jq '.extensions[].device.title'
|
|
515
|
-
```
|
|
516
|
-
|
|
517
|
-
In addition, it's possible to use chrome's device emulation with custom viewport sizes, pixel density and mobile mode, by passing `deviceScaleFactor` and `mobile` in addition to `width` and `height`. For example:
|
|
518
|
-
|
|
519
|
-
```js
|
|
520
|
-
eyes.open({
|
|
521
|
-
...
|
|
522
|
-
browser: {
|
|
523
|
-
width: 800,
|
|
524
|
-
height: 600,
|
|
525
|
-
deviceScaleFactor: 3,
|
|
526
|
-
mobile: true,
|
|
527
|
-
name: 'chrome' // optional, just to make it explicit this is browser emulation and not a real device. Only chrome is supported for device emulation.
|
|
528
|
-
}
|
|
529
|
-
}
|
|
530
|
-
```
|
|
531
|
-
___
|
|
532
|
-
## Troubleshooting
|
|
533
|
-
|
|
534
|
-
* If issues occur, DEBUG_SAVE=1 env variable can be set to save helpful information. The information will be saved under a folder named `.applitools` in the current working directory. This could be then used for getting support on your issue.
|
|
535
|
-
* You can also use [DEBUG=eyes*](https://github.com/visionmedia/debug) for debugging.
|
|
10
|
+
## Resources
|
|
11
|
+
- [Quick start](https://applitools.com/tutorials/quickstart/web/testcafe)
|
package/dist/api.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.closeBatch = exports.BatchClose = exports.Configuration = exports.Target = exports.TargetAutomation = exports.CheckSettings = exports.CheckSettingsAutomation = exports.Eyes = void 0;
|
|
18
|
+
const extract_environment_1 = require("./extract-environment");
|
|
19
|
+
const eyes = require("@applitools/eyes");
|
|
20
|
+
const spec = require("./spec-driver");
|
|
21
|
+
const legacy = require("./legacy");
|
|
22
|
+
__exportStar(require("@applitools/eyes"), exports);
|
|
23
|
+
process.env.APPLITOOLS_SCRIPT_RESULT_MAX_BYTE_LENGTH = '4718592'; // 4.5 MB
|
|
24
|
+
process.env.APPLITOOLS_SCRIPT_REMOVE_REVERSE_PROXY_URL_PREFIXES = 'true';
|
|
25
|
+
const sdk = {
|
|
26
|
+
spec: spec,
|
|
27
|
+
agentId: `eyes.testcafe/${require('../package.json').version}`,
|
|
28
|
+
environment: (0, extract_environment_1.extractEnvironment)(),
|
|
29
|
+
};
|
|
30
|
+
class Eyes extends legacy.LegacyTestCafeEyesMixin(eyes.Eyes) {
|
|
31
|
+
}
|
|
32
|
+
exports.Eyes = Eyes;
|
|
33
|
+
Eyes._sdk = sdk;
|
|
34
|
+
class CheckSettingsAutomation extends eyes.CheckSettingsAutomation {
|
|
35
|
+
}
|
|
36
|
+
exports.CheckSettingsAutomation = CheckSettingsAutomation;
|
|
37
|
+
CheckSettingsAutomation._spec = sdk.spec;
|
|
38
|
+
class CheckSettings extends CheckSettingsAutomation {
|
|
39
|
+
}
|
|
40
|
+
exports.CheckSettings = CheckSettings;
|
|
41
|
+
exports.TargetAutomation = { ...eyes.TargetAutomation, spec: sdk.spec };
|
|
42
|
+
exports.Target = { ...eyes.Target, spec: sdk.spec };
|
|
43
|
+
class Configuration extends eyes.Configuration {
|
|
44
|
+
}
|
|
45
|
+
exports.Configuration = Configuration;
|
|
46
|
+
Configuration._spec = sdk.spec;
|
|
47
|
+
class BatchClose extends eyes.BatchClose {
|
|
48
|
+
}
|
|
49
|
+
exports.BatchClose = BatchClose;
|
|
50
|
+
BatchClose._sdk = sdk;
|
|
51
|
+
exports.closeBatch = eyes.closeBatch(sdk);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.extractEnvironment = void 0;
|
|
4
|
+
function extractEnvironment() {
|
|
5
|
+
const versions = {};
|
|
6
|
+
try {
|
|
7
|
+
const { name, version } = require('testcafe/package.json');
|
|
8
|
+
versions[name] = version;
|
|
9
|
+
}
|
|
10
|
+
catch {
|
|
11
|
+
// NOTE: ignore error
|
|
12
|
+
}
|
|
13
|
+
return { versions };
|
|
14
|
+
}
|
|
15
|
+
exports.extractEnvironment = extractEnvironment;
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
const api_1 = require("./api");
|
|
18
|
+
__exportStar(require("./api"), exports);
|
|
19
|
+
exports.default = api_1.Eyes;
|