@percy/webdriver-utils 1.27.6-beta.0 → 1.27.6
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.
|
@@ -100,16 +100,17 @@ export default class AutomateProvider extends GenericProvider {
|
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
102
|
}
|
|
103
|
-
async getTiles(
|
|
104
|
-
var
|
|
103
|
+
async getTiles(fullscreen) {
|
|
104
|
+
var _this$options;
|
|
105
105
|
if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
|
|
106
106
|
log.debug('Starting actual screenshotting phase');
|
|
107
107
|
const dpr = await this.metaData.devicePixelRatio();
|
|
108
|
+
const screenshotType = (_this$options = this.options) !== null && _this$options !== void 0 && _this$options.fullPage ? 'fullpage' : 'singlepage';
|
|
108
109
|
const response = await TimeIt.run('percyScreenshot:screenshot', async () => {
|
|
109
110
|
return await this.browserstackExecutor('percyScreenshot', {
|
|
110
111
|
state: 'screenshot',
|
|
111
112
|
percyBuildId: this.buildInfo.id,
|
|
112
|
-
screenshotType:
|
|
113
|
+
screenshotType: screenshotType,
|
|
113
114
|
scaleFactor: dpr,
|
|
114
115
|
options: this.options
|
|
115
116
|
});
|
|
@@ -121,20 +122,19 @@ export default class AutomateProvider extends GenericProvider {
|
|
|
121
122
|
const tiles = [];
|
|
122
123
|
const tileResponse = JSON.parse(responseValue.result);
|
|
123
124
|
log.debug('Tiles captured successfully');
|
|
124
|
-
|
|
125
|
-
for (let tileData of tileResponse.sha) {
|
|
125
|
+
for (let tileData of tileResponse.tiles) {
|
|
126
126
|
tiles.push(new Tile({
|
|
127
|
-
statusBarHeight:
|
|
128
|
-
navBarHeight:
|
|
129
|
-
headerHeight,
|
|
130
|
-
footerHeight,
|
|
127
|
+
statusBarHeight: tileData.status_bar || 0,
|
|
128
|
+
navBarHeight: tileData.nav_bar || 0,
|
|
129
|
+
headerHeight: tileData.header_height || 0,
|
|
130
|
+
footerHeight: tileData.footer_height || 0,
|
|
131
131
|
fullscreen,
|
|
132
|
-
sha: tileData.split('-')[0] // drop build id
|
|
132
|
+
sha: tileData.sha.split('-')[0] // drop build id
|
|
133
133
|
}));
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
const metadata = {
|
|
137
|
-
|
|
137
|
+
screenshotType: screenshotType
|
|
138
138
|
};
|
|
139
139
|
return {
|
|
140
140
|
tiles: tiles,
|
|
@@ -26,9 +26,7 @@ export default class GenericProvider {
|
|
|
26
26
|
this.pageYShiftFactor = 0;
|
|
27
27
|
this.currentTag = null;
|
|
28
28
|
this.removeElementShiftFactor = 50000;
|
|
29
|
-
this.
|
|
30
|
-
value: [0, 0]
|
|
31
|
-
};
|
|
29
|
+
this.initialScrollLocation = null;
|
|
32
30
|
}
|
|
33
31
|
addDefaultOptions() {
|
|
34
32
|
this.options.freezeAnimation = this.options.freezeAnimatedImage || this.options.freezeAnimation || false;
|
|
@@ -53,21 +51,28 @@ export default class GenericProvider {
|
|
|
53
51
|
if (i) this.environmentInfo.add(i);
|
|
54
52
|
}
|
|
55
53
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
isIOS() {
|
|
55
|
+
var _this$currentTag;
|
|
56
|
+
return ((_this$currentTag = this.currentTag) === null || _this$currentTag === void 0 ? void 0 : _this$currentTag.osName) === 'iOS';
|
|
57
|
+
}
|
|
58
|
+
async getScrollDetails() {
|
|
59
|
+
return await this.driver.executeScript({
|
|
60
|
+
script: 'return [parseInt(window.scrollX), parseInt(window.scrollY)];',
|
|
61
|
+
args: []
|
|
62
|
+
});
|
|
63
63
|
}
|
|
64
|
-
async
|
|
65
|
-
if (this.
|
|
66
|
-
|
|
67
|
-
script: `window.scrollTo(${x}, ${y})`,
|
|
68
|
-
args: []
|
|
69
|
-
});
|
|
64
|
+
async getInitialScrollLocation() {
|
|
65
|
+
if (this.initialScrollLocation) {
|
|
66
|
+
return this.initialScrollLocation;
|
|
70
67
|
}
|
|
68
|
+
this.initialScrollLocation = await this.getScrollDetails();
|
|
69
|
+
return this.initialScrollLocation;
|
|
70
|
+
}
|
|
71
|
+
async scrollToPosition(x, y) {
|
|
72
|
+
await this.driver.executeScript({
|
|
73
|
+
script: `window.scrollTo(${x}, ${y})`,
|
|
74
|
+
args: []
|
|
75
|
+
});
|
|
71
76
|
}
|
|
72
77
|
async screenshot(name, {
|
|
73
78
|
ignoreRegionXpaths = [],
|
|
@@ -85,7 +90,7 @@ export default class GenericProvider {
|
|
|
85
90
|
log.debug('Fetching comparisong tag ...');
|
|
86
91
|
const tag = await this.getTag();
|
|
87
92
|
log.debug(`[${name}] : Tag ${JSON.stringify(tag)}`);
|
|
88
|
-
const tiles = await this.getTiles(
|
|
93
|
+
const tiles = await this.getTiles(fullscreen);
|
|
89
94
|
log.debug(`[${name}] : Tiles ${JSON.stringify(tiles)}`);
|
|
90
95
|
this.currentTag = tag;
|
|
91
96
|
this.statusBarHeight = tiles.tiles[0].statusBarHeight;
|
|
@@ -125,7 +130,7 @@ export default class GenericProvider {
|
|
|
125
130
|
});
|
|
126
131
|
;
|
|
127
132
|
}
|
|
128
|
-
async getTiles(
|
|
133
|
+
async getTiles(fullscreen) {
|
|
129
134
|
if (!this.driver) throw new Error('Driver is null, please initialize driver with createDriver().');
|
|
130
135
|
const base64content = await this.driver.takeScreenshot();
|
|
131
136
|
log.debug('Tiles captured successfully');
|
|
@@ -134,8 +139,8 @@ export default class GenericProvider {
|
|
|
134
139
|
content: base64content,
|
|
135
140
|
statusBarHeight: 0,
|
|
136
141
|
navBarHeight: 0,
|
|
137
|
-
headerHeight,
|
|
138
|
-
footerHeight,
|
|
142
|
+
headerHeight: this.header,
|
|
143
|
+
footerHeight: this.footer,
|
|
139
144
|
fullscreen
|
|
140
145
|
})],
|
|
141
146
|
// TODO: Add Generic support sha for contextual diff for non-automate
|
|
@@ -171,6 +176,7 @@ export default class GenericProvider {
|
|
|
171
176
|
this.debugUrl = 'https://localhost/v1';
|
|
172
177
|
}
|
|
173
178
|
async doTransformations() {
|
|
179
|
+
var _this$options;
|
|
174
180
|
const hideScrollbarStyle = `
|
|
175
181
|
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
176
182
|
::-webkit-scrollbar {
|
|
@@ -191,6 +197,9 @@ export default class GenericProvider {
|
|
|
191
197
|
script: jsScript,
|
|
192
198
|
args: []
|
|
193
199
|
});
|
|
200
|
+
if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.fullPage || this.isIOS()) {
|
|
201
|
+
await this.getInitialScrollLocation();
|
|
202
|
+
}
|
|
194
203
|
}
|
|
195
204
|
async undoTransformations(data) {
|
|
196
205
|
const jsScript = `
|
|
@@ -216,16 +225,23 @@ export default class GenericProvider {
|
|
|
216
225
|
}
|
|
217
226
|
}
|
|
218
227
|
async getRegionObjectFromBoundingBox(selector, element) {
|
|
228
|
+
var _this$options2;
|
|
219
229
|
const scaleFactor = await this.metaData.devicePixelRatio();
|
|
230
|
+
let scrollX = 0,
|
|
231
|
+
scrollY = 0;
|
|
232
|
+
if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.fullPage) {
|
|
233
|
+
scrollX = this.initialScrollLocation.value[0];
|
|
234
|
+
scrollY = this.initialScrollLocation.value[1];
|
|
235
|
+
}
|
|
220
236
|
let headerAdjustment = 0;
|
|
221
|
-
if (this.
|
|
237
|
+
if (this.isIOS()) {
|
|
222
238
|
headerAdjustment = this.statusBarHeight;
|
|
223
239
|
}
|
|
224
240
|
const coOrdinates = {
|
|
225
|
-
top: Math.floor(element.y * scaleFactor) + Math.floor(headerAdjustment),
|
|
226
|
-
bottom: Math.ceil((element.y + element.height) * scaleFactor) + Math.ceil(headerAdjustment),
|
|
227
|
-
left: Math.floor(element.x * scaleFactor),
|
|
228
|
-
right: Math.ceil((element.x + element.width) * scaleFactor)
|
|
241
|
+
top: Math.floor((element.y + scrollY) * scaleFactor) + Math.floor(headerAdjustment),
|
|
242
|
+
bottom: Math.ceil((element.y + element.height + scrollY) * scaleFactor) + Math.ceil(headerAdjustment),
|
|
243
|
+
left: Math.floor((element.x + scrollX) * scaleFactor),
|
|
244
|
+
right: Math.ceil((element.x + element.width + scrollX) * scaleFactor)
|
|
229
245
|
};
|
|
230
246
|
const jsonObject = {
|
|
231
247
|
selector,
|
|
@@ -248,19 +264,16 @@ export default class GenericProvider {
|
|
|
248
264
|
}
|
|
249
265
|
return regionsArray;
|
|
250
266
|
}
|
|
251
|
-
async updatePageShiftFactor(location, scaleFactor) {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
args: []
|
|
255
|
-
});
|
|
256
|
-
if (this.currentTag.osName === 'iOS' || this.currentTag.osName === 'OS X' && parseInt(this.currentTag.browserVersion) > 13 && this.currentTag.browserName.toLowerCase() === 'safari') {
|
|
267
|
+
async updatePageShiftFactor(location, scaleFactor, scrollFactors) {
|
|
268
|
+
var _this$options3;
|
|
269
|
+
if (this.isIOS() || this.currentTag.osName === 'OS X' && parseInt(this.currentTag.browserVersion) > 13 && this.currentTag.browserName.toLowerCase() === 'safari') {
|
|
257
270
|
this.pageYShiftFactor = this.statusBarHeight;
|
|
258
271
|
} else {
|
|
259
272
|
this.pageYShiftFactor = this.statusBarHeight - scrollFactors.value[1] * scaleFactor;
|
|
260
273
|
}
|
|
261
|
-
this.pageXShiftFactor = this.
|
|
262
|
-
if (this.
|
|
263
|
-
if (scrollFactors.value[0] !== this.
|
|
274
|
+
this.pageXShiftFactor = this.isIOS() ? 0 : -(scrollFactors.value[0] * scaleFactor);
|
|
275
|
+
if (this.isIOS() && !((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.fullPage)) {
|
|
276
|
+
if (scrollFactors.value[0] !== this.initialScrollLocation.value[0] || scrollFactors.value[1] !== this.initialScrollLocation.value[1]) {
|
|
264
277
|
this.pageXShiftFactor = -1 * this.removeElementShiftFactor;
|
|
265
278
|
this.pageYShiftFactor = -1 * this.removeElementShiftFactor;
|
|
266
279
|
} else if (location.y === 0) {
|
|
@@ -269,6 +282,7 @@ export default class GenericProvider {
|
|
|
269
282
|
}
|
|
270
283
|
}
|
|
271
284
|
async getRegionObject(selector, elementId) {
|
|
285
|
+
var _this$options4;
|
|
272
286
|
const scaleFactor = await this.metaData.devicePixelRatio();
|
|
273
287
|
const rect = await this.driver.rect(elementId);
|
|
274
288
|
const location = {
|
|
@@ -279,16 +293,24 @@ export default class GenericProvider {
|
|
|
279
293
|
height: rect.height,
|
|
280
294
|
width: rect.width
|
|
281
295
|
};
|
|
296
|
+
let scrollX = 0,
|
|
297
|
+
scrollY = 0;
|
|
298
|
+
const scrollFactors = await this.getScrollDetails();
|
|
299
|
+
if ((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.fullPage) {
|
|
300
|
+
scrollX = scrollFactors.value[0];
|
|
301
|
+
scrollY = scrollFactors.value[1];
|
|
302
|
+
}
|
|
303
|
+
|
|
282
304
|
// Update pageShiftFactor Element is not visible in viewport
|
|
283
305
|
// In case of iOS if the element is not visible in viewport it gives 0 for x-y coordinate.
|
|
284
306
|
// In case of iOS if the element is partially visible it gives negative x-y coordinate.
|
|
285
307
|
// Subtracting ScrollY/ScrollX ensures if the element is visible in viewport or not.
|
|
286
|
-
await this.updatePageShiftFactor(location, scaleFactor);
|
|
308
|
+
await this.updatePageShiftFactor(location, scaleFactor, scrollFactors);
|
|
287
309
|
const coOrdinates = {
|
|
288
|
-
top: Math.floor(location.y * scaleFactor) + Math.floor(this.pageYShiftFactor),
|
|
289
|
-
bottom: Math.ceil((location.y + size.height) * scaleFactor) + Math.ceil(this.pageYShiftFactor),
|
|
290
|
-
left: Math.floor(location.x * scaleFactor) + Math.floor(this.pageXShiftFactor),
|
|
291
|
-
right: Math.ceil((location.x + size.width) * scaleFactor) + Math.ceil(this.pageXShiftFactor)
|
|
310
|
+
top: Math.floor((location.y + scrollY) * scaleFactor) + Math.floor(this.pageYShiftFactor),
|
|
311
|
+
bottom: Math.ceil((location.y + size.height + scrollY) * scaleFactor) + Math.ceil(this.pageYShiftFactor),
|
|
312
|
+
left: Math.floor((location.x + scrollX) * scaleFactor) + Math.floor(this.pageXShiftFactor),
|
|
313
|
+
right: Math.ceil((location.x + size.width + scrollX) * scaleFactor) + Math.ceil(this.pageXShiftFactor)
|
|
292
314
|
};
|
|
293
315
|
const jsonObject = {
|
|
294
316
|
selector,
|
|
@@ -298,7 +320,6 @@ export default class GenericProvider {
|
|
|
298
320
|
}
|
|
299
321
|
async getSeleniumRegionsByElement(elements) {
|
|
300
322
|
const regionsArray = [];
|
|
301
|
-
await this.getInitialPosition();
|
|
302
323
|
for (let index = 0; index < elements.length; index++) {
|
|
303
324
|
try {
|
|
304
325
|
const selector = `element: ${index}`;
|
|
@@ -309,7 +330,9 @@ export default class GenericProvider {
|
|
|
309
330
|
log.debug(e.toString());
|
|
310
331
|
}
|
|
311
332
|
}
|
|
312
|
-
|
|
333
|
+
if (this.isIOS()) {
|
|
334
|
+
await this.scrollToPosition(this.initialScrollLocation.value[0], this.initialScrollLocation.value[1]);
|
|
335
|
+
}
|
|
313
336
|
return regionsArray;
|
|
314
337
|
}
|
|
315
338
|
async getSeleniumRegionsByLocation(customLocations) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@percy/webdriver-utils",
|
|
3
|
-
"version": "1.27.6
|
|
3
|
+
"version": "1.27.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
"publishConfig": {
|
|
11
11
|
"access": "public",
|
|
12
|
-
"tag": "
|
|
12
|
+
"tag": "latest"
|
|
13
13
|
},
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=14"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"test:coverage": "yarn test --coverage"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@percy/config": "1.27.6
|
|
33
|
-
"@percy/sdk-utils": "1.27.6
|
|
32
|
+
"@percy/config": "1.27.6",
|
|
33
|
+
"@percy/sdk-utils": "1.27.6"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "4f0f287ba8beec5a7bad9adc3dd91eef98fa0a75"
|
|
36
36
|
}
|