@applitools/dom-snapshot - npm Package Compare versions

Comparing version 1.3.6 to 1.3.7

dist/processPage.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.3.5 */
+/* @applitools/dom-snapshot@1.3.6 */
 
@@ -47,5 +47,15 @@ function __processPage() {
 
-  /* eslint-disable no-use-before-define */
+  function absolutizeUrl(url, absoluteUrl) {
+    return new URL(url, absoluteUrl).href;
+  }
 
-  function domNodesToCdt(docNode) {
+  var absolutizeUrl_1 = absolutizeUrl;
+
+  function uuid() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0];
+  }
+
+  var uuid_1 = uuid;
+
+  function domNodesToCdt(docNode, url) {
     const cdt = [
@@ -57,6 +67,7 @@ {
     const documents = [docNode];
-    cdt[0].childNodeIndexes = childrenFactory(cdt, documents, docNode.childNodes);
-    return {cdt, documents};
+    const canvasElements = [];
+    cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
+    return {cdt, documents, canvasElements};
 
-    function childrenFactory(domNodes, documents, elementNodes) {
+    function childrenFactory(cdt, elementNodes) {
       if (!elementNodes || elementNodes.length === 0) return null;
@@ -66,3 +77,3 @@
       Array.prototype.forEach.call(elementNodes, elementNode => {
-        const index = elementNodeFactory(domNodes, documents, elementNode);
+        const index = elementNodeFactory(cdt, elementNode);
         if (index !== null) {
@@ -72,9 +83,10 @@ childIndexes.push(index);
       });
-
       return childIndexes;
     }
 
-    function elementNodeFactory(domNodes, documents, elementNode) {
+    function elementNodeFactory(cdt, elementNode) {
       let node, manualChildNodeIndexes;
       const {nodeType} = elementNode;
+      let canvasUrl;
+
       if ([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(nodeType)) {
@@ -87,48 +99,26 @@ if (elementNode.nodeName !== 'SCRIPT') {
           ) {
-            domNodes.push({
-              nodeType: Node.TEXT_NODE,
-              nodeValue: Array.from(elementNode.sheet.cssRules)
-                .map(rule => rule.cssText)
-                .join(''),
-            });
-            manualChildNodeIndexes = [domNodes.length - 1];
+            cdt.push(getCssRulesNode(elementNode));
+            manualChildNodeIndexes = [cdt.length - 1];
           }
 
-          node = {
-            nodeType: nodeType,
-            nodeName: elementNode.nodeName,
-            attributes: nodeAttributes(elementNode).map(key => {
-              let value = elementNode.attributes[key].value;
-              const name = elementNode.attributes[key].name;
+          node = getBasicNode(elementNode);
+          node.childNodeIndexes =
+            manualChildNodeIndexes ||
+            (elementNode.childNodes.length ? childrenFactory(cdt, elementNode.childNodes) : []);
 
-              if (/^blob:/.test(value)) {
-                value = value.replace(/^blob:/, '');
-              } else if (
-                elementNode.nodeName === 'IFRAME' &&
-                name === 'src' &&
-                !elementNode.contentDocument &&
-                !value.match(/^\s*data:/)
-              ) {
-                value = '';
-              }
-              return {
-                name,
-                value,
-              };
-            }),
-            childNodeIndexes:
-              manualChildNodeIndexes ||
-              (elementNode.childNodes.length
-                ? childrenFactory(domNodes, documents, elementNode.childNodes)
-                : []),
-          };
-
           if (elementNode.shadowRoot) {
-            node.shadowRootIndex = elementNodeFactory(domNodes, documents, elementNode.shadowRoot);
+            node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
             documents.push(elementNode.shadowRoot);
           }
 
+          if (elementNode.nodeName === 'CANVAS') {
+            canvasUrl = absolutizeUrl_1(`canvas-${uuid_1()}.png`, url);
+            node.attributes.push({name: 'data-applitools-src', value: canvasUrl});
+            canvasElements.push({element: elementNode, url: canvasUrl});
+          }
+
           if (elementNode.checked && !elementNode.attributes.checked) {
             node.attributes.push({name: 'checked', value: 'checked'});
           }
+
           if (
@@ -142,38 +132,84 @@ elementNode.value !== undefined &&
         } else {
-          node = {
-            nodeType: Node.ELEMENT_NODE,
-            nodeName: 'SCRIPT',
-            attributes: nodeAttributes(elementNode)
-              .map(key => ({
-                name: elementNode.attributes[key].name,
-                value: elementNode.attributes[key].value,
-              }))
-              .filter(attr => attr.name !== 'src'),
-            childNodeIndexes: [],
-          };
+          node = getScriptNode(elementNode);
         }
       } else if (nodeType === Node.TEXT_NODE) {
-        node = {
-          nodeType: Node.TEXT_NODE,
-          nodeValue: elementNode.nodeValue,
-        };
+        node = getTextNode(elementNode);
       } else if (nodeType === Node.DOCUMENT_TYPE_NODE) {
-        node = {
-          nodeType: Node.DOCUMENT_TYPE_NODE,
-          nodeName: elementNode.nodeName,
-        };
+        node = getDocNode(elementNode);
       }
 
       if (node) {
-        domNodes.push(node);
-        return domNodes.length - 1;
+        cdt.push(node);
+        return cdt.length - 1;
       } else {
-        // console.log(`Unknown nodeType: ${nodeType}`);
         return null;
       }
+    }
 
-      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: Array.from(elementNode.sheet.cssRules)
+          .map(rule => rule.cssText)
+          .join(''),
+      };
+    }
+
+    function getBasicNode(elementNode) {
+      return {
+        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 (
+            elementNode.nodeName === 'IFRAME' &&
+            name === 'src' &&
+            !elementNode.contentDocument &&
+            !value.match(/^\s*data:/)
+          ) {
+            value = '';
+          }
+          return {
+            name,
+            value,
+          };
+        }),
+      };
+    }
+
+    function getScriptNode(elementNode) {
+      return {
+        nodeType: Node.ELEMENT_NODE,
+        nodeName: 'SCRIPT',
+        attributes: nodeAttributes(elementNode)
+          .map(key => ({
+            name: elementNode.attributes[key].name,
+            value: elementNode.attributes[key].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,
+      };
+    }
   }
@@ -257,8 +293,2 @@
 
-  function absolutizeUrl(url, absoluteUrl) {
-    return new URL(url, absoluteUrl).href;
-  }
-
-  var absolutizeUrl_1 = absolutizeUrl;
-
   function createTempStylsheet(cssContent) {
@@ -504,2 +534,24 @@ if (!cssContent) {
 
+  function base64ToArrayBuffer(base64) {
+    var binary_string = window.atob(base64);
+    var len = binary_string.length;
+    var bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) {
+      bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+
+  var base64ToArrayBuffer_1 = base64ToArrayBuffer;
+
+  function buildCanvasBlobs(canvasElements) {
+    return canvasElements.map(({url, element}) => {
+      const data = element.toDataURL('image/png');
+      const value = base64ToArrayBuffer_1(data.split(',')[1]);
+      return {url, type: 'image/png', value};
+    });
+  }
+
+  var buildCanvasBlobs_1 = buildCanvasBlobs;
+
   function toUriEncoding(url) {
@@ -559,3 +611,3 @@ const result =
 
-      const {cdt, documents} = domNodesToCdt_1(doc);
+      const {cdt, documents, canvasElements} = domNodesToCdt_1(doc, url);
 
@@ -578,2 +630,3 @@ const linkUrls = flat_1(documents.map(extractLinks_1));
       const processFramesPromise = frameDocs.map(doProcessPage);
+      const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
@@ -585,3 +638,3 @@ return Promise.all([resourceUrlsAndBlobsPromise, ...processFramesPromise]).then(
           resourceUrls,
-          blobs: blobsObjToArray(blobsObj),
+          blobs: [...blobsObjToArray(blobsObj), ...canvasBlobs],
           frames: framesResults,
@@ -588,0 +641,0 @@ srcAttr: frameElement ? frameElement.getAttribute('src') : undefined,

dist/processPageAndPoll.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.3.5 */
+/* @applitools/dom-snapshot@1.3.6 */
 
@@ -99,5 +99,15 @@ function __processPageAndPoll() {
 
-  /* eslint-disable no-use-before-define */
+  function absolutizeUrl(url, absoluteUrl) {
+    return new URL(url, absoluteUrl).href;
+  }
 
-  function domNodesToCdt(docNode) {
+  var absolutizeUrl_1 = absolutizeUrl;
+
+  function uuid() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0];
+  }
+
+  var uuid_1 = uuid;
+
+  function domNodesToCdt(docNode, url) {
     const cdt = [
@@ -109,6 +119,7 @@ {
     const documents = [docNode];
-    cdt[0].childNodeIndexes = childrenFactory(cdt, documents, docNode.childNodes);
-    return {cdt, documents};
+    const canvasElements = [];
+    cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
+    return {cdt, documents, canvasElements};
 
-    function childrenFactory(domNodes, documents, elementNodes) {
+    function childrenFactory(cdt, elementNodes) {
       if (!elementNodes || elementNodes.length === 0) return null;
@@ -118,3 +129,3 @@
       Array.prototype.forEach.call(elementNodes, elementNode => {
-        const index = elementNodeFactory(domNodes, documents, elementNode);
+        const index = elementNodeFactory(cdt, elementNode);
         if (index !== null) {
@@ -124,9 +135,10 @@ childIndexes.push(index);
       });
-
       return childIndexes;
     }
 
-    function elementNodeFactory(domNodes, documents, elementNode) {
+    function elementNodeFactory(cdt, elementNode) {
       let node, manualChildNodeIndexes;
       const {nodeType} = elementNode;
+      let canvasUrl;
+
       if ([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(nodeType)) {
@@ -139,48 +151,26 @@ if (elementNode.nodeName !== 'SCRIPT') {
           ) {
-            domNodes.push({
-              nodeType: Node.TEXT_NODE,
-              nodeValue: Array.from(elementNode.sheet.cssRules)
-                .map(rule => rule.cssText)
-                .join(''),
-            });
-            manualChildNodeIndexes = [domNodes.length - 1];
+            cdt.push(getCssRulesNode(elementNode));
+            manualChildNodeIndexes = [cdt.length - 1];
           }
 
-          node = {
-            nodeType: nodeType,
-            nodeName: elementNode.nodeName,
-            attributes: nodeAttributes(elementNode).map(key => {
-              let value = elementNode.attributes[key].value;
-              const name = elementNode.attributes[key].name;
+          node = getBasicNode(elementNode);
+          node.childNodeIndexes =
+            manualChildNodeIndexes ||
+            (elementNode.childNodes.length ? childrenFactory(cdt, elementNode.childNodes) : []);
 
-              if (/^blob:/.test(value)) {
-                value = value.replace(/^blob:/, '');
-              } else if (
-                elementNode.nodeName === 'IFRAME' &&
-                name === 'src' &&
-                !elementNode.contentDocument &&
-                !value.match(/^\s*data:/)
-              ) {
-                value = '';
-              }
-              return {
-                name,
-                value,
-              };
-            }),
-            childNodeIndexes:
-              manualChildNodeIndexes ||
-              (elementNode.childNodes.length
-                ? childrenFactory(domNodes, documents, elementNode.childNodes)
-                : []),
-          };
-
           if (elementNode.shadowRoot) {
-            node.shadowRootIndex = elementNodeFactory(domNodes, documents, elementNode.shadowRoot);
+            node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
             documents.push(elementNode.shadowRoot);
           }
 
+          if (elementNode.nodeName === 'CANVAS') {
+            canvasUrl = absolutizeUrl_1(`canvas-${uuid_1()}.png`, url);
+            node.attributes.push({name: 'data-applitools-src', value: canvasUrl});
+            canvasElements.push({element: elementNode, url: canvasUrl});
+          }
+
           if (elementNode.checked && !elementNode.attributes.checked) {
             node.attributes.push({name: 'checked', value: 'checked'});
           }
+
           if (
@@ -194,38 +184,84 @@ elementNode.value !== undefined &&
         } else {
-          node = {
-            nodeType: Node.ELEMENT_NODE,
-            nodeName: 'SCRIPT',
-            attributes: nodeAttributes(elementNode)
-              .map(key => ({
-                name: elementNode.attributes[key].name,
-                value: elementNode.attributes[key].value,
-              }))
-              .filter(attr => attr.name !== 'src'),
-            childNodeIndexes: [],
-          };
+          node = getScriptNode(elementNode);
         }
       } else if (nodeType === Node.TEXT_NODE) {
-        node = {
-          nodeType: Node.TEXT_NODE,
-          nodeValue: elementNode.nodeValue,
-        };
+        node = getTextNode(elementNode);
       } else if (nodeType === Node.DOCUMENT_TYPE_NODE) {
-        node = {
-          nodeType: Node.DOCUMENT_TYPE_NODE,
-          nodeName: elementNode.nodeName,
-        };
+        node = getDocNode(elementNode);
       }
 
       if (node) {
-        domNodes.push(node);
-        return domNodes.length - 1;
+        cdt.push(node);
+        return cdt.length - 1;
       } else {
-        // console.log(`Unknown nodeType: ${nodeType}`);
         return null;
       }
+    }
 
-      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: Array.from(elementNode.sheet.cssRules)
+          .map(rule => rule.cssText)
+          .join(''),
+      };
+    }
+
+    function getBasicNode(elementNode) {
+      return {
+        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 (
+            elementNode.nodeName === 'IFRAME' &&
+            name === 'src' &&
+            !elementNode.contentDocument &&
+            !value.match(/^\s*data:/)
+          ) {
+            value = '';
+          }
+          return {
+            name,
+            value,
+          };
+        }),
+      };
+    }
+
+    function getScriptNode(elementNode) {
+      return {
+        nodeType: Node.ELEMENT_NODE,
+        nodeName: 'SCRIPT',
+        attributes: nodeAttributes(elementNode)
+          .map(key => ({
+            name: elementNode.attributes[key].name,
+            value: elementNode.attributes[key].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,
+      };
+    }
   }
@@ -309,8 +345,2 @@
 
-  function absolutizeUrl(url, absoluteUrl) {
-    return new URL(url, absoluteUrl).href;
-  }
-
-  var absolutizeUrl_1 = absolutizeUrl;
-
   function createTempStylsheet(cssContent) {
@@ -556,2 +586,24 @@ if (!cssContent) {
 
+  function base64ToArrayBuffer(base64) {
+    var binary_string = window.atob(base64);
+    var len = binary_string.length;
+    var bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) {
+      bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+
+  var base64ToArrayBuffer_1 = base64ToArrayBuffer;
+
+  function buildCanvasBlobs(canvasElements) {
+    return canvasElements.map(({url, element}) => {
+      const data = element.toDataURL('image/png');
+      const value = base64ToArrayBuffer_1(data.split(',')[1]);
+      return {url, type: 'image/png', value};
+    });
+  }
+
+  var buildCanvasBlobs_1 = buildCanvasBlobs;
+
   function toUriEncoding(url) {
@@ -611,3 +663,3 @@ const result =
 
-      const {cdt, documents} = domNodesToCdt_1(doc);
+      const {cdt, documents, canvasElements} = domNodesToCdt_1(doc, url);
 
@@ -630,2 +682,3 @@ const linkUrls = flat_1(documents.map(extractLinks_1));
       const processFramesPromise = frameDocs.map(doProcessPage);
+      const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
@@ -637,3 +690,3 @@ return Promise.all([resourceUrlsAndBlobsPromise, ...processFramesPromise]).then(
           resourceUrls,
-          blobs: blobsObjToArray(blobsObj),
+          blobs: [...blobsObjToArray(blobsObj), ...canvasBlobs],
           frames: framesResults,
@@ -640,0 +693,0 @@ srcAttr: frameElement ? frameElement.getAttribute('src') : undefined,

dist/processPageAndSerialize.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.3.5 */
+/* @applitools/dom-snapshot@1.3.6 */
 
@@ -99,5 +99,15 @@ function __processPageAndSerialize() {
 
-  /* eslint-disable no-use-before-define */
+  function absolutizeUrl(url, absoluteUrl) {
+    return new URL(url, absoluteUrl).href;
+  }
 
-  function domNodesToCdt(docNode) {
+  var absolutizeUrl_1 = absolutizeUrl;
+
+  function uuid() {
+    return window.crypto.getRandomValues(new Uint32Array(1))[0];
+  }
+
+  var uuid_1 = uuid;
+
+  function domNodesToCdt(docNode, url) {
     const cdt = [
@@ -109,6 +119,7 @@ {
     const documents = [docNode];
-    cdt[0].childNodeIndexes = childrenFactory(cdt, documents, docNode.childNodes);
-    return {cdt, documents};
+    const canvasElements = [];
+    cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
+    return {cdt, documents, canvasElements};
 
-    function childrenFactory(domNodes, documents, elementNodes) {
+    function childrenFactory(cdt, elementNodes) {
       if (!elementNodes || elementNodes.length === 0) return null;
@@ -118,3 +129,3 @@
       Array.prototype.forEach.call(elementNodes, elementNode => {
-        const index = elementNodeFactory(domNodes, documents, elementNode);
+        const index = elementNodeFactory(cdt, elementNode);
         if (index !== null) {
@@ -124,9 +135,10 @@ childIndexes.push(index);
       });
-
       return childIndexes;
     }
 
-    function elementNodeFactory(domNodes, documents, elementNode) {
+    function elementNodeFactory(cdt, elementNode) {
       let node, manualChildNodeIndexes;
       const {nodeType} = elementNode;
+      let canvasUrl;
+
       if ([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(nodeType)) {
@@ -139,48 +151,26 @@ if (elementNode.nodeName !== 'SCRIPT') {
           ) {
-            domNodes.push({
-              nodeType: Node.TEXT_NODE,
-              nodeValue: Array.from(elementNode.sheet.cssRules)
-                .map(rule => rule.cssText)
-                .join(''),
-            });
-            manualChildNodeIndexes = [domNodes.length - 1];
+            cdt.push(getCssRulesNode(elementNode));
+            manualChildNodeIndexes = [cdt.length - 1];
           }
 
-          node = {
-            nodeType: nodeType,
-            nodeName: elementNode.nodeName,
-            attributes: nodeAttributes(elementNode).map(key => {
-              let value = elementNode.attributes[key].value;
-              const name = elementNode.attributes[key].name;
+          node = getBasicNode(elementNode);
+          node.childNodeIndexes =
+            manualChildNodeIndexes ||
+            (elementNode.childNodes.length ? childrenFactory(cdt, elementNode.childNodes) : []);
 
-              if (/^blob:/.test(value)) {
-                value = value.replace(/^blob:/, '');
-              } else if (
-                elementNode.nodeName === 'IFRAME' &&
-                name === 'src' &&
-                !elementNode.contentDocument &&
-                !value.match(/^\s*data:/)
-              ) {
-                value = '';
-              }
-              return {
-                name,
-                value,
-              };
-            }),
-            childNodeIndexes:
-              manualChildNodeIndexes ||
-              (elementNode.childNodes.length
-                ? childrenFactory(domNodes, documents, elementNode.childNodes)
-                : []),
-          };
-
           if (elementNode.shadowRoot) {
-            node.shadowRootIndex = elementNodeFactory(domNodes, documents, elementNode.shadowRoot);
+            node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
             documents.push(elementNode.shadowRoot);
           }
 
+          if (elementNode.nodeName === 'CANVAS') {
+            canvasUrl = absolutizeUrl_1(`canvas-${uuid_1()}.png`, url);
+            node.attributes.push({name: 'data-applitools-src', value: canvasUrl});
+            canvasElements.push({element: elementNode, url: canvasUrl});
+          }
+
           if (elementNode.checked && !elementNode.attributes.checked) {
             node.attributes.push({name: 'checked', value: 'checked'});
           }
+
           if (
@@ -194,38 +184,84 @@ elementNode.value !== undefined &&
         } else {
-          node = {
-            nodeType: Node.ELEMENT_NODE,
-            nodeName: 'SCRIPT',
-            attributes: nodeAttributes(elementNode)
-              .map(key => ({
-                name: elementNode.attributes[key].name,
-                value: elementNode.attributes[key].value,
-              }))
-              .filter(attr => attr.name !== 'src'),
-            childNodeIndexes: [],
-          };
+          node = getScriptNode(elementNode);
         }
       } else if (nodeType === Node.TEXT_NODE) {
-        node = {
-          nodeType: Node.TEXT_NODE,
-          nodeValue: elementNode.nodeValue,
-        };
+        node = getTextNode(elementNode);
       } else if (nodeType === Node.DOCUMENT_TYPE_NODE) {
-        node = {
-          nodeType: Node.DOCUMENT_TYPE_NODE,
-          nodeName: elementNode.nodeName,
-        };
+        node = getDocNode(elementNode);
       }
 
       if (node) {
-        domNodes.push(node);
-        return domNodes.length - 1;
+        cdt.push(node);
+        return cdt.length - 1;
       } else {
-        // console.log(`Unknown nodeType: ${nodeType}`);
         return null;
       }
+    }
 
-      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: Array.from(elementNode.sheet.cssRules)
+          .map(rule => rule.cssText)
+          .join(''),
+      };
+    }
+
+    function getBasicNode(elementNode) {
+      return {
+        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 (
+            elementNode.nodeName === 'IFRAME' &&
+            name === 'src' &&
+            !elementNode.contentDocument &&
+            !value.match(/^\s*data:/)
+          ) {
+            value = '';
+          }
+          return {
+            name,
+            value,
+          };
+        }),
+      };
+    }
+
+    function getScriptNode(elementNode) {
+      return {
+        nodeType: Node.ELEMENT_NODE,
+        nodeName: 'SCRIPT',
+        attributes: nodeAttributes(elementNode)
+          .map(key => ({
+            name: elementNode.attributes[key].name,
+            value: elementNode.attributes[key].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,
+      };
+    }
   }
@@ -309,8 +345,2 @@
 
-  function absolutizeUrl(url, absoluteUrl) {
-    return new URL(url, absoluteUrl).href;
-  }
-
-  var absolutizeUrl_1 = absolutizeUrl;
-
   function createTempStylsheet(cssContent) {
@@ -556,2 +586,24 @@ if (!cssContent) {
 
+  function base64ToArrayBuffer(base64) {
+    var binary_string = window.atob(base64);
+    var len = binary_string.length;
+    var bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) {
+      bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+
+  var base64ToArrayBuffer_1 = base64ToArrayBuffer;
+
+  function buildCanvasBlobs(canvasElements) {
+    return canvasElements.map(({url, element}) => {
+      const data = element.toDataURL('image/png');
+      const value = base64ToArrayBuffer_1(data.split(',')[1]);
+      return {url, type: 'image/png', value};
+    });
+  }
+
+  var buildCanvasBlobs_1 = buildCanvasBlobs;
+
   function toUriEncoding(url) {
@@ -611,3 +663,3 @@ const result =
 
-      const {cdt, documents} = domNodesToCdt_1(doc);
+      const {cdt, documents, canvasElements} = domNodesToCdt_1(doc, url);
 
@@ -630,2 +682,3 @@ const linkUrls = flat_1(documents.map(extractLinks_1));
       const processFramesPromise = frameDocs.map(doProcessPage);
+      const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
@@ -637,3 +690,3 @@ return Promise.all([resourceUrlsAndBlobsPromise, ...processFramesPromise]).then(
           resourceUrls,
-          blobs: blobsObjToArray(blobsObj),
+          blobs: [...blobsObjToArray(blobsObj), ...canvasBlobs],
           frames: framesResults,
@@ -640,0 +693,0 @@ srcAttr: frameElement ? frameElement.getAttribute('src') : undefined,

dist/processPageCjs.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-snapshot@1.3.5 */
+/* @applitools/dom-snapshot@1.3.6 */
 'use strict';
@@ -44,5 +44,15 @@
 
-/* eslint-disable no-use-before-define */
+function absolutizeUrl(url, absoluteUrl) {
+  return new URL(url, absoluteUrl).href;
+}
 
-function domNodesToCdt(docNode) {
+var absolutizeUrl_1 = absolutizeUrl;
+
+function uuid() {
+  return window.crypto.getRandomValues(new Uint32Array(1))[0];
+}
+
+var uuid_1 = uuid;
+
+function domNodesToCdt(docNode, url) {
   const cdt = [
@@ -54,6 +64,7 @@ {
   const documents = [docNode];
-  cdt[0].childNodeIndexes = childrenFactory(cdt, documents, docNode.childNodes);
-  return {cdt, documents};
+  const canvasElements = [];
+  cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
+  return {cdt, documents, canvasElements};
 
-  function childrenFactory(domNodes, documents, elementNodes) {
+  function childrenFactory(cdt, elementNodes) {
     if (!elementNodes || elementNodes.length === 0) return null;
@@ -63,3 +74,3 @@
     Array.prototype.forEach.call(elementNodes, elementNode => {
-      const index = elementNodeFactory(domNodes, documents, elementNode);
+      const index = elementNodeFactory(cdt, elementNode);
       if (index !== null) {
@@ -69,9 +80,10 @@ childIndexes.push(index);
     });
-
     return childIndexes;
   }
 
-  function elementNodeFactory(domNodes, documents, elementNode) {
+  function elementNodeFactory(cdt, elementNode) {
     let node, manualChildNodeIndexes;
     const {nodeType} = elementNode;
+    let canvasUrl;
+
     if ([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(nodeType)) {
@@ -84,48 +96,26 @@ if (elementNode.nodeName !== 'SCRIPT') {
         ) {
-          domNodes.push({
-            nodeType: Node.TEXT_NODE,
-            nodeValue: Array.from(elementNode.sheet.cssRules)
-              .map(rule => rule.cssText)
-              .join(''),
-          });
-          manualChildNodeIndexes = [domNodes.length - 1];
+          cdt.push(getCssRulesNode(elementNode));
+          manualChildNodeIndexes = [cdt.length - 1];
         }
 
-        node = {
-          nodeType: nodeType,
-          nodeName: elementNode.nodeName,
-          attributes: nodeAttributes(elementNode).map(key => {
-            let value = elementNode.attributes[key].value;
-            const name = elementNode.attributes[key].name;
+        node = getBasicNode(elementNode);
+        node.childNodeIndexes =
+          manualChildNodeIndexes ||
+          (elementNode.childNodes.length ? childrenFactory(cdt, elementNode.childNodes) : []);
 
-            if (/^blob:/.test(value)) {
-              value = value.replace(/^blob:/, '');
-            } else if (
-              elementNode.nodeName === 'IFRAME' &&
-              name === 'src' &&
-              !elementNode.contentDocument &&
-              !value.match(/^\s*data:/)
-            ) {
-              value = '';
-            }
-            return {
-              name,
-              value,
-            };
-          }),
-          childNodeIndexes:
-            manualChildNodeIndexes ||
-            (elementNode.childNodes.length
-              ? childrenFactory(domNodes, documents, elementNode.childNodes)
-              : []),
-        };
-
         if (elementNode.shadowRoot) {
-          node.shadowRootIndex = elementNodeFactory(domNodes, documents, elementNode.shadowRoot);
+          node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
           documents.push(elementNode.shadowRoot);
         }
 
+        if (elementNode.nodeName === 'CANVAS') {
+          canvasUrl = absolutizeUrl_1(`canvas-${uuid_1()}.png`, url);
+          node.attributes.push({name: 'data-applitools-src', value: canvasUrl});
+          canvasElements.push({element: elementNode, url: canvasUrl});
+        }
+
         if (elementNode.checked && !elementNode.attributes.checked) {
           node.attributes.push({name: 'checked', value: 'checked'});
         }
+
         if (
@@ -139,38 +129,84 @@ elementNode.value !== undefined &&
       } else {
-        node = {
-          nodeType: Node.ELEMENT_NODE,
-          nodeName: 'SCRIPT',
-          attributes: nodeAttributes(elementNode)
-            .map(key => ({
-              name: elementNode.attributes[key].name,
-              value: elementNode.attributes[key].value,
-            }))
-            .filter(attr => attr.name !== 'src'),
-          childNodeIndexes: [],
-        };
+        node = getScriptNode(elementNode);
       }
     } else if (nodeType === Node.TEXT_NODE) {
-      node = {
-        nodeType: Node.TEXT_NODE,
-        nodeValue: elementNode.nodeValue,
-      };
+      node = getTextNode(elementNode);
     } else if (nodeType === Node.DOCUMENT_TYPE_NODE) {
-      node = {
-        nodeType: Node.DOCUMENT_TYPE_NODE,
-        nodeName: elementNode.nodeName,
-      };
+      node = getDocNode(elementNode);
     }
 
     if (node) {
-      domNodes.push(node);
-      return domNodes.length - 1;
+      cdt.push(node);
+      return cdt.length - 1;
     } else {
-      // console.log(`Unknown nodeType: ${nodeType}`);
       return null;
     }
+  }
 
-    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: Array.from(elementNode.sheet.cssRules)
+        .map(rule => rule.cssText)
+        .join(''),
+    };
+  }
+
+  function getBasicNode(elementNode) {
+    return {
+      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 (
+          elementNode.nodeName === 'IFRAME' &&
+          name === 'src' &&
+          !elementNode.contentDocument &&
+          !value.match(/^\s*data:/)
+        ) {
+          value = '';
+        }
+        return {
+          name,
+          value,
+        };
+      }),
+    };
+  }
+
+  function getScriptNode(elementNode) {
+    return {
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'SCRIPT',
+      attributes: nodeAttributes(elementNode)
+        .map(key => ({
+          name: elementNode.attributes[key].name,
+          value: elementNode.attributes[key].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,
+    };
+  }
 }
@@ -254,8 +290,2 @@
 
-function absolutizeUrl(url, absoluteUrl) {
-  return new URL(url, absoluteUrl).href;
-}
-
-var absolutizeUrl_1 = absolutizeUrl;
-
 function createTempStylsheet(cssContent) {
@@ -501,2 +531,24 @@ if (!cssContent) {
 
+function base64ToArrayBuffer(base64) {
+  var binary_string = window.atob(base64);
+  var len = binary_string.length;
+  var bytes = new Uint8Array(len);
+  for (var i = 0; i < len; i++) {
+    bytes[i] = binary_string.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+
+var base64ToArrayBuffer_1 = base64ToArrayBuffer;
+
+function buildCanvasBlobs(canvasElements) {
+  return canvasElements.map(({url, element}) => {
+    const data = element.toDataURL('image/png');
+    const value = base64ToArrayBuffer_1(data.split(',')[1]);
+    return {url, type: 'image/png', value};
+  });
+}
+
+var buildCanvasBlobs_1 = buildCanvasBlobs;
+
 function toUriEncoding(url) {
@@ -556,3 +608,3 @@ const result =
 
-    const {cdt, documents} = domNodesToCdt_1(doc);
+    const {cdt, documents, canvasElements} = domNodesToCdt_1(doc, url);
 
@@ -575,2 +627,3 @@ const linkUrls = flat_1(documents.map(extractLinks_1));
     const processFramesPromise = frameDocs.map(doProcessPage);
+    const canvasBlobs = buildCanvasBlobs_1(canvasElements);
 
@@ -582,3 +635,3 @@ return Promise.all([resourceUrlsAndBlobsPromise, ...processFramesPromise]).then(
         resourceUrls,
-        blobs: blobsObjToArray(blobsObj),
+        blobs: [...blobsObjToArray(blobsObj), ...canvasBlobs],
         frames: framesResults,
@@ -585,0 +638,0 @@ srcAttr: frameElement ? frameElement.getAttribute('src') : undefined,

package.json

 {
   "name": "@applitools/dom-snapshot",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "main": "index.js",
@@ -28,2 +28,3 @@ "license": "MIT",
     "@babel/preset-env": "^7.5.0",
+    "canvas": "^2.5.0",
     "chai": "^4.2.0",
@@ -42,3 +43,3 @@ "core-js": "^3.1.4",
     "prettier": "^1.18.2",
-    "puppeteer": "1.9.0",
+    "puppeteer": "^1.18.1",
     "rollup": "^0.66.6",
@@ -45,0 +46,0 @@ "rollup-plugin-babel": "^4.3.3",

src/browser/domNodesToCdt.js

 /* eslint-disable no-use-before-define */
 'use strict';
+const absolutizeUrl = require('./absolutizeUrl');
+const uuid = require('./uuid');
 
-function domNodesToCdt(docNode) {
+function domNodesToCdt(docNode, url) {
   const cdt = [
@@ -11,6 +13,7 @@ {
   const documents = [docNode];
-  cdt[0].childNodeIndexes = childrenFactory(cdt, documents, docNode.childNodes);
-  return {cdt, documents};
+  const canvasElements = [];
+  cdt[0].childNodeIndexes = childrenFactory(cdt, docNode.childNodes);
+  return {cdt, documents, canvasElements};
 
-  function childrenFactory(domNodes, documents, elementNodes) {
+  function childrenFactory(cdt, elementNodes) {
     if (!elementNodes || elementNodes.length === 0) return null;
@@ -20,3 +23,3 @@
     Array.prototype.forEach.call(elementNodes, elementNode => {
-      const index = elementNodeFactory(domNodes, documents, elementNode);
+      const index = elementNodeFactory(cdt, elementNode);
       if (index !== null) {
@@ -26,9 +29,10 @@ childIndexes.push(index);
     });
-
     return childIndexes;
   }
 
-  function elementNodeFactory(domNodes, documents, elementNode) {
+  function elementNodeFactory(cdt, elementNode) {
     let node, manualChildNodeIndexes;
     const {nodeType} = elementNode;
+    let canvasUrl;
+
     if ([Node.ELEMENT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(nodeType)) {
@@ -41,48 +45,26 @@ if (elementNode.nodeName !== 'SCRIPT') {
         ) {
-          domNodes.push({
-            nodeType: Node.TEXT_NODE,
-            nodeValue: Array.from(elementNode.sheet.cssRules)
-              .map(rule => rule.cssText)
-              .join(''),
-          });
-          manualChildNodeIndexes = [domNodes.length - 1];
+          cdt.push(getCssRulesNode(elementNode));
+          manualChildNodeIndexes = [cdt.length - 1];
         }
 
-        node = {
-          nodeType: nodeType,
-          nodeName: elementNode.nodeName,
-          attributes: nodeAttributes(elementNode).map(key => {
-            let value = elementNode.attributes[key].value;
-            const name = elementNode.attributes[key].name;
+        node = getBasicNode(elementNode);
+        node.childNodeIndexes =
+          manualChildNodeIndexes ||
+          (elementNode.childNodes.length ? childrenFactory(cdt, elementNode.childNodes) : []);
 
-            if (/^blob:/.test(value)) {
-              value = value.replace(/^blob:/, '');
-            } else if (
-              elementNode.nodeName === 'IFRAME' &&
-              name === 'src' &&
-              !elementNode.contentDocument &&
-              !value.match(/^\s*data:/)
-            ) {
-              value = '';
-            }
-            return {
-              name,
-              value,
-            };
-          }),
-          childNodeIndexes:
-            manualChildNodeIndexes ||
-            (elementNode.childNodes.length
-              ? childrenFactory(domNodes, documents, elementNode.childNodes)
-              : []),
-        };
-
         if (elementNode.shadowRoot) {
-          node.shadowRootIndex = elementNodeFactory(domNodes, documents, elementNode.shadowRoot);
+          node.shadowRootIndex = elementNodeFactory(cdt, elementNode.shadowRoot);
           documents.push(elementNode.shadowRoot);
         }
 
+        if (elementNode.nodeName === 'CANVAS') {
+          canvasUrl = absolutizeUrl(`canvas-${uuid()}.png`, url);
+          node.attributes.push({name: 'data-applitools-src', value: canvasUrl});
+          canvasElements.push({element: elementNode, url: canvasUrl});
+        }
+
         if (elementNode.checked && !elementNode.attributes.checked) {
           node.attributes.push({name: 'checked', value: 'checked'});
         }
+
         if (
@@ -96,40 +78,86 @@ elementNode.value !== undefined &&
       } else {
-        node = {
-          nodeType: Node.ELEMENT_NODE,
-          nodeName: 'SCRIPT',
-          attributes: nodeAttributes(elementNode)
-            .map(key => ({
-              name: elementNode.attributes[key].name,
-              value: elementNode.attributes[key].value,
-            }))
-            .filter(attr => attr.name !== 'src'),
-          childNodeIndexes: [],
-        };
+        node = getScriptNode(elementNode);
       }
     } else if (nodeType === Node.TEXT_NODE) {
-      node = {
-        nodeType: Node.TEXT_NODE,
-        nodeValue: elementNode.nodeValue,
-      };
+      node = getTextNode(elementNode);
     } else if (nodeType === Node.DOCUMENT_TYPE_NODE) {
-      node = {
-        nodeType: Node.DOCUMENT_TYPE_NODE,
-        nodeName: elementNode.nodeName,
-      };
+      node = getDocNode(elementNode);
     }
 
     if (node) {
-      domNodes.push(node);
-      return domNodes.length - 1;
+      cdt.push(node);
+      return cdt.length - 1;
     } else {
-      // console.log(`Unknown nodeType: ${nodeType}`);
       return null;
     }
+  }
 
-    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: Array.from(elementNode.sheet.cssRules)
+        .map(rule => rule.cssText)
+        .join(''),
+    };
+  }
+
+  function getBasicNode(elementNode) {
+    return {
+      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 (
+          elementNode.nodeName === 'IFRAME' &&
+          name === 'src' &&
+          !elementNode.contentDocument &&
+          !value.match(/^\s*data:/)
+        ) {
+          value = '';
+        }
+        return {
+          name,
+          value,
+        };
+      }),
+    };
+  }
+
+  function getScriptNode(elementNode) {
+    return {
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'SCRIPT',
+      attributes: nodeAttributes(elementNode)
+        .map(key => ({
+          name: elementNode.attributes[key].name,
+          value: elementNode.attributes[key].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,
+    };
+  }
 }
 
 module.exports = domNodesToCdt;

src/browser/processPage.js

@@ -14,2 +14,3 @@ 'use strict';
 const makeExtractResourceUrlsFromStyleTags = require('./extractResourceUrlsFromStyleTags');
+const buildCanvasBlobs = require('./buildCanvasBlobs');
 const absolutizeUrl = require('./absolutizeUrl');
@@ -52,3 +53,3 @@ const toUriEncoding = require('./toUriEncoding');
 
-    const {cdt, documents} = domNodesToCdt(doc);
+    const {cdt, documents, canvasElements} = domNodesToCdt(doc, url);
 
@@ -71,2 +72,3 @@ const linkUrls = flat(documents.map(extractLinks));
     const processFramesPromise = frameDocs.map(doProcessPage);
+    const canvasBlobs = buildCanvasBlobs(canvasElements);
 
@@ -78,3 +80,3 @@ return Promise.all([resourceUrlsAndBlobsPromise, ...processFramesPromise]).then(
         resourceUrls,
-        blobs: blobsObjToArray(blobsObj),
+        blobs: [...blobsObjToArray(blobsObj), ...canvasBlobs],
         frames: framesResults,
@@ -81,0 +83,0 @@ srcAttr: frameElement ? frameElement.getAttribute('src') : undefined,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

570495

increased by1.53%

Number of package files

41

increased by7.89%

Lines of code

12129

increased by2.28%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes