@applitools/dom-snapshot - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

CHANGELOG.md

@@ -7,2 +7,6 @@
 
+## 4.0.2 - 2020/8/6
+
+- support adoptedStyleSheets ([Trello](https://trello.com/c/cX4q0DzH) [Trello](https://trello.com/c/a22B3tUB))
+
 ## 4.0.1 - 2020/7/30
@@ -9,0 +13,0 @@

package.json

 {
   "name": "@applitools/dom-snapshot",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "main": "index.js",
@@ -32,3 +32,3 @@ "license": "SEE LICENSE IN LICENSE",
     "@applitools/monitoring-commons": "^1.0.19",
-    "@applitools/sdk-release-kit": "0.1.0",
+    "@applitools/sdk-release-kit": "0.2.2",
     "@applitools/sdk-shared": "0.1.0",
@@ -35,0 +35,0 @@ "@babel/preset-env": "^7.8.3",

src/browser/domNodesToCdt.js

@@ -9,3 +9,5 @@ /* eslint-disable no-use-before-define */
 const extractLinksFromElement = require('./extractLinksFromElement');
+const styleSheetToCssText = require('./cssom/styleSheetToCssText');
 const noop = require('./noop');
+
 const NEED_MAP_INPUT_TYPES = new Set([
@@ -35,2 +37,5 @@ 'date',
   cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
+  if (docNode.adoptedStyleSheets && docNode.adoptedStyleSheets.length > 0) {
+    cdt[0].adoptedStyleSheets = getAdoptedStyleSheets(docNode);
+  }
   return {cdt, docRoots, canvasElements, inlineFrames, linkUrls};
@@ -62,3 +67,3 @@
         ) {
-          cdt.push(getCssRulesNode(elementNode));
+          cdt.push(getCssRulesNode(elementNode, log));
           manualChildNodeIndexes = [cdt.length - 1];
@@ -107,2 +112,6 @@ }
         }
+
+        if (elementNode.adoptedStyleSheets && elementNode.adoptedStyleSheets.length > 0) {
+          node.adoptedStyleSheets = getAdoptedStyleSheets(elementNode);
+        }
       } else {
@@ -130,132 +139,136 @@ node = getScriptNode(elementNode);
   }
+}
 
-  function nodeAttributes({attributes = {}}) {
-    return Object.keys(attributes).filter(k => attributes[k] && attributes[k].name);
-  }
+function nodeAttributes({attributes = {}}) {
+  return Object.keys(attributes).filter(k => attributes[k] && attributes[k].name);
+}
 
-  function getCssRulesNode(elementNode) {
-    return {
-      nodeType: Node.TEXT_NODE,
-      nodeValue: processInlineCss(elementNode, log),
-    };
-  }
+function getCssRulesNode(elementNode, log) {
+  return {
+    nodeType: Node.TEXT_NODE,
+    nodeValue: processInlineCss(elementNode, log),
+  };
+}
 
-  function getTextContentNode(elementNode) {
-    return {
-      nodeType: Node.TEXT_NODE,
-      nodeValue: elementNode.value,
-    };
-  }
+function getTextContentNode(elementNode) {
+  return {
+    nodeType: Node.TEXT_NODE,
+    nodeValue: elementNode.value,
+  };
+}
 
-  function getBasicNode(elementNode) {
-    const node = {
-      nodeType: elementNode.nodeType,
-      nodeName: elementNode.nodeName,
-      attributes: nodeAttributes(elementNode).map(key => {
-        let value = elementNode.attributes[key].value;
-        const name = elementNode.attributes[key].name;
-        if (/^blob:/.test(value)) {
-          value = value.replace(/^blob:/, '');
-        } else if (ON_EVENT_REGEX.test(name)) {
-          value = '';
-        } else if (
-          elementNode.nodeName === 'IFRAME' &&
-          isAccessibleFrame(elementNode) &&
-          name === 'src' &&
-          elementNode.contentDocument.location.href !== 'about:blank' &&
-          elementNode.contentDocument.location.href !==
-            absolutizeUrl(value, elementNode.ownerDocument.location.href)
-        ) {
-          value = elementNode.contentDocument.location.href;
-        }
-        return {
-          name,
-          value,
-        };
-      }),
-    };
-
-    if (elementNode.tagName === 'INPUT' && ['checkbox', 'radio'].includes(elementNode.type)) {
-      if (elementNode.attributes.checked && !elementNode.checked) {
-        const idx = node.attributes.findIndex(a => a.name === 'checked');
-        node.attributes.splice(idx, 1);
+function getBasicNode(elementNode) {
+  const node = {
+    nodeType: elementNode.nodeType,
+    nodeName: elementNode.nodeName,
+    attributes: nodeAttributes(elementNode).map(key => {
+      let value = elementNode.attributes[key].value;
+      const name = elementNode.attributes[key].name;
+      if (/^blob:/.test(value)) {
+        value = value.replace(/^blob:/, '');
+      } else if (ON_EVENT_REGEX.test(name)) {
+        value = '';
+      } else if (
+        elementNode.nodeName === 'IFRAME' &&
+        isAccessibleFrame(elementNode) &&
+        name === 'src' &&
+        elementNode.contentDocument.location.href !== 'about:blank' &&
+        elementNode.contentDocument.location.href !==
+          absolutizeUrl(value, elementNode.ownerDocument.location.href)
+      ) {
+        value = elementNode.contentDocument.location.href;
       }
-      if (!elementNode.attributes.checked && elementNode.checked) {
-        node.attributes.push({name: 'checked'});
-      }
-    }
+      return {
+        name,
+        value,
+      };
+    }),
+  };
 
-    if (
-      elementNode.tagName === 'INPUT' &&
-      NEED_MAP_INPUT_TYPES.has(elementNode.type) &&
-      (elementNode.attributes.value && elementNode.attributes.value.value) !== elementNode.value
-    ) {
-      addOrUpdateAttribute(node.attributes, 'value', elementNode.value);
+  if (elementNode.tagName === 'INPUT' && ['checkbox', 'radio'].includes(elementNode.type)) {
+    if (elementNode.attributes.checked && !elementNode.checked) {
+      const idx = node.attributes.findIndex(a => a.name === 'checked');
+      node.attributes.splice(idx, 1);
     }
-
-    if (
-      elementNode.tagName === 'OPTION' &&
-      elementNode.parentElement.selectedOptions &&
-      Array.from(elementNode.parentElement.selectedOptions).indexOf(elementNode) > -1
-    ) {
-      addOrUpdateAttribute(node.attributes, 'selected', '');
+    if (!elementNode.attributes.checked && elementNode.checked) {
+      node.attributes.push({name: 'checked'});
     }
-
-    if (elementNode.tagName === 'STYLE' && elementNode.sheet && elementNode.sheet.disabled) {
-      node.attributes.push({name: 'data-applitools-disabled', value: ''});
-    }
-    if (
-      elementNode.tagName === 'LINK' &&
-      elementNode.type === 'text/css' &&
-      elementNode.sheet &&
-      elementNode.sheet.disabled
-    ) {
-      addOrUpdateAttribute(node.attributes, 'disabled', '');
-    }
-
-    return node;
   }
 
-  function addOrUpdateAttribute(attributes, name, value) {
-    const nodeAttr = attributes.find(a => a.name === name);
-    if (nodeAttr) {
-      nodeAttr.value = value;
-    } else {
-      attributes.push({name, value});
-    }
+  if (
+    elementNode.tagName === 'INPUT' &&
+    NEED_MAP_INPUT_TYPES.has(elementNode.type) &&
+    (elementNode.attributes.value && elementNode.attributes.value.value) !== elementNode.value
+  ) {
+    addOrUpdateAttribute(node.attributes, 'value', elementNode.value);
   }
 
-  function getScriptNode(elementNode) {
-    return {
-      nodeType: Node.ELEMENT_NODE,
-      nodeName: 'SCRIPT',
-      attributes: nodeAttributes(elementNode)
-        .map(key => {
-          const name = elementNode.attributes[key].name;
-          const value = ON_EVENT_REGEX.test(name) ? '' : elementNode.attributes[key].value;
-          return {
-            name,
-            value,
-          };
-        })
-        .filter(attr => attr.name !== 'src'),
-      childNodeIndexes: [],
-    };
+  if (
+    elementNode.tagName === 'OPTION' &&
+    elementNode.parentElement.selectedOptions &&
+    Array.from(elementNode.parentElement.selectedOptions).indexOf(elementNode) > -1
+  ) {
+    addOrUpdateAttribute(node.attributes, 'selected', '');
   }
 
-  function getTextNode(elementNode) {
-    return {
-      nodeType: Node.TEXT_NODE,
-      nodeValue: elementNode.nodeValue,
-    };
+  if (elementNode.tagName === 'STYLE' && elementNode.sheet && elementNode.sheet.disabled) {
+    node.attributes.push({name: 'data-applitools-disabled', value: ''});
   }
+  if (
+    elementNode.tagName === 'LINK' &&
+    elementNode.type === 'text/css' &&
+    elementNode.sheet &&
+    elementNode.sheet.disabled
+  ) {
+    addOrUpdateAttribute(node.attributes, 'disabled', '');
+  }
 
-  function getDocNode(elementNode) {
-    return {
-      nodeType: Node.DOCUMENT_TYPE_NODE,
-      nodeName: elementNode.nodeName,
-    };
+  return node;
+}
+
+function addOrUpdateAttribute(attributes, name, value) {
+  const nodeAttr = attributes.find(a => a.name === name);
+  if (nodeAttr) {
+    nodeAttr.value = value;
+  } else {
+    attributes.push({name, value});
   }
 }
 
+function getScriptNode(elementNode) {
+  return {
+    nodeType: Node.ELEMENT_NODE,
+    nodeName: 'SCRIPT',
+    attributes: nodeAttributes(elementNode)
+      .map(key => {
+        const name = elementNode.attributes[key].name;
+        const value = ON_EVENT_REGEX.test(name) ? '' : elementNode.attributes[key].value;
+        return {
+          name,
+          value,
+        };
+      })
+      .filter(attr => attr.name !== 'src'),
+    childNodeIndexes: [],
+  };
+}
+
+function getTextNode(elementNode) {
+  return {
+    nodeType: Node.TEXT_NODE,
+    nodeValue: elementNode.nodeValue,
+  };
+}
+
+function getDocNode(elementNode) {
+  return {
+    nodeType: Node.DOCUMENT_TYPE_NODE,
+    nodeName: elementNode.nodeName,
+  };
+}
+
+function getAdoptedStyleSheets(node) {
+  return Array.from(node.adoptedStyleSheets).map(styleSheetToCssText);
+}
+
 module.exports = domNodesToCdt;

No alert changes

Improved metrics

Total package byte prevSize

3489600

increased by0.1%

Number of package files

59

increased by1.72%

Lines of code

91245

increased by0.12%

No dependency changes