core: normalize node information in gathering (#11405)

lighthouse-cli/test/smokehouse/test-definitions/seo/expectations.js

@@ -357,15 +357,15 @@ const expectations = [
                 'tapTarget': {
                   'type': 'node',
                   /* eslint-disable max-len */
-                  'snippet': '<a data-gathered-target="zero-width-tap-target-with-overflowing-child-content" style="display: block; width: 0; white-space: nowrap">\n        <!-- TODO: having the span should not be necessary to cause a failure here, but\n             right now we don\'t try to get the client rects of children that …',
+                  'snippet': '<a data-gathered-target="zero-width-tap-target-with-overflowing-child-content" style="display: block; width: 0; white-space: nowrap">',
                   'path': '2,HTML,1,BODY,14,DIV,0,A',
                   'selector': 'body > div > a',
                   'nodeLabel': 'zero width target',
                 },
                 'overlappingTarget': {
                   'type': 'node',
                   /* eslint-disable max-len */
-                  'snippet': '<a data-gathered-target="passing-tap-target-next-to-zero-width-target" style="display: block; width: 110px; height: 100px;background: #aaa;">\n        passing target\n      </a>',
+                  'snippet': '<a data-gathered-target="passing-tap-target-next-to-zero-width-target" style="display: block; width: 110px; height: 100px;background: #aaa;">',
                   'path': '2,HTML,1,BODY,14,DIV,1,A',
                   'selector': 'body > div > a',
                   'nodeLabel': 'passing target',

lighthouse-core/audits/accessibility/axe-audit.js

@@ -78,7 +78,7 @@ class AxeAudit extends Audit {
         node: /** @type {LH.Audit.Details.NodeValue} */ ({
           type: 'node',
           selector: Array.isArray(node.target) ? node.target.join(' ') : '',
-          path: node.path,
+          path: node.devtoolsNodePath,
           snippet: node.snippet,
           boundingRect: node.boundingRect,
           explanation: node.failureSummary,

lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js

@@ -60,7 +60,7 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
         try {
           return new URL(anchor.href).host !== pageHost;
         } catch (err) {
-          warnings.push(str_(UIStrings.warning, {anchorHTML: anchor.outerHTML}));
+          warnings.push(str_(UIStrings.warning, {anchorHTML: anchor.snippet}));
           return true;
         }
       })
@@ -74,12 +74,12 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
             path: anchor.devtoolsNodePath || '',
             selector: anchor.selector || '',
             nodeLabel: anchor.nodeLabel || '',
-            snippet: anchor.outerHTML || '',
+            snippet: anchor.snippet || '',
           }),
           href: anchor.href || 'Unknown',
           target: anchor.target || '',
           rel: anchor.rel || '',
-          outerHTML: anchor.outerHTML || '',
+          outerHTML: anchor.snippet || '',
         };
       });
 

lighthouse-core/audits/seo/crawlable-anchors.js

@@ -84,7 +84,7 @@ class CrawlableAnchors extends Audit {
           path: anchor.devtoolsNodePath || '',
           selector: anchor.selector || '',
           nodeLabel: anchor.nodeLabel || '',
-          snippet: anchor.outerHTML || '',
+          snippet: anchor.snippet || '',
         },
       };
     });

lighthouse-core/audits/seo/tap-targets.js

@@ -250,7 +250,7 @@ function targetToTableNode(target) {
   return {
     type: 'node',
     snippet: target.snippet,
-    path: target.path,
+    path: target.devtoolsNodePath,
     selector: target.selector,
     boundingRect,
     nodeLabel: target.nodeLabel,

lighthouse-core/gather/gatherers/accessibility.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global window, document, getOuterHTMLSnippet, getBoundingClientRect, getNodePath, getNodeLabel */
+/* global window, document, getNodeDetails */
 
 const Gatherer = require('./gatherer.js');
 const fs = require('fs');
@@ -59,19 +59,10 @@ function runA11yChecks() {
     // @ts-expect-error
     const augmentAxeNodes = result => {
       // @ts-expect-error
-      result.nodes.forEach(node => {
-        // @ts-expect-error - getNodePath put into scope via stringification
-        node.path = getNodePath(node.element);
-        // @ts-expect-error - getOuterHTMLSnippet put into scope via stringification
-        node.snippet = getOuterHTMLSnippet(node.element);
-        // @ts-expect-error - getBoundingClientRect put into scope via stringification
-        const rect = getBoundingClientRect(node.element);
-        if (rect.width > 0 && rect.height > 0) {
-          node.boundingRect = rect;
-        }
 
-        // @ts-expect-error - getNodeLabel put into scope via stringification
-        node.nodeLabel = getNodeLabel(node.element);
+      result.nodes.forEach(node => {
+        // @ts-expect-error - getNodeDetails put into scope via stringification
+        Object.assign(node, getNodeDetails(node.element));
         // avoid circular JSON concerns
         node.element = node.any = node.all = node.none = undefined;
       });
@@ -110,10 +101,7 @@ class Accessibility extends Gatherer {
   afterPass(passContext) {
     const driver = passContext.driver;
     const expression = `(function () {
-      ${pageFunctions.getOuterHTMLSnippetString};
-      ${pageFunctions.getBoundingClientRectString};
-      ${pageFunctions.getNodePathString};
-      ${pageFunctions.getNodeLabelString};
+      ${pageFunctions.getNodeDetailsString};
       ${axeLibSource};
       return (${runA11yChecks.toString()}());
     })()`;

lighthouse-core/gather/gatherers/anchor-elements.js

@@ -5,6 +5,8 @@
  */
 'use strict';
 
+/* global getNodeDetails */
+
 const Gatherer = require('./gatherer.js');
 const pageFunctions = require('../../lib/page-functions.js');
 
@@ -41,15 +43,8 @@ function collectAnchorElements() {
   const anchorElements = getElementsInDocument('a'); // eslint-disable-line no-undef
 
   return anchorElements.map(node => {
-    // @ts-expect-error - put into scope via stringification
-    const outerHTML = getOuterHTMLSnippet(node); // eslint-disable-line no-undef
-    // @ts-expect-error - put into scope via stringification
-    const nodePath = getNodePath(node); // eslint-disable-line no-undef
-    // @ts-expect-error - getNodeSelector put into scope via stringification
-    const selector = getNodeSelector(node); // eslint-disable-line no-undef
-    // @ts-expect-error - getNodeLabel put into scope via stringification
-    const nodeLabel = getNodeLabel(node); // eslint-disable-line no-undef
-
+    // @ts-expect-error - getNodeDetails put into scope via stringification
+    const nodeInfo = getNodeDetails(node);
     if (node instanceof HTMLAnchorElement) {
       return {
         href: node.href,
@@ -60,10 +55,7 @@ function collectAnchorElements() {
         text: node.innerText, // we don't want to return hidden text, so use innerText
         rel: node.rel,
         target: node.target,
-        devtoolsNodePath: nodePath,
-        selector,
-        nodeLabel,
-        outerHTML,
+        ...nodeInfo,
       };
     }
 
@@ -75,10 +67,7 @@ function collectAnchorElements() {
       text: node.textContent || '',
       rel: '',
       target: node.target.baseVal || '',
-      devtoolsNodePath: nodePath,
-      selector,
-      nodeLabel,
-      outerHTML,
+      ...nodeInfo,
     };
   });
 }
@@ -107,11 +96,8 @@ class AnchorElements extends Gatherer {
   async afterPass(passContext) {
     const driver = passContext.driver;
     const expression = `(() => {
-      ${pageFunctions.getOuterHTMLSnippetString};
       ${pageFunctions.getElementsInDocumentString};
-      ${pageFunctions.getNodePathString};
-      ${pageFunctions.getNodeSelectorString};
-      ${pageFunctions.getNodeLabelString};
+      ${pageFunctions.getNodeDetailsString};
 
       return (${collectAnchorElements})();
     })()`;

lighthouse-core/gather/gatherers/dobetterweb/password-inputs-with-prevented-paste.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-/* global document ClipboardEvent getOuterHTMLSnippet */
+/* global document ClipboardEvent getNodeDetails */
 
 const Gatherer = require('../gatherer.js');
 const pageFunctions = require('../../../lib/page-functions.js');
@@ -22,10 +22,10 @@ function findPasswordInputsWithPreventedPaste() {
         new ClipboardEvent('paste', {cancelable: true})
       )
     )
-    .map(passwordInput => ({
-      // @ts-expect-error - getOuterHTMLSnippet put into scope via stringification
-      snippet: getOuterHTMLSnippet(passwordInput),
-    }));
+    .map(passwordInput => (
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      getNodeDetails(passwordInput)
+    ));
 }
 
 class PasswordInputsWithPreventedPaste extends Gatherer {
@@ -34,10 +34,12 @@ class PasswordInputsWithPreventedPaste extends Gatherer {
    * @return {Promise<LH.Artifacts['PasswordInputsWithPreventedPaste']>}
    */
   afterPass(passContext) {
-    return passContext.driver.evaluateAsync(`(() => {
-      ${pageFunctions.getOuterHTMLSnippetString};
+    const expression = `(() => {
+      ${pageFunctions.getNodeDetailsString};
       return (${findPasswordInputsWithPreventedPaste.toString()}());
-    })()`);
+    })()`;
+
+    return passContext.driver.evaluateAsync(expression);
   }
 }
 

lighthouse-core/gather/gatherers/form-elements.js

@@ -5,6 +5,8 @@
  */
 'use strict';
 
+/* global getNodeDetails */
+
 const Gatherer = require('./gatherer.js');
 const pageFunctions = require('../../lib/page-functions.js');
 
@@ -37,10 +39,8 @@ function collectFormElements() {
           id: parentFormElement.id,
           name: parentFormElement.name,
           autocomplete: parentFormElement.autocomplete,
-          // @ts-expect-error - put into scope via stringification
-          nodeLabel: getNodeLabel(parentFormElement), // eslint-disable-line no-undef,
-          // @ts-expect-error - put into scope via stringification
-          snippet: getOuterHTMLSnippet(parentFormElement), // eslint-disable-line no-undef
+          // @ts-expect-error - getNodeDetails put into scope via stringification
+          ...getNodeDetails(parentFormElement),
         },
         inputs: [],
         labels: [],
@@ -60,19 +60,15 @@ function collectFormElements() {
           attribute: child.getAttribute('autocomplete'),
           prediction: child.getAttribute('autofill-prediction'),
         },
-        // @ts-expect-error - put into scope via stringification
-        nodeLabel: getNodeLabel(child), // eslint-disable-line no-undef,
-        // @ts-expect-error - put into scope via stringification
-        snippet: getOuterHTMLSnippet(child), // eslint-disable-line no-undef
+        // @ts-expect-error - getNodeDetails put into scope via stringification
+        ...getNodeDetails(child),
       });
     }
     if (child instanceof HTMLLabelElement) {
       formObj.labels.push({
         for: child.htmlFor,
-        // @ts-expect-error - put into scope via stringification
-        nodeLabel: getNodeLabel(child), // eslint-disable-line no-undef,
-        // @ts-expect-error - put into scope via stringification
-        snippet: getOuterHTMLSnippet(child), // eslint-disable-line no-undef
+        // @ts-expect-error - getNodeDetails put into scope via stringification
+        ...getNodeDetails(child),
       });
     }
   }
@@ -96,8 +92,7 @@ class FormElements extends Gatherer {
 
     const expression = `(() => {
       ${pageFunctions.getElementsInDocumentString};
-      ${pageFunctions.getOuterHTMLSnippetString};
-      ${pageFunctions.getNodeLabelString};
+      ${pageFunctions.getNodeDetailsString};
       return (${collectFormElements})();
     })()`;
 

lighthouse-core/gather/gatherers/iframe-elements.js

@@ -5,6 +5,8 @@
  */
 'use strict';
 
+/* global getNodeDetails */
+
 const Gatherer = require('./gatherer.js');
 const pageFunctions = require('../../lib/page-functions.js');
 
@@ -26,6 +28,8 @@ function collectIFrameElements() {
       clientRect: {top, bottom, left, right, width, height},
       // @ts-expect-error - put into scope via stringification
       isPositionFixed: isPositionFixed(node), // eslint-disable-line no-undef
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      ...getNodeDetails(node),
     };
   });
 }
@@ -40,9 +44,9 @@ class IFrameElements extends Gatherer {
     const driver = passContext.driver;
 
     const expression = `(() => {
-      ${pageFunctions.getOuterHTMLSnippetString};
       ${pageFunctions.getElementsInDocumentString};
       ${pageFunctions.isPositionFixedString};
+      ${pageFunctions.getNodeDetailsString};
       return (${collectIFrameElements})();
     })()`;
 

lighthouse-core/gather/gatherers/image-elements.js

@@ -14,7 +14,7 @@ const pageFunctions = require('../../lib/page-functions.js');
 const Driver = require('../driver.js'); // eslint-disable-line no-unused-vars
 const FontSize = require('./seo/font-size.js');
 
-/* global window, getElementsInDocument, Image, getNodePath, getNodeSelector, getNodeLabel, getOuterHTMLSnippet, ShadowRoot */
+/* global window, getElementsInDocument, Image, getNodeDetails, ShadowRoot */
 
 
 /** @param {Element} element */
@@ -86,14 +86,8 @@ function getHTMLImages(allElements) {
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
       // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
       usesSrcSetDensityDescriptor: / \d+(\.\d+)?x/.test(element.srcset),
-      // @ts-ignore - getNodePath put into scope via stringification
-      devtoolsNodePath: getNodePath(element),
-      // @ts-ignore - put into scope via stringification
-      selector: getNodeSelector(element),
-      // @ts-ignore - put into scope via stringification
-      nodeLabel: getNodeLabel(element),
-      // @ts-ignore - put into scope via stringification
-      snippet: getOuterHTMLSnippet(element),
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      ...getNodeDetails(element),
     };
   });
 }
@@ -143,14 +137,8 @@ function getCSSImages(allElements) {
       ),
       usesSrcSetDensityDescriptor: false,
       resourceSize: 0, // this will get overwritten below
-      // @ts-ignore - getNodePath put into scope via stringification
-      devtoolsNodePath: getNodePath(element),
-      // @ts-ignore - put into scope via stringification
-      selector: getNodeSelector(element),
-      // @ts-ignore - put into scope via stringification
-      nodeLabel: getNodeLabel(element),
-      // @ts-ignore - put into scope via stringification
-      snippet: getOuterHTMLSnippet(element),
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      ...getNodeDetails(element),
     });
   }
 
@@ -312,10 +300,8 @@ class ImageElements extends Gatherer {
 
     const expression = `(function() {
       ${pageFunctions.getElementsInDocumentString}; // define function on page
-      ${pageFunctions.getNodePathString};
-      ${pageFunctions.getNodeSelectorString};
-      ${pageFunctions.getNodeLabelString};
-      ${pageFunctions.getOuterHTMLSnippetString};
+      ${pageFunctions.getBoundingClientRectString};
+      ${pageFunctions.getNodeDetailsString};
       ${getClientRect.toString()};
       ${getPosition.toString()};
       ${getHTMLImages.toString()};