@applitools/dom-capture - npm Package Compare versions

Comparing version 7.1.5 to 7.2.0

CHANGELOG.md

@@ -7,2 +7,6 @@
 
+ ## 7.2.0 - 2020/5/3
+
+- added shadow dom support ** Dom Capture version 1.3.0 ** 
+
  ## 7.1.5 - 2020/4/19
@@ -9,0 +13,0 @@

dist/captureDom.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-capture@7.1.4 */
+/* @applitools/dom-capture@7.1.5 */
 
@@ -290,2 +290,3 @@ function __captureDom() {
     TEXT: 3,
+    DOCUMENT_FRAGMENT: 11,
   };
@@ -377,2 +378,5 @@
           fetchAllCssFromElement(el);
+          if (!el.contentDocument) {
+            return;
+          }
           try {
@@ -393,3 +397,3 @@ const baseUrl = isInlineFrame_1(el) ? el.baseURI : el.contentDocument.location.href;
 
-  const API_VERSION = '1.2.0';
+  const API_VERSION = '1.3.0';
 
@@ -402,3 +406,3 @@ async function captureFrame(
   ) {
-    const performance = {total: {}, prefetchCss: {}, doCaptureFrame: {}, waitForImages: {}};
+    const performance = {total: {}, prefetchCss: {}, doCaptureDoc: {}, waitForImages: {}};
     function startTime(obj) {
@@ -409,3 +413,3 @@ obj.startTime = Date.now();
       obj.endTime = Date.now();
-      obj.ellapsedTime = obj.endTime - obj.startTime;
+      obj.elapsedTime = obj.endTime - obj.startTime;
     }
@@ -439,5 +443,5 @@ const promises = [];
 
-    startTime(performance.doCaptureFrame);
-    const capturedFrame = doCaptureFrame(doc);
-    endTime(performance.doCaptureFrame);
+    startTime(performance.doCaptureDoc);
+    const capturedFrame = doCaptureDoc(doc);
+    endTime(performance.doCaptureDoc);
 
@@ -450,3 +454,3 @@ startTime(performance.waitForImages);
     capturedFrame.version = API_VERSION;
-    capturedFrame.scriptVersion = '7.1.4';
+    capturedFrame.scriptVersion = '7.1.5';
 
@@ -480,6 +484,2 @@ const iframePrefix = iframeCors.length ? `${iframeCors.join('\n')}\n` : '';
 
-    function filter(x) {
-      return !!x;
-    }
-
     function notEmptyObj(obj) {
@@ -496,6 +496,6 @@ return Object.keys(obj).length ? obj : undefined;
 
-    function doCaptureFrame(frameDoc, baseUrl = frameDoc.location.href) {
+    function doCaptureDoc(docFrag, baseUrl = docFrag.location && docFrag.location.href) {
       const bgImages = new Set();
       let bundledCss = '';
-      const ret = captureNode(frameDoc.documentElement);
+      const ret = captureNode(docFrag.documentElement || docFrag);
       ret.css = bundledCss;
@@ -525,2 +525,7 @@ promises.push(getImageSizes_1({bgImages}).then(images => (ret.images = images)));
           }
+          case NODE_TYPES$2.DOCUMENT_FRAGMENT: {
+            return {
+              childNodes: Array.prototype.map.call(node.childNodes, captureNode).filter(Boolean),
+            };
+          }
           default: {
@@ -533,3 +538,4 @@ return null;
       function elementToJSON(el) {
-        const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(filter);
+        const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(Boolean);
+        const shadowRoot = el.shadowRoot && doCaptureDoc(el.shadowRoot, baseUrl);
 
@@ -567,3 +573,3 @@ const tagName = el.tagName.toUpperCase();
 
-        return {
+        const result = {
           tagName,
@@ -575,2 +581,6 @@ style: notEmptyObj(style),
         };
+        if (shadowRoot) {
+          result.shadowRoot = shadowRoot;
+        }
+        return result;
       }
@@ -589,5 +599,3 @@
           if (doc) {
-            obj.childNodes = [
-              doCaptureFrame(doc, isInlineFrame_1(el) ? el.baseURI : doc.location.href),
-            ];
+            obj.childNodes = [doCaptureDoc(doc, isInlineFrame_1(el) ? el.baseURI : doc.location.href)];
           } else {
@@ -594,0 +602,0 @@ markFrameAsCors();

dist/captureDomAndPoll.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-capture@7.1.4 */
+/* @applitools/dom-capture@7.1.5 */
 
@@ -290,2 +290,3 @@ function __captureDomAndPoll() {
     TEXT: 3,
+    DOCUMENT_FRAGMENT: 11,
   };
@@ -377,2 +378,5 @@
           fetchAllCssFromElement(el);
+          if (!el.contentDocument) {
+            return;
+          }
           try {
@@ -393,3 +397,3 @@ const baseUrl = isInlineFrame_1(el) ? el.baseURI : el.contentDocument.location.href;
 
-  const API_VERSION = '1.2.0';
+  const API_VERSION = '1.3.0';
 
@@ -402,3 +406,3 @@ async function captureFrame(
   ) {
-    const performance = {total: {}, prefetchCss: {}, doCaptureFrame: {}, waitForImages: {}};
+    const performance = {total: {}, prefetchCss: {}, doCaptureDoc: {}, waitForImages: {}};
     function startTime(obj) {
@@ -409,3 +413,3 @@ obj.startTime = Date.now();
       obj.endTime = Date.now();
-      obj.ellapsedTime = obj.endTime - obj.startTime;
+      obj.elapsedTime = obj.endTime - obj.startTime;
     }
@@ -439,5 +443,5 @@ const promises = [];
 
-    startTime(performance.doCaptureFrame);
-    const capturedFrame = doCaptureFrame(doc);
-    endTime(performance.doCaptureFrame);
+    startTime(performance.doCaptureDoc);
+    const capturedFrame = doCaptureDoc(doc);
+    endTime(performance.doCaptureDoc);
 
@@ -450,3 +454,3 @@ startTime(performance.waitForImages);
     capturedFrame.version = API_VERSION;
-    capturedFrame.scriptVersion = '7.1.4';
+    capturedFrame.scriptVersion = '7.1.5';
 
@@ -480,6 +484,2 @@ const iframePrefix = iframeCors.length ? `${iframeCors.join('\n')}\n` : '';
 
-    function filter(x) {
-      return !!x;
-    }
-
     function notEmptyObj(obj) {
@@ -496,6 +496,6 @@ return Object.keys(obj).length ? obj : undefined;
 
-    function doCaptureFrame(frameDoc, baseUrl = frameDoc.location.href) {
+    function doCaptureDoc(docFrag, baseUrl = docFrag.location && docFrag.location.href) {
       const bgImages = new Set();
       let bundledCss = '';
-      const ret = captureNode(frameDoc.documentElement);
+      const ret = captureNode(docFrag.documentElement || docFrag);
       ret.css = bundledCss;
@@ -525,2 +525,7 @@ promises.push(getImageSizes_1({bgImages}).then(images => (ret.images = images)));
           }
+          case NODE_TYPES$2.DOCUMENT_FRAGMENT: {
+            return {
+              childNodes: Array.prototype.map.call(node.childNodes, captureNode).filter(Boolean),
+            };
+          }
           default: {
@@ -533,3 +538,4 @@ return null;
       function elementToJSON(el) {
-        const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(filter);
+        const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(Boolean);
+        const shadowRoot = el.shadowRoot && doCaptureDoc(el.shadowRoot, baseUrl);
 
@@ -567,3 +573,3 @@ const tagName = el.tagName.toUpperCase();
 
-        return {
+        const result = {
           tagName,
@@ -575,2 +581,6 @@ style: notEmptyObj(style),
         };
+        if (shadowRoot) {
+          result.shadowRoot = shadowRoot;
+        }
+        return result;
       }
@@ -589,5 +599,3 @@
           if (doc) {
-            obj.childNodes = [
-              doCaptureFrame(doc, isInlineFrame_1(el) ? el.baseURI : doc.location.href),
-            ];
+            obj.childNodes = [doCaptureDoc(doc, isInlineFrame_1(el) ? el.baseURI : doc.location.href)];
           } else {
@@ -594,0 +602,0 @@ markFrameAsCors();

dist/captureDomCjs.js

@@ -1,2 +0,2 @@
-/* @applitools/dom-capture@7.1.4 */
+/* @applitools/dom-capture@7.1.5 */
 'use strict';
@@ -287,2 +287,3 @@
   TEXT: 3,
+  DOCUMENT_FRAGMENT: 11,
 };
@@ -374,2 +375,5 @@
         fetchAllCssFromElement(el);
+        if (!el.contentDocument) {
+          return;
+        }
         try {
@@ -390,3 +394,3 @@ const baseUrl = isInlineFrame_1(el) ? el.baseURI : el.contentDocument.location.href;
 
-const API_VERSION = '1.2.0';
+const API_VERSION = '1.3.0';
 
@@ -399,3 +403,3 @@ async function captureFrame(
 ) {
-  const performance = {total: {}, prefetchCss: {}, doCaptureFrame: {}, waitForImages: {}};
+  const performance = {total: {}, prefetchCss: {}, doCaptureDoc: {}, waitForImages: {}};
   function startTime(obj) {
@@ -406,3 +410,3 @@ obj.startTime = Date.now();
     obj.endTime = Date.now();
-    obj.ellapsedTime = obj.endTime - obj.startTime;
+    obj.elapsedTime = obj.endTime - obj.startTime;
   }
@@ -436,5 +440,5 @@ const promises = [];
 
-  startTime(performance.doCaptureFrame);
-  const capturedFrame = doCaptureFrame(doc);
-  endTime(performance.doCaptureFrame);
+  startTime(performance.doCaptureDoc);
+  const capturedFrame = doCaptureDoc(doc);
+  endTime(performance.doCaptureDoc);
 
@@ -447,3 +451,3 @@ startTime(performance.waitForImages);
   capturedFrame.version = API_VERSION;
-  capturedFrame.scriptVersion = '7.1.4';
+  capturedFrame.scriptVersion = '7.1.5';
 
@@ -477,6 +481,2 @@ const iframePrefix = iframeCors.length ? `${iframeCors.join('\n')}\n` : '';
 
-  function filter(x) {
-    return !!x;
-  }
-
   function notEmptyObj(obj) {
@@ -493,6 +493,6 @@ return Object.keys(obj).length ? obj : undefined;
 
-  function doCaptureFrame(frameDoc, baseUrl = frameDoc.location.href) {
+  function doCaptureDoc(docFrag, baseUrl = docFrag.location && docFrag.location.href) {
     const bgImages = new Set();
     let bundledCss = '';
-    const ret = captureNode(frameDoc.documentElement);
+    const ret = captureNode(docFrag.documentElement || docFrag);
     ret.css = bundledCss;
@@ -522,2 +522,7 @@ promises.push(getImageSizes_1({bgImages}).then(images => (ret.images = images)));
         }
+        case NODE_TYPES$2.DOCUMENT_FRAGMENT: {
+          return {
+            childNodes: Array.prototype.map.call(node.childNodes, captureNode).filter(Boolean),
+          };
+        }
         default: {
@@ -530,3 +535,4 @@ return null;
     function elementToJSON(el) {
-      const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(filter);
+      const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(Boolean);
+      const shadowRoot = el.shadowRoot && doCaptureDoc(el.shadowRoot, baseUrl);
 
@@ -564,3 +570,3 @@ const tagName = el.tagName.toUpperCase();
 
-      return {
+      const result = {
         tagName,
@@ -572,2 +578,6 @@ style: notEmptyObj(style),
       };
+      if (shadowRoot) {
+        result.shadowRoot = shadowRoot;
+      }
+      return result;
     }
@@ -586,5 +596,3 @@
         if (doc) {
-          obj.childNodes = [
-            doCaptureFrame(doc, isInlineFrame_1(el) ? el.baseURI : doc.location.href),
-          ];
+          obj.childNodes = [doCaptureDoc(doc, isInlineFrame_1(el) ? el.baseURI : doc.location.href)];
         } else {
@@ -591,0 +599,0 @@ markFrameAsCors();

package.json

 {
   "name": "@applitools/dom-capture",
-  "version": "7.1.5",
+  "version": "7.2.0",
   "main": "index.js",
@@ -11,3 +11,3 @@ "license": "SEE LICENSE IN LICENSE",
     "lint": "yarn lint:node && yarn lint:browser",
-    "test": "yarn lint && yarn test:mocha",
+    "test": "yarn test:mocha && yarn lint",
     "build": "rollup -c rollup.config.js",
@@ -14,0 +14,0 @@ "build:watch": "rollup -c rollup.config.js --watch",

README.md

@@ -33,3 +33,3 @@ # dom-capture
 
-This package's `dist` folder contains a script that can be sent to the browser regradless of driver and language. An agent that wishes to extract information from a webpage can read the contents of `dist/captureDom` and send that to the browser as an async script. **There's still the need to wrap it in a way that invokes it**.
+This package's `dist` folder contains a script that can be sent to the browser regardless of driver and language. An agent that wishes to extract information from a webpage can read the contents of `dist/captureDom` and send that to the browser as an async script. **There's still the need to wrap it in a way that invokes it**.
 
@@ -47,3 +47,3 @@ For example in `Java`:
 - `styleProps` - an array containing the css properties that should be captured for computed style. E.g. `['background']`.
-- `rectProps` - an array containig the bounding client rect properties that should be captured. E.g. `['top', 'left']`.
+- `rectProps` - an array containing the bounding client rect properties that should be captured. E.g. `['top', 'left']`.
 - `ignoredTagNames` - an array containing tag names that should not be captured. E.g. `['head']`.
@@ -60,2 +60,3 @@
 - `childNodes`
+- `shadowRoot`
 
@@ -78,3 +79,8 @@ Text nodes have the following properties:
 
-The return value is a **string** that consists of a prefix specifying unfetched css resources and iframes, followed by the actual DOM structure.
+ShadowRoot nodes have `childNodes`, `css` and `images` attributes:
+* notice that the `css` applies only to the dom tree starting from this `shadowRoot` (i.e. starting from it's childNodes), also note that `css` from outside this dom tree (i.e. `css` from a containing HTML or `shadowRoot`) does not apply to this tree.
+* `images` is also relevant only in the current `shadowRoot` dom tree context.
+
+
+The return value is a **string** that consists of a prefix specifying un fetched css resources and iframes, followed by the actual DOM structure.
 For example:
@@ -94,3 +100,6 @@
     {"tagName":"DIV","style":{...},"rect":{...},"childNodes":[
-      {"tagName":"#text","text":"hello"}]},
+      {"tagName":"#text","text":"hello"}],"shadowRoot": { "childNodes": [{"tagName": "DIV","style": {...},"rect":{...},"childNodes":[]}],"css": `/** http://some/url.css **/
+      div.inShadow{border: 5px solid salmon;}`,
+      "images": {}}
+    },
     {"tagName":"IFRAME","style":{...},"rect":{...},"attributes":{"src":"some/url.html"},"childNodes":[
@@ -115,3 +124,3 @@ {"tagName":"HTML","style":{...},"rect":{...},"childNodes":[
     "endTime": 1573131315964,
-    "ellapsedTime": 11
+    "elapsedTime": 11
   },
@@ -121,8 +130,8 @@ "prefetchCss": {
     "endTime": 1573131315961,
-    "ellapsedTime": 8
+    "elapsedTime": 8
   },
-  "doCaptureFrame": {
+  "doCaptureDoc": {
     "startTime": 1573131315961,
     "endTime": 1573131315964,
-    "ellapsedTime": 3
+    "elapsedTime": 3
   },
@@ -132,3 +141,3 @@ "waitForImages": {
     "endTime": 1573131315964,
-    "ellapsedTime": 0
+    "elapsedTime": 0
   }
@@ -135,0 +144,0 @@ }

src/browser/captureFrame.js

@@ -16,3 +16,3 @@ 'use strict';
 
-const API_VERSION = '1.2.0';
+const API_VERSION = '1.3.0';
 
@@ -25,3 +25,3 @@ async function captureFrame(
 ) {
-  const performance = {total: {}, prefetchCss: {}, doCaptureFrame: {}, waitForImages: {}};
+  const performance = {total: {}, prefetchCss: {}, doCaptureDoc: {}, waitForImages: {}};
   function startTime(obj) {
@@ -32,3 +32,3 @@ obj.startTime = Date.now();
     obj.endTime = Date.now();
-    obj.ellapsedTime = obj.endTime - obj.startTime;
+    obj.elapsedTime = obj.endTime - obj.startTime;
   }
@@ -62,5 +62,5 @@ const promises = [];
 
-  startTime(performance.doCaptureFrame);
-  const capturedFrame = doCaptureFrame(doc);
-  endTime(performance.doCaptureFrame);
+  startTime(performance.doCaptureDoc);
+  const capturedFrame = doCaptureDoc(doc);
+  endTime(performance.doCaptureDoc);
 
@@ -102,6 +102,2 @@ startTime(performance.waitForImages);
 
-  function filter(x) {
-    return !!x;
-  }
-
   function notEmptyObj(obj) {
@@ -118,6 +114,6 @@ return Object.keys(obj).length ? obj : undefined;
 
-  function doCaptureFrame(frameDoc, baseUrl = frameDoc.location.href) {
+  function doCaptureDoc(docFrag, baseUrl = docFrag.location && docFrag.location.href) {
     const bgImages = new Set();
     let bundledCss = '';
-    const ret = captureNode(frameDoc.documentElement);
+    const ret = captureNode(docFrag.documentElement || docFrag);
     ret.css = bundledCss;
@@ -147,2 +143,7 @@ promises.push(getImageSizes({bgImages}).then(images => (ret.images = images)));
         }
+        case NODE_TYPES.DOCUMENT_FRAGMENT: {
+          return {
+            childNodes: Array.prototype.map.call(node.childNodes, captureNode).filter(Boolean),
+          };
+        }
         default: {
@@ -155,3 +156,4 @@ return null;
     function elementToJSON(el) {
-      const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(filter);
+      const childNodes = Array.prototype.map.call(el.childNodes, captureNode).filter(Boolean);
+      const shadowRoot = el.shadowRoot && doCaptureDoc(el.shadowRoot, baseUrl);
 
@@ -189,3 +191,3 @@ const tagName = el.tagName.toUpperCase();
 
-      return {
+      const result = {
         tagName,
@@ -197,2 +199,6 @@ style: notEmptyObj(style),
       };
+      if (shadowRoot) {
+        result.shadowRoot = shadowRoot;
+      }
+      return result;
     }
@@ -211,5 +217,3 @@
         if (doc) {
-          obj.childNodes = [
-            doCaptureFrame(doc, isInlineFrame(el) ? el.baseURI : doc.location.href),
-          ];
+          obj.childNodes = [doCaptureDoc(doc, isInlineFrame(el) ? el.baseURI : doc.location.href)];
         } else {
@@ -216,0 +220,0 @@ markFrameAsCors();

src/browser/nodeTypes.js

 const NODE_TYPES = {
   ELEMENT: 1,
   TEXT: 3,
+  DOCUMENT_FRAGMENT: 11,
 };
 
 module.exports = {NODE_TYPES};

src/browser/prefetchAllCss.js

@@ -83,2 +83,5 @@ const {NODE_TYPES} = require('./nodeTypes');
         fetchAllCssFromElement(el);
+        if (!el.contentDocument) {
+          return;
+        }
         try {
@@ -85,0 +88,0 @@ const baseUrl = isInlineFrame(el) ? el.baseURI : el.contentDocument.location.href;

No alert changes

Improved metrics

Total package byte prevSize

1077027

0.38%

Lines of code

23480

0.32%

Number of lines in readme file

149

6.43%

No dependency changes