@percy/dom 1.22.0-alpha.0 → 1.22.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/README.md +1 -1
- package/dist/bundle.js +13 -15
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ const domSnapshot = await page.evaluate(() => PercyDOM.serialize(options))
|
|
|
37
37
|
|
|
38
38
|
- `enableJavaScript` — When true, does not serialize some DOM elements
|
|
39
39
|
- `domTransformation` — Function to transform the DOM after serialization
|
|
40
|
-
- `
|
|
40
|
+
- `disableShadowDOM` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
|
|
41
41
|
|
|
42
42
|
## Serialized Content
|
|
43
43
|
|
package/dist/bundle.js
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
warnings,
|
|
61
61
|
resources,
|
|
62
62
|
enableJavaScript,
|
|
63
|
-
|
|
63
|
+
disableShadowDOM
|
|
64
64
|
} = _ref;
|
|
65
65
|
for (let frame of dom.querySelectorAll('iframe')) {
|
|
66
66
|
var _clone$head;
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
domTransformation: setBaseURI,
|
|
87
87
|
dom: frame.contentDocument,
|
|
88
88
|
enableJavaScript,
|
|
89
|
-
|
|
89
|
+
disableShadowDOM
|
|
90
90
|
});
|
|
91
91
|
|
|
92
92
|
// append serialized warnings and resources
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
function uid() {
|
|
160
160
|
return `_${Math.random().toString(36).substr(2, 9)}`;
|
|
161
161
|
}
|
|
162
|
-
function markElement(domElement,
|
|
162
|
+
function markElement(domElement, disableShadowDOM) {
|
|
163
163
|
var _domElement$tagName;
|
|
164
164
|
// Mark elements that are to be serialized later with a data attribute.
|
|
165
165
|
if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
// add special marker for shadow host
|
|
172
|
-
if (!
|
|
172
|
+
if (!disableShadowDOM && domElement.shadowRoot) {
|
|
173
173
|
domElement.setAttribute('data-percy-shadow-host', '');
|
|
174
174
|
if (!domElement.getAttribute('data-percy-element-id')) {
|
|
175
175
|
domElement.setAttribute('data-percy-element-id', uid());
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
function cloneNodeAndShadow(_ref) {
|
|
342
342
|
let {
|
|
343
343
|
dom,
|
|
344
|
-
|
|
344
|
+
disableShadowDOM
|
|
345
345
|
} = _ref;
|
|
346
346
|
// clones shadow DOM and light DOM for a given node
|
|
347
347
|
let cloneNode = (node, parent) => {
|
|
@@ -353,12 +353,12 @@
|
|
|
353
353
|
};
|
|
354
354
|
|
|
355
355
|
// mark the node before cloning
|
|
356
|
-
markElement(node,
|
|
356
|
+
markElement(node, disableShadowDOM);
|
|
357
357
|
let clone = node.cloneNode();
|
|
358
358
|
parent.appendChild(clone);
|
|
359
359
|
|
|
360
360
|
// clone shadow DOM
|
|
361
|
-
if (node.shadowRoot && !
|
|
361
|
+
if (node.shadowRoot && !disableShadowDOM) {
|
|
362
362
|
// create shadowRoot
|
|
363
363
|
if (clone.shadowRoot) {
|
|
364
364
|
// it may be set up in a custom element's constructor
|
|
@@ -386,16 +386,14 @@
|
|
|
386
386
|
/**
|
|
387
387
|
* Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
|
|
388
388
|
*/
|
|
389
|
-
function getOuterHTML(
|
|
390
|
-
const docElement = ctx.clone.documentElement;
|
|
389
|
+
function getOuterHTML(docElement) {
|
|
391
390
|
// firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
|
|
392
391
|
if (!docElement.getInnerHTML) {
|
|
393
392
|
return docElement.outerHTML;
|
|
394
393
|
}
|
|
395
394
|
// chromium gives us declarative shadow DOM serialization API
|
|
396
|
-
|
|
397
395
|
let innerHTML = docElement.getInnerHTML({
|
|
398
|
-
includeShadowRoots:
|
|
396
|
+
includeShadowRoots: true
|
|
399
397
|
});
|
|
400
398
|
docElement.textContent = '';
|
|
401
399
|
return docElement.outerHTML.replace('</html>', `${innerHTML}</html>`);
|
|
@@ -451,7 +449,7 @@
|
|
|
451
449
|
|
|
452
450
|
// Serializes and returns the cloned DOM as an HTML string
|
|
453
451
|
function serializeHTML(ctx) {
|
|
454
|
-
let html = getOuterHTML(ctx);
|
|
452
|
+
let html = getOuterHTML(ctx.clone.documentElement);
|
|
455
453
|
// replace serialized data attributes with real attributes
|
|
456
454
|
html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
|
|
457
455
|
// include the doctype with the html string
|
|
@@ -488,7 +486,7 @@
|
|
|
488
486
|
enableJavaScript = options === null || options === void 0 ? void 0 : options.enable_javascript,
|
|
489
487
|
domTransformation = options === null || options === void 0 ? void 0 : options.dom_transformation,
|
|
490
488
|
stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response,
|
|
491
|
-
|
|
489
|
+
disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom
|
|
492
490
|
} = options || {};
|
|
493
491
|
|
|
494
492
|
// keep certain records throughout serialization
|
|
@@ -497,7 +495,7 @@
|
|
|
497
495
|
warnings: new Set(),
|
|
498
496
|
cache: new Map(),
|
|
499
497
|
enableJavaScript,
|
|
500
|
-
|
|
498
|
+
disableShadowDOM
|
|
501
499
|
};
|
|
502
500
|
ctx.dom = dom;
|
|
503
501
|
ctx.clone = cloneNodeAndShadow(ctx);
|
|
@@ -513,7 +511,7 @@
|
|
|
513
511
|
console.error(errorMessage);
|
|
514
512
|
}
|
|
515
513
|
}
|
|
516
|
-
if (!
|
|
514
|
+
if (!disableShadowDOM) {
|
|
517
515
|
injectDeclarativeShadowDOMPolyfill(ctx);
|
|
518
516
|
}
|
|
519
517
|
let result = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@percy/dom",
|
|
3
|
-
"version": "1.22.0
|
|
3
|
+
"version": "1.22.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"interactor.js": "^2.0.0-beta.10"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "473ae8925585bc77f584bbcaa7058fc967bd3c61"
|
|
38
38
|
}
|