change param name to disableShadowDOMSerialization

packages/config/test/index.test.js

@@ -1109,7 +1109,7 @@ describe('PercyConfig', () => {
         barBazQux: 'xyzzy',
         percyCSS: '',
         enableJavaScript: false,
-        disableShadowDOM: true
+        disableShadowDOMSerialization: true
       });
     });
 
@@ -1120,7 +1120,7 @@ describe('PercyConfig', () => {
         fooBar_baz: ['qux'],
         percyCSS: '',
         enableJavaScript: false,
-        disableShadowDOM: true
+        disableShadowDOMSerialization: true
       }, { kebab: true })).toEqual({
         'foo-bar': 'baz',
         foo: { 'bar-baz': 'qux' },
@@ -1138,14 +1138,14 @@ describe('PercyConfig', () => {
         fooBar_baz: ['qux'],
         percyCSS: '',
         enableJavaScript: false,
-        disableShadowDOM: true
+        disableShadowDOMSerialization: true
       }, { snake: true })).toEqual({
         foo_bar: 'baz',
         foo: { bar_baz: 'qux' },
         foo_bar_baz: ['qux'],
         percy_css: '',
         enable_javascript: false,
-        disable_shadow_dom: true
+        disable_shadow_dom_serialization: true
       });
     });
 

packages/core/src/config.js

@@ -35,7 +35,7 @@ export const configSchema = {
       enableJavaScript: {
         type: 'boolean'
       },
-      disableShadowDOM: {
+      disableShadowDOMSerialization: {
         type: 'boolean',
         default: false
       },
@@ -153,7 +153,7 @@ export const snapshotSchema = {
         minHeight: { $ref: '/config/snapshot#/properties/minHeight' },
         percyCSS: { $ref: '/config/snapshot#/properties/percyCSS' },
         enableJavaScript: { $ref: '/config/snapshot#/properties/enableJavaScript' },
-        disableShadowDOM: { $ref: '/config/snapshot#/properties/disableShadowDOM' },
+        disableShadowDOMSerialization: { $ref: '/config/snapshot#/properties/disableShadowDOMSerialization' },
         discovery: {
           type: 'object',
           additionalProperties: false,

packages/core/src/discovery.js

@@ -34,7 +34,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'widths', v => `${v}px`);
   debugProp(snapshot, 'minHeight', v => `${v}px`);
   debugProp(snapshot, 'enableJavaScript');
-  debugProp(snapshot, 'disableShadowDOM');
+  debugProp(snapshot, 'disableShadowDOMSerialization');
   debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');

packages/core/src/page.js

@@ -140,7 +140,7 @@ export class Page {
     execute,
     ...snapshot
   }) {
-    let { name, width, enableJavaScript, disableShadowDOM } = snapshot;
+    let { name, width, enableJavaScript, disableShadowDOMSerialization } = snapshot;
     this.log.debug(`Taking snapshot: ${name}${width ? ` @${width}px` : ''}`, this.meta);
 
     // wait for any specified timeout
@@ -181,7 +181,7 @@ export class Page {
       /* eslint-disable-next-line no-undef */
       domSnapshot: PercyDOM.serialize(options),
       url: document.URL
-    }), { enableJavaScript, disableShadowDOM });
+    }), { enableJavaScript, disableShadowDOMSerialization });
 
     return { ...snapshot, ...capture };
   }

packages/core/test/discovery.test.js

@@ -306,7 +306,7 @@ describe('Discovery', () => {
       name: 'test event snapshot',
       url: 'http://localhost:8000/events',
       enableJavaScript: true,
-      disableShadowDOM: true
+      disableShadowDOMSerialization: true
     });
 
     await percy.idle();

packages/core/test/percy.test.js

@@ -57,7 +57,7 @@ describe('Percy', () => {
       widths: [375, 1280],
       minHeight: 1024,
       percyCSS: '',
-      disableShadowDOM: false
+      disableShadowDOMSerialization: false
     });
   });
 
@@ -78,7 +78,7 @@ describe('Percy', () => {
         let p = document.querySelector('p');
         p.textContent = p.textContent.replace('Hello', 'Hello there,');
       },
-      disableShadowDOM: true
+      disableShadowDOMSerialization: true
     });
 
     expect(snapshot.url).toEqual('http://localhost:8000/');

packages/core/types/index.d.ts

@@ -38,7 +38,7 @@ interface CommonSnapshotOptions {
   minHeight?: number;
   percyCSS?: string;
   enableJavaScript?: boolean;
-  disableShadowDOM?: boolean;
+  disableShadowDOMSerialization?: boolean;
   devicePixelRatio?: number;
   scope?: string;
 }

packages/dom/README.md

@@ -37,7 +37,7 @@ const domSnapshot = await page.evaluate(() => PercyDOM.serialize(options))
 
 - `enableJavaScript` — When true, does not serialize some DOM elements
 - `domTransformation` — Function to transform the DOM after serialization
-- `disableShadowDOM` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
+- `disableShadowDOMSerialization` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
 
 ## Serialized Content
 

packages/dom/src/clone-dom.js

@@ -9,7 +9,7 @@ import markElement from './prepare-dom';
  * Deep clone a document while also preserving shadow roots
  * returns document fragment
  */
-export function cloneNodeAndShadow({ dom, disableShadowDOM }) {
+export function cloneNodeAndShadow({ dom, disableShadowDOMSerialization }) {
   // clones shadow DOM and light DOM for a given node
   let cloneNode = (node, parent) => {
     let walkTree = (nextn, nextp) => {
@@ -20,14 +20,14 @@ export function cloneNodeAndShadow({ dom, disableShadowDOM }) {
     };
 
     // mark the node before cloning
-    markElement(node, disableShadowDOM);
+    markElement(node, disableShadowDOMSerialization);
 
     let clone = node.cloneNode();
 
     parent.appendChild(clone);
 
     // clone shadow DOM
-    if (node.shadowRoot && !disableShadowDOM) {
+    if (node.shadowRoot && !disableShadowDOMSerialization) {
       // create shadowRoot
       if (clone.shadowRoot) {
         // it may be set up in a custom element's constructor
@@ -62,7 +62,7 @@ export function getOuterHTML(ctx) {
   if (!docElement.getInnerHTML) { return docElement.outerHTML; }
   // chromium gives us declarative shadow DOM serialization API
 
-  let innerHTML = docElement.getInnerHTML({ includeShadowRoots: !ctx.disableShadowDOM && !ctx.enableJavaScript });
+  let innerHTML = docElement.getInnerHTML({ includeShadowRoots: !ctx.disableShadowDOMSerialization });
   docElement.textContent = '';
   return docElement.outerHTML.replace('</html>', `${innerHTML}</html>`);
 };

packages/dom/src/prepare-dom.js

@@ -3,7 +3,7 @@ export function uid() {
   return `_${Math.random().toString(36).substr(2, 9)}`;
 }
 
-export function markElement(domElement, disableShadowDOM) {
+export function markElement(domElement, disableShadowDOMSerialization) {
   // Mark elements that are to be serialized later with a data attribute.
   if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes(domElement.tagName?.toLowerCase())) {
     if (!domElement.getAttribute('data-percy-element-id')) {
@@ -12,7 +12,7 @@ export function markElement(domElement, disableShadowDOM) {
   }
 
   // add special marker for shadow host
-  if (!disableShadowDOM && domElement.shadowRoot) {
+  if (!disableShadowDOMSerialization && domElement.shadowRoot) {
     domElement.setAttribute('data-percy-shadow-host', '');
 
     if (!domElement.getAttribute('data-percy-element-id')) {

packages/dom/src/serialize-dom.js

@@ -64,7 +64,7 @@ export function serializeDOM(options) {
     enableJavaScript = options?.enable_javascript,
     domTransformation = options?.dom_transformation,
     stringifyResponse = options?.stringify_response,
-    disableShadowDOM = options?.disable_shadow_dom
+    disableShadowDOMSerialization = options?.disable_shadow_dom_serialization
   } = options || {};
 
   // keep certain records throughout serialization
@@ -73,7 +73,7 @@ export function serializeDOM(options) {
     warnings: new Set(),
     cache: new Map(),
     enableJavaScript,
-    disableShadowDOM
+    disableShadowDOMSerialization
   };
 
   ctx.dom = dom;
@@ -93,7 +93,7 @@ export function serializeDOM(options) {
     }
   }
 
-  if (!disableShadowDOM) { injectDeclarativeShadowDOMPolyfill(ctx); }
+  if (!disableShadowDOMSerialization) { injectDeclarativeShadowDOMPolyfill(ctx); }
 
   let result = {
     html: serializeHTML(ctx),

packages/dom/src/serialize-frames.js

@@ -13,7 +13,7 @@ function setBaseURI(dom) {
 }
 
 // Recursively serializes iframe documents into srcdoc attributes.
-export function serializeFrames({ dom, clone, warnings, resources, enableJavaScript, disableShadowDOM }) {
+export function serializeFrames({ dom, clone, warnings, resources, enableJavaScript, disableShadowDOMSerialization }) {
   for (let frame of dom.querySelectorAll('iframe')) {
     let percyElementId = frame.getAttribute('data-percy-element-id');
     let cloneEl = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
@@ -37,7 +37,7 @@ export function serializeFrames({ dom, clone, warnings, resources, enableJavaScr
         domTransformation: setBaseURI,
         dom: frame.contentDocument,
         enableJavaScript,
-        disableShadowDOM
+        disableShadowDOMSerialization
       });
 
       // append serialized warnings and resources

packages/dom/test/serialize-dom.test.js

@@ -171,7 +171,7 @@ describe('serializeDOM', () => {
       expect(html).toMatch(new RegExp(matchRegex));
     });
 
-    it('respects disableShadowDOM', () => {
+    it('respects disableShadowDOMSerialization', () => {
       if (!navigator.userAgent.toLowerCase().includes('chrome')) {
         return;
       }
@@ -180,7 +180,7 @@ describe('serializeDOM', () => {
       const el = createShadowEl(8);
       baseContent.appendChild(el);
 
-      const html = serializeDOM({ disableShadowDOM: true }).html;
+      const html = serializeDOM({ disableShadowDOMSerialization: true }).html;
       expect(html).not.toMatch('<p>Percy-8</p>');
       expect(html).not.toMatch('data-percy-shadow-host=');
     });