@applitools/dom-snapshot - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/processPage.js

@@ -1,2 +0,2 @@
-// @applitools/dom-snapshot@1.2.4
+// @applitools/dom-snapshot@1.2.5
 function __processPage() {
@@ -20,6 +20,10 @@ var processPage = (function () {
 
-    const hrefUrls = [...doc.querySelectorAll('image')]
+    const imageUrls = [...doc.querySelectorAll('image,use')]
       .map(hrefEl => hrefEl.getAttribute('href') || hrefEl.getAttribute('xlink:href'))
       .filter(Boolean);
 
+    const objectUrls = [...doc.querySelectorAll('object')]
+      .map(el => el.getAttribute('data'))
+      .filter(Boolean);
+
     const cssUrls = [...doc.querySelectorAll('link[rel="stylesheet"]')].map(link =>
@@ -33,3 +37,3 @@ link.getAttribute('href'),
 
-    return [...srcsetUrls, ...srcUrls, ...hrefUrls, ...cssUrls, ...videoPosterUrls];
+    return [...srcsetUrls, ...srcUrls, ...imageUrls, ...cssUrls, ...videoPosterUrls, ...objectUrls];
   }
@@ -247,2 +251,3 @@
     extractResourcesFromStyleSheet,
+    extractResourcesFromSvg,
     isSameOrigin,
@@ -267,12 +272,20 @@ cache = {},
             }
-            const result = {blobsObj: {[url]: {type, value}}};
+
+            let resourceUrls;
+            let result = {blobsObj: {[url]: {type, value}}};
             if (/text\/css/.test(type)) {
               const styleSheet = findStyleSheetByUrl(url, doc);
-              if (!styleSheet) {
-                return result;
+              if (styleSheet) {
+                resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
+                  .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+                  .filter(filterInlineUrl_1);
               }
-              const resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
-                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-                .filter(filterInlineUrl_1);
-              return getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
+            } else if (/svg/.test(type)) {
+              resourceUrls = extractResourcesFromSvg(value).map(resourceUrl =>
+                absolutizeUrl_1(resourceUrl, url),
+              );
+            }
+
+            if (resourceUrls) {
+              result = getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
                 ({resourceUrls, blobsObj}) => ({
@@ -283,5 +296,4 @@ resourceUrls,
               );
-            } else {
-              return result;
             }
+            return result;
           })
@@ -304,2 +316,24 @@ .catch(err => {
 
+  function extractResourcesFromSvg(svgArrayBuffer, testDomParser) {
+    let svgStr;
+    let urls = [];
+    try {
+      svgStr = String.fromCharCode.apply(null, new Uint8Array(svgArrayBuffer));
+      const domparser = testDomParser || new DOMParser();
+      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+      const fromImages = Array.from(doc.getElementsByTagName('image'))
+        .concat(Array.from(doc.getElementsByTagName('use')))
+        .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
+      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+        e.getAttribute('data'),
+      );
+      urls = [...fromImages, ...fromObjects];
+    } catch (e) {
+      console.log('could not parse svg content', e);
+    }
+    return urls;
+  }
+
+  var extractResourcesFromSvg_1 = extractResourcesFromSvg;
+
   /* global window */
@@ -339,3 +373,2 @@
 
-  // NOTE this code is very similar to the node part of visual-grid-client, but there is a different related to the browser's cssom with import rules
   function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
@@ -415,2 +448,3 @@ return function extractResourcesFromStyleSheet(styleSheet, win = window) {
       extractResourcesFromStyleSheet: extractResourcesFromStyleSheet$$1,
+      extractResourcesFromSvg: extractResourcesFromSvg_1,
       absolutizeUrl: absolutizeUrl_1,
@@ -417,0 +451,0 @@ isSameOrigin: isSameOrigin_1,

dist/processPageAndPoll.js

@@ -1,2 +0,2 @@
-// @applitools/dom-snapshot@1.2.4
+// @applitools/dom-snapshot@1.2.5
 function __processPageAndPoll() {
@@ -72,6 +72,10 @@ var processPageAndPoll = (function () {
 
-    const hrefUrls = [...doc.querySelectorAll('image')]
+    const imageUrls = [...doc.querySelectorAll('image,use')]
       .map(hrefEl => hrefEl.getAttribute('href') || hrefEl.getAttribute('xlink:href'))
       .filter(Boolean);
 
+    const objectUrls = [...doc.querySelectorAll('object')]
+      .map(el => el.getAttribute('data'))
+      .filter(Boolean);
+
     const cssUrls = [...doc.querySelectorAll('link[rel="stylesheet"]')].map(link =>
@@ -85,3 +89,3 @@ link.getAttribute('href'),
 
-    return [...srcsetUrls, ...srcUrls, ...hrefUrls, ...cssUrls, ...videoPosterUrls];
+    return [...srcsetUrls, ...srcUrls, ...imageUrls, ...cssUrls, ...videoPosterUrls, ...objectUrls];
   }
@@ -299,2 +303,3 @@
     extractResourcesFromStyleSheet,
+    extractResourcesFromSvg,
     isSameOrigin,
@@ -319,12 +324,20 @@ cache = {},
             }
-            const result = {blobsObj: {[url]: {type, value}}};
+
+            let resourceUrls;
+            let result = {blobsObj: {[url]: {type, value}}};
             if (/text\/css/.test(type)) {
               const styleSheet = findStyleSheetByUrl(url, doc);
-              if (!styleSheet) {
-                return result;
+              if (styleSheet) {
+                resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
+                  .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+                  .filter(filterInlineUrl_1);
               }
-              const resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
-                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-                .filter(filterInlineUrl_1);
-              return getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
+            } else if (/svg/.test(type)) {
+              resourceUrls = extractResourcesFromSvg(value).map(resourceUrl =>
+                absolutizeUrl_1(resourceUrl, url),
+              );
+            }
+
+            if (resourceUrls) {
+              result = getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
                 ({resourceUrls, blobsObj}) => ({
@@ -335,5 +348,4 @@ resourceUrls,
               );
-            } else {
-              return result;
             }
+            return result;
           })
@@ -356,2 +368,24 @@ .catch(err => {
 
+  function extractResourcesFromSvg(svgArrayBuffer, testDomParser) {
+    let svgStr;
+    let urls = [];
+    try {
+      svgStr = String.fromCharCode.apply(null, new Uint8Array(svgArrayBuffer));
+      const domparser = testDomParser || new DOMParser();
+      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+      const fromImages = Array.from(doc.getElementsByTagName('image'))
+        .concat(Array.from(doc.getElementsByTagName('use')))
+        .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
+      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+        e.getAttribute('data'),
+      );
+      urls = [...fromImages, ...fromObjects];
+    } catch (e) {
+      console.log('could not parse svg content', e);
+    }
+    return urls;
+  }
+
+  var extractResourcesFromSvg_1 = extractResourcesFromSvg;
+
   /* global window */
@@ -391,3 +425,2 @@
 
-  // NOTE this code is very similar to the node part of visual-grid-client, but there is a different related to the browser's cssom with import rules
   function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
@@ -467,2 +500,3 @@ return function extractResourcesFromStyleSheet(styleSheet, win = window) {
       extractResourcesFromStyleSheet: extractResourcesFromStyleSheet$$1,
+      extractResourcesFromSvg: extractResourcesFromSvg_1,
       absolutizeUrl: absolutizeUrl_1,
@@ -469,0 +503,0 @@ isSameOrigin: isSameOrigin_1,

dist/processPageAndSerialize.js

@@ -1,2 +0,2 @@
-// @applitools/dom-snapshot@1.2.4
+// @applitools/dom-snapshot@1.2.5
 function __processPageAndSerialize() {
@@ -72,6 +72,10 @@ var processPageAndSerialize = (function () {
 
-    const hrefUrls = [...doc.querySelectorAll('image')]
+    const imageUrls = [...doc.querySelectorAll('image,use')]
       .map(hrefEl => hrefEl.getAttribute('href') || hrefEl.getAttribute('xlink:href'))
       .filter(Boolean);
 
+    const objectUrls = [...doc.querySelectorAll('object')]
+      .map(el => el.getAttribute('data'))
+      .filter(Boolean);
+
     const cssUrls = [...doc.querySelectorAll('link[rel="stylesheet"]')].map(link =>
@@ -85,3 +89,3 @@ link.getAttribute('href'),
 
-    return [...srcsetUrls, ...srcUrls, ...hrefUrls, ...cssUrls, ...videoPosterUrls];
+    return [...srcsetUrls, ...srcUrls, ...imageUrls, ...cssUrls, ...videoPosterUrls, ...objectUrls];
   }
@@ -299,2 +303,3 @@
     extractResourcesFromStyleSheet,
+    extractResourcesFromSvg,
     isSameOrigin,
@@ -319,12 +324,20 @@ cache = {},
             }
-            const result = {blobsObj: {[url]: {type, value}}};
+
+            let resourceUrls;
+            let result = {blobsObj: {[url]: {type, value}}};
             if (/text\/css/.test(type)) {
               const styleSheet = findStyleSheetByUrl(url, doc);
-              if (!styleSheet) {
-                return result;
+              if (styleSheet) {
+                resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
+                  .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+                  .filter(filterInlineUrl_1);
               }
-              const resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
-                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-                .filter(filterInlineUrl_1);
-              return getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
+            } else if (/svg/.test(type)) {
+              resourceUrls = extractResourcesFromSvg(value).map(resourceUrl =>
+                absolutizeUrl_1(resourceUrl, url),
+              );
+            }
+
+            if (resourceUrls) {
+              result = getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
                 ({resourceUrls, blobsObj}) => ({
@@ -335,5 +348,4 @@ resourceUrls,
               );
-            } else {
-              return result;
             }
+            return result;
           })
@@ -356,2 +368,24 @@ .catch(err => {
 
+  function extractResourcesFromSvg(svgArrayBuffer, testDomParser) {
+    let svgStr;
+    let urls = [];
+    try {
+      svgStr = String.fromCharCode.apply(null, new Uint8Array(svgArrayBuffer));
+      const domparser = testDomParser || new DOMParser();
+      const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+      const fromImages = Array.from(doc.getElementsByTagName('image'))
+        .concat(Array.from(doc.getElementsByTagName('use')))
+        .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
+      const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+        e.getAttribute('data'),
+      );
+      urls = [...fromImages, ...fromObjects];
+    } catch (e) {
+      console.log('could not parse svg content', e);
+    }
+    return urls;
+  }
+
+  var extractResourcesFromSvg_1 = extractResourcesFromSvg;
+
   /* global window */
@@ -391,3 +425,2 @@
 
-  // NOTE this code is very similar to the node part of visual-grid-client, but there is a different related to the browser's cssom with import rules
   function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
@@ -467,2 +500,3 @@ return function extractResourcesFromStyleSheet(styleSheet, win = window) {
       extractResourcesFromStyleSheet: extractResourcesFromStyleSheet$$1,
+      extractResourcesFromSvg: extractResourcesFromSvg_1,
       absolutizeUrl: absolutizeUrl_1,
@@ -469,0 +503,0 @@ isSameOrigin: isSameOrigin_1,

dist/processPageCjs.js

@@ -17,6 +17,10 @@ 'use strict';
 
-  const hrefUrls = [...doc.querySelectorAll('image')]
+  const imageUrls = [...doc.querySelectorAll('image,use')]
     .map(hrefEl => hrefEl.getAttribute('href') || hrefEl.getAttribute('xlink:href'))
     .filter(Boolean);
 
+  const objectUrls = [...doc.querySelectorAll('object')]
+    .map(el => el.getAttribute('data'))
+    .filter(Boolean);
+
   const cssUrls = [...doc.querySelectorAll('link[rel="stylesheet"]')].map(link =>
@@ -30,3 +34,3 @@ link.getAttribute('href'),
 
-  return [...srcsetUrls, ...srcUrls, ...hrefUrls, ...cssUrls, ...videoPosterUrls];
+  return [...srcsetUrls, ...srcUrls, ...imageUrls, ...cssUrls, ...videoPosterUrls, ...objectUrls];
 }
@@ -244,2 +248,3 @@
   extractResourcesFromStyleSheet,
+  extractResourcesFromSvg,
   isSameOrigin,
@@ -264,12 +269,20 @@ cache = {},
           }
-          const result = {blobsObj: {[url]: {type, value}}};
+
+          let resourceUrls;
+          let result = {blobsObj: {[url]: {type, value}}};
           if (/text\/css/.test(type)) {
             const styleSheet = findStyleSheetByUrl(url, doc);
-            if (!styleSheet) {
-              return result;
+            if (styleSheet) {
+              resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
+                .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
+                .filter(filterInlineUrl_1);
             }
-            const resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
-              .map(resourceUrl => absolutizeUrl_1(resourceUrl, url.replace(/^blob:/, '')))
-              .filter(filterInlineUrl_1);
-            return getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
+          } else if (/svg/.test(type)) {
+            resourceUrls = extractResourcesFromSvg(value).map(resourceUrl =>
+              absolutizeUrl_1(resourceUrl, url),
+            );
+          }
+
+          if (resourceUrls) {
+            result = getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
               ({resourceUrls, blobsObj}) => ({
@@ -280,5 +293,4 @@ resourceUrls,
             );
-          } else {
-            return result;
           }
+          return result;
         })
@@ -301,2 +313,24 @@ .catch(err => {
 
+function extractResourcesFromSvg(svgArrayBuffer, testDomParser) {
+  let svgStr;
+  let urls = [];
+  try {
+    svgStr = String.fromCharCode.apply(null, new Uint8Array(svgArrayBuffer));
+    const domparser = testDomParser || new DOMParser();
+    const doc = domparser.parseFromString(svgStr, 'image/svg+xml');
+    const fromImages = Array.from(doc.getElementsByTagName('image'))
+      .concat(Array.from(doc.getElementsByTagName('use')))
+      .map(e => e.getAttribute('href') || e.getAttribute('xlink:href'));
+    const fromObjects = Array.from(doc.getElementsByTagName('object')).map(e =>
+      e.getAttribute('data'),
+    );
+    urls = [...fromImages, ...fromObjects];
+  } catch (e) {
+    console.log('could not parse svg content', e);
+  }
+  return urls;
+}
+
+var extractResourcesFromSvg_1 = extractResourcesFromSvg;
+
 /* global window */
@@ -336,3 +370,2 @@
 
-// NOTE this code is very similar to the node part of visual-grid-client, but there is a different related to the browser's cssom with import rules
 function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
@@ -412,2 +445,3 @@ return function extractResourcesFromStyleSheet(styleSheet, win = window) {
     extractResourcesFromStyleSheet: extractResourcesFromStyleSheet$$1,
+    extractResourcesFromSvg: extractResourcesFromSvg_1,
     absolutizeUrl: absolutizeUrl_1,
@@ -414,0 +448,0 @@ isSameOrigin: isSameOrigin_1,

package.json

 {
   "name": "@applitools/dom-snapshot",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "main": "index.js",
@@ -44,3 +44,4 @@ "license": "MIT",
     "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-resolve": "^3.4.0"
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "xmldom": "^0.1.27"
   },
@@ -47,0 +48,0 @@ "dependencies": {

src/browser/extractLinks.js

@@ -17,6 +17,10 @@ 'use strict';
 
-  const hrefUrls = [...doc.querySelectorAll('image')]
+  const imageUrls = [...doc.querySelectorAll('image,use')]
     .map(hrefEl => hrefEl.getAttribute('href') || hrefEl.getAttribute('xlink:href'))
     .filter(Boolean);
 
+  const objectUrls = [...doc.querySelectorAll('object')]
+    .map(el => el.getAttribute('data'))
+    .filter(Boolean);
+
   const cssUrls = [...doc.querySelectorAll('link[rel="stylesheet"]')].map(link =>
@@ -30,5 +34,5 @@ link.getAttribute('href'),
 
-  return [...srcsetUrls, ...srcUrls, ...hrefUrls, ...cssUrls, ...videoPosterUrls];
+  return [...srcsetUrls, ...srcUrls, ...imageUrls, ...cssUrls, ...videoPosterUrls, ...objectUrls];
 }
 
 module.exports = extractLinks;

src/browser/extractResourcesFromStyleSheet.js

@@ -5,3 +5,2 @@ 'use strict';
 
-// NOTE this code is very similar to the node part of visual-grid-client, but there is a different related to the browser's cssom with import rules
 function makeExtractResourcesFromStyleSheet({styleSheetCache}) {
@@ -8,0 +7,0 @@ return function extractResourcesFromStyleSheet(styleSheet, win = window) {

src/browser/processPage.js

@@ -8,2 +8,3 @@ 'use strict';
 const makeProcessResource = require('./processResource');
+const extractResourcesFromSvg = require('./extractResourcesFromSvg');
 const fetchUrl = require('./fetchUrl');
@@ -27,2 +28,3 @@ const makeFindStyleSheetByUrl = require('./findStyleSheetByUrl');
     extractResourcesFromStyleSheet,
+    extractResourcesFromSvg,
     absolutizeUrl,
@@ -29,0 +31,0 @@ isSameOrigin,

src/browser/processResource.js

@@ -9,2 +9,3 @@ 'use strict';
   extractResourcesFromStyleSheet,
+  extractResourcesFromSvg,
   isSameOrigin,
@@ -29,12 +30,20 @@ cache = {},
           }
-          const result = {blobsObj: {[url]: {type, value}}};
+
+          let resourceUrls;
+          let result = {blobsObj: {[url]: {type, value}}};
           if (/text\/css/.test(type)) {
             const styleSheet = findStyleSheetByUrl(url, doc);
-            if (!styleSheet) {
-              return result;
+            if (styleSheet) {
+              resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
+                .map(resourceUrl => absolutizeUrl(resourceUrl, url.replace(/^blob:/, '')))
+                .filter(filterInlineUrl);
             }
-            const resourceUrls = extractResourcesFromStyleSheet(styleSheet, doc.defaultView)
-              .map(resourceUrl => absolutizeUrl(resourceUrl, url.replace(/^blob:/, '')))
-              .filter(filterInlineUrl);
-            return getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
+          } else if (/svg/.test(type)) {
+            resourceUrls = extractResourcesFromSvg(value).map(resourceUrl =>
+              absolutizeUrl(resourceUrl, url),
+            );
+          }
+
+          if (resourceUrls) {
+            result = getResourceUrlsAndBlobs(baseUrl, resourceUrls).then(
               ({resourceUrls, blobsObj}) => ({
@@ -45,5 +54,4 @@ resourceUrls,
             );
-          } else {
-            return result;
           }
+          return result;
         })
@@ -50,0 +58,0 @@ .catch(err => {

No alert changes

Improved metrics

Total package byte prevSize

98705

increased by6.14%

Number of package files

31

increased by3.33%

Lines of code

2535

increased by6.16%

Worsened metrics

Dev dependency count

20

increased by5.26%

No dependency changes