From 2e242d6cb0a3c4f816175629de31726eda0d506c Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 12 Jan 2021 17:33:20 -0600
Subject: [PATCH] core: normalize creation of NodeValue (#11877)

---
 .../audits/accessibility/axe-audit.js         |   8 +-
 lighthouse-core/audits/audit.js               |  16 +
 lighthouse-core/audits/autocomplete.js        |   6 +-
 .../audits/dobetterweb/dom-size.js            |  16 +-
 .../external-anchors-use-rel-noopener.js      |   8 +-
 .../password-inputs-can-be-pasted-into.js     |   7 +-
 .../largest-contentful-paint-element.js       |  10 +-
 .../audits/layout-shift-elements.js           |  10 +-
 .../audits/non-composited-animations.js       |  12 +-
 .../audits/seo/crawlable-anchors.js           |   8 +-
 lighthouse-core/audits/seo/plugins.js         |  20 +-
 lighthouse-core/audits/seo/tap-targets.js     |   7 +-
 lighthouse-core/audits/unsized-images.js      |   9 +-
 .../gather/gatherers/seo/embedded-content.js  |  22 +-
 lighthouse-core/lib/page-functions.js         |   9 +-
 .../test/audits/autocomplete-test.js          |  24 +-
 .../test/audits/seo/plugins-test.js           |  31 ++
 lighthouse-core/test/results/sample_v2.json   | 312 ++++++++++++------
 types/artifacts.d.ts                          |   7 +-
 types/externs.d.ts                            |   2 +-
 20 files changed, 305 insertions(+), 239 deletions(-)

diff --git a/lighthouse-core/audits/accessibility/axe-audit.js b/lighthouse-core/audits/accessibility/axe-audit.js
index e8d26570340f..d053031b9201 100644
--- a/lighthouse-core/audits/accessibility/axe-audit.js
+++ b/lighthouse-core/audits/accessibility/axe-audit.js
@@ -76,14 +76,8 @@ class AxeAudit extends Audit {
     if (rule && rule.nodes) {
       items = rule.nodes.map(axeNode => ({
         node: {
-          type: /** @type {'node'} */ ('node'),
-          lhId: axeNode.node.lhId,
-          selector: axeNode.node.selector,
-          path: axeNode.node.devtoolsNodePath,
-          snippet: axeNode.node.snippet,
-          boundingRect: axeNode.node.boundingRect,
+          ...Audit.makeNodeItem(axeNode.node),
           explanation: axeNode.failureSummary,
-          nodeLabel: axeNode.node.nodeLabel,
         },
       }));
     }
diff --git a/lighthouse-core/audits/audit.js b/lighthouse-core/audits/audit.js
index 2ec83e0fd72a..ad25fb83394b 100644
--- a/lighthouse-core/audits/audit.js
+++ b/lighthouse-core/audits/audit.js
@@ -216,6 +216,22 @@ class Audit {
     };
   }
 
+  /**
+   * @param {LH.Artifacts.NodeDetails} node
+   * @return {LH.Audit.Details.NodeValue}
+   */
+  static makeNodeItem(node) {
+    return {
+      type: 'node',
+      lhId: node.lhId,
+      path: node.devtoolsNodePath,
+      selector: node.selector,
+      boundingRect: node.boundingRect,
+      snippet: node.snippet,
+      nodeLabel: node.nodeLabel,
+    };
+  }
+
   /**
    * @param {number|null} score
    * @param {LH.Audit.ScoreDisplayMode} scoreDisplayMode
diff --git a/lighthouse-core/audits/autocomplete.js b/lighthouse-core/audits/autocomplete.js
index f1227df26da5..078de1b9fa71 100644
--- a/lighthouse-core/audits/autocomplete.js
+++ b/lighthouse-core/audits/autocomplete.js
@@ -260,11 +260,7 @@ class AutocompleteAudit extends Audit {
           continue;
         }
         failingFormsData.push({
-          node: {
-            type: /** @type {'node'} */ ('node'),
-            snippet: input.node.snippet,
-            nodeLabel: input.node.nodeLabel,
-          },
+          node: Audit.makeNodeItem(input.node),
           suggestion: suggestion,
           current: input.autocomplete.attribute,
         });
diff --git a/lighthouse-core/audits/dobetterweb/dom-size.js b/lighthouse-core/audits/dobetterweb/dom-size.js
index acf7c4818b27..7ff253eae131 100644
--- a/lighthouse-core/audits/dobetterweb/dom-size.js
+++ b/lighthouse-core/audits/dobetterweb/dom-size.js
@@ -98,24 +98,12 @@ class DOMSize extends Audit {
         value: stats.totalBodyElements,
       },
       {
-        node: {
-          type: /** @type {'node'} */ ('node'),
-          path: stats.depth.devtoolsNodePath,
-          snippet: stats.depth.snippet,
-          selector: stats.depth.selector,
-          nodeLabel: stats.depth.nodeLabel,
-        },
+        node: Audit.makeNodeItem(stats.depth),
         statistic: str_(UIStrings.statisticDOMDepth),
         value: stats.depth.max,
       },
       {
-        node: {
-          type: /** @type {'node'} */ ('node'),
-          path: stats.width.devtoolsNodePath,
-          snippet: stats.width.snippet,
-          selector: stats.width.selector,
-          nodeLabel: stats.width.nodeLabel,
-        },
+        node: Audit.makeNodeItem(stats.width),
         statistic: str_(UIStrings.statisticDOMWidth),
         value: stats.width.max,
       },
diff --git a/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js b/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js
index d55e7bcdab33..7b62c616f38e 100644
--- a/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js
+++ b/lighthouse-core/audits/dobetterweb/external-anchors-use-rel-noopener.js
@@ -69,13 +69,7 @@ class ExternalAnchorsUseRelNoopenerAudit extends Audit {
       })
       .map(anchor => {
         return {
-          node: {
-            type: /** @type {'node'} */ ('node'),
-            path: anchor.node.devtoolsNodePath || '',
-            selector: anchor.node.selector || '',
-            nodeLabel: anchor.node.nodeLabel || '',
-            snippet: anchor.node.snippet || '',
-          },
+          node: Audit.makeNodeItem(anchor.node),
           href: anchor.href || 'Unknown',
           target: anchor.target || '',
           rel: anchor.rel || '',
diff --git a/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js b/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js
index c160198bc853..fb08ef99071a 100644
--- a/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js
+++ b/lighthouse-core/audits/dobetterweb/password-inputs-can-be-pasted-into.js
@@ -43,13 +43,10 @@ class PasswordInputsCanBePastedIntoAudit extends Audit {
 
     /** @type {LH.Audit.Details.Table['items']} */
     const items = [];
+
     passwordInputsWithPreventedPaste.forEach(input => {
       items.push({
-        node: {
-          type: /** @type {'node'} */ ('node'),
-          snippet: input.node.snippet,
-          path: input.node.devtoolsNodePath,
-        },
+        node: Audit.makeNodeItem(input.node),
       });
     });
 
diff --git a/lighthouse-core/audits/largest-contentful-paint-element.js b/lighthouse-core/audits/largest-contentful-paint-element.js
index 9f644617d6fc..c2b1642c8a95 100644
--- a/lighthouse-core/audits/largest-contentful-paint-element.js
+++ b/lighthouse-core/audits/largest-contentful-paint-element.js
@@ -42,15 +42,7 @@ class LargestContentfulPaintElement extends Audit {
     const lcpElementDetails = [];
     if (lcpElement) {
       lcpElementDetails.push({
-        node: {
-          type: /** @type {'node'} */ ('node'),
-          lhId: lcpElement.node.lhId,
-          path: lcpElement.node.devtoolsNodePath,
-          selector: lcpElement.node.selector,
-          nodeLabel: lcpElement.node.nodeLabel,
-          snippet: lcpElement.node.snippet,
-          boundingRect: lcpElement.node.boundingRect,
-        },
+        node: Audit.makeNodeItem(lcpElement.node),
       });
     }
 
diff --git a/lighthouse-core/audits/layout-shift-elements.js b/lighthouse-core/audits/layout-shift-elements.js
index 1ca937bb779c..6d3f4f9bde5b 100644
--- a/lighthouse-core/audits/layout-shift-elements.js
+++ b/lighthouse-core/audits/layout-shift-elements.js
@@ -43,15 +43,7 @@ class LayoutShiftElements extends Audit {
 
     const clsElementData = clsElements.map(element => {
       return {
-        node: {
-          type: /** @type {'node'} */ ('node'),
-          lhId: element.node.lhId,
-          path: element.node.devtoolsNodePath,
-          selector: element.node.selector,
-          nodeLabel: element.node.nodeLabel,
-          snippet: element.node.snippet,
-          boundingRect: element.node.boundingRect,
-        },
+        node: Audit.makeNodeItem(element.node),
         score: element.score,
       };
     });
diff --git a/lighthouse-core/audits/non-composited-animations.js b/lighthouse-core/audits/non-composited-animations.js
index f59f34b6f16c..b0691e4ed273 100644
--- a/lighthouse-core/audits/non-composited-animations.js
+++ b/lighthouse-core/audits/non-composited-animations.js
@@ -129,19 +129,11 @@ class NonCompositedAnimations extends Audit {
       };
     }
 
-    /** @type LH.Audit.Details.TableItem[] */
+    /** @type {LH.Audit.Details.TableItem[]} */
     const results = [];
     let shouldAddAnimationNameColumn = false;
     artifacts.TraceElements.forEach(element => {
       if (element.traceEventType !== 'animation') return;
-      /** @type LH.Audit.Details.NodeValue */
-      const node = {
-        type: 'node',
-        path: element.node.devtoolsNodePath,
-        selector: element.node.selector,
-        nodeLabel: element.node.nodeLabel,
-        snippet: element.node.snippet,
-      };
 
       const animations = element.animations || [];
       const animationReasons = new Map();
@@ -171,7 +163,7 @@ class NonCompositedAnimations extends Audit {
       }
 
       results.push({
-        node,
+        node: Audit.makeNodeItem(element.node),
         subItems: {
           type: 'subitems',
           items: allFailureReasons,
diff --git a/lighthouse-core/audits/seo/crawlable-anchors.js b/lighthouse-core/audits/seo/crawlable-anchors.js
index 9a721a18e4fd..53cb3760e0bc 100644
--- a/lighthouse-core/audits/seo/crawlable-anchors.js
+++ b/lighthouse-core/audits/seo/crawlable-anchors.js
@@ -81,13 +81,7 @@ class CrawlableAnchors extends Audit {
     /** @type {LH.Audit.Details.Table['items']} */
     const itemsToDisplay = failingAnchors.map(anchor => {
       return {
-        node: {
-          type: 'node',
-          path: anchor.node.devtoolsNodePath || '',
-          selector: anchor.node.selector || '',
-          nodeLabel: anchor.node.nodeLabel || '',
-          snippet: anchor.node.snippet || '',
-        },
+        node: Audit.makeNodeItem(anchor.node),
       };
     });
 
diff --git a/lighthouse-core/audits/seo/plugins.js b/lighthouse-core/audits/seo/plugins.js
index 5e1c275fe3ea..6b2d2c338a92 100644
--- a/lighthouse-core/audits/seo/plugins.js
+++ b/lighthouse-core/audits/seo/plugins.js
@@ -129,26 +129,8 @@ class Plugins extends Audit {
         return failingParams.length > 0;
       })
       .map(plugin => {
-        const tagName = plugin.tagName.toLowerCase();
-        /** @type {Array<keyof LH.Artifacts.EmbeddedContentInfo>} */
-        const attributeKeys = ['src', 'data', 'code', 'type'];
-        const attributes = attributeKeys
-          .reduce((result, attr) => {
-            if (plugin[attr] !== null) {
-              result += ` ${attr}="${plugin[attr]}"`;
-            }
-            return result;
-          }, '');
-        const params = plugin.params
-          .filter(param => SOURCE_PARAMS.has(param.name.trim().toLowerCase()))
-          .map(param => `<param ${param.name}="${param.value}" />`)
-          .join('');
-
         return {
-          source: {
-            type: /** @type {'node'} */ ('node'),
-            snippet: `<${tagName}${attributes}>${params}</${tagName}>`,
-          },
+          source: Audit.makeNodeItem(plugin.node),
         };
       });
 
diff --git a/lighthouse-core/audits/seo/tap-targets.js b/lighthouse-core/audits/seo/tap-targets.js
index 3125dde3deac..cda6b5ffb1d8 100644
--- a/lighthouse-core/audits/seo/tap-targets.js
+++ b/lighthouse-core/audits/seo/tap-targets.js
@@ -248,13 +248,8 @@ function targetToTableNode(target) {
   const boundingRect = getBoundingRect(target.clientRects);
 
   return {
-    type: 'node',
-    lhId: target.node.lhId,
-    snippet: target.node.snippet,
-    path: target.node.devtoolsNodePath,
-    selector: target.node.selector,
+    ...Audit.makeNodeItem(target.node),
     boundingRect,
-    nodeLabel: target.node.nodeLabel,
   };
 }
 
diff --git a/lighthouse-core/audits/unsized-images.js b/lighthouse-core/audits/unsized-images.js
index b7bd308fbca8..a953765cbfaa 100644
--- a/lighthouse-core/audits/unsized-images.js
+++ b/lighthouse-core/audits/unsized-images.js
@@ -96,15 +96,10 @@ class UnsizedImages extends Audit {
 
       if (isFixedImage || UnsizedImages.isSizedImage(image)) continue;
       const url = URL.elideDataURI(image.src);
+
       unsizedImages.push({
         url,
-        node: {
-          type: /** @type {'node'} */ ('node'),
-          path: image.node.devtoolsNodePath,
-          selector: image.node.selector,
-          nodeLabel: image.node.nodeLabel,
-          snippet: image.node.snippet,
-        },
+        node: Audit.makeNodeItem(image.node),
       });
     }
 
diff --git a/lighthouse-core/gather/gatherers/seo/embedded-content.js b/lighthouse-core/gather/gatherers/seo/embedded-content.js
index a4554d40d672..bbd64a1aa660 100644
--- a/lighthouse-core/gather/gatherers/seo/embedded-content.js
+++ b/lighthouse-core/gather/gatherers/seo/embedded-content.js
@@ -5,16 +5,24 @@
  */
 'use strict';
 
-/* globals getElementsInDocument */
+/* globals getElementsInDocument getNodeDetails */
 
 const Gatherer = require('../gatherer.js');
 const pageFunctions = require('../../../lib/page-functions.js');
 
+/**
+ * @return {LH.Artifacts.EmbeddedContentInfo[]}
+ */
 function getEmbeddedContent() {
+  const functions = /** @type {typeof pageFunctions} */ ({
+    // @ts-expect-error - getElementsInDocument put into scope via stringification
+    getElementsInDocument,
+    // @ts-expect-error - getNodeDetails put into scope via stringification
+    getNodeDetails,
+  });
+
   const selector = 'object, embed, applet';
-  /** @type {HTMLElement[]} */
-  // @ts-expect-error - getElementsInDocument put into scope via stringification
-  const elements = getElementsInDocument(selector);
+  const elements = functions.getElementsInDocument(selector);
   return elements
     .map(node => ({
       tagName: node.tagName,
@@ -28,6 +36,7 @@ function getEmbeddedContent() {
           name: el.getAttribute('name') || '',
           value: el.getAttribute('value') || '',
         })),
+      node: functions.getNodeDetails(node),
     }));
 }
 
@@ -39,7 +48,10 @@ class EmbeddedContent extends Gatherer {
   afterPass(passContext) {
     return passContext.driver.evaluate(getEmbeddedContent, {
       args: [],
-      deps: [pageFunctions.getElementsInDocument],
+      deps: [
+        pageFunctions.getElementsInDocument,
+        pageFunctions.getNodeDetailsString,
+      ],
     });
   }
 }
diff --git a/lighthouse-core/lib/page-functions.js b/lighthouse-core/lib/page-functions.js
index 8c9d62234b24..66dbc6feec8f 100644
--- a/lighthouse-core/lib/page-functions.js
+++ b/lighthouse-core/lib/page-functions.js
@@ -371,7 +371,7 @@ function isPositionFixed(element) {
  * strings like the innerText or alt attribute.
  * Falls back to the tagName if no useful label is found.
  * @param {Element} node
- * @return {string|null}
+ * @return {string}
  */
 /* istanbul ignore next */
 function getNodeLabel(node) {
@@ -461,8 +461,9 @@ function wrapRequestIdleCallback(cpuSlowdownMultiplier) {
 
 /**
  * @param {HTMLElement} element
+ * @return {LH.Artifacts.NodeDetails}
  */
-function getNodeDetailsImpl(element) {
+function getNodeDetails(element) {
   // This bookkeeping is for the FullPageScreenshot gatherer.
   if (!window.__lighthouseNodesDontTouchOrAllVarianceGoesAway) {
     window.__lighthouseNodesDontTouchOrAllVarianceGoesAway = new Map();
@@ -507,8 +508,7 @@ const getNodeDetailsString = `function getNodeDetails(element) {
   ${getBoundingClientRect.toString()};
   ${getOuterHTMLSnippet.toString()};
   ${getNodeLabel.toString()};
-  ${getNodeDetailsImpl.toString()};
-  return getNodeDetailsImpl(element);
+  return (${getNodeDetails.toString()})(element);
 }`;
 
 module.exports = {
@@ -522,6 +522,7 @@ module.exports = {
   computeBenchmarkIndex: computeBenchmarkIndex,
   computeBenchmarkIndexString: computeBenchmarkIndex.toString(),
   getNodeDetailsString,
+  getNodeDetails,
   getNodePathString: getNodePath.toString(),
   getNodeSelectorString: getNodeSelector.toString(),
   getNodePath,
diff --git a/lighthouse-core/test/audits/autocomplete-test.js b/lighthouse-core/test/audits/autocomplete-test.js
index 76ebba4156d2..26f75f16b397 100644
--- a/lighthouse-core/test/audits/autocomplete-test.js
+++ b/lighthouse-core/test/audits/autocomplete-test.js
@@ -69,7 +69,7 @@ describe('Best Practices: autocomplete audit', () => {
     ];
     const {score, details} = Autocomplete.audit(artifacts);
     expect(score).toBe(0);
-    expect(details.items).toStrictEqual(expectedItems);
+    expect(details.items).toMatchObject(expectedItems);
   });
 
   it('fails when an there is an invalid autocomplete attribute set', () => {
@@ -110,22 +110,22 @@ describe('Best Practices: autocomplete audit', () => {
     };
     const {score, details} = Autocomplete.audit(artifacts);
     expect(score).toBe(0);
-    expect(details.items).toStrictEqual([
+    expect(details.items).toMatchObject([
       {
         current: 'namez',
         node: {
+          type: 'node',
           nodeLabel: 'input',
           snippet: '<input type="text" name="name_cc" autocomplete="namez">',
-          type: 'node',
         },
         suggestion: expect.toBeDisplayString('Requires manual review'),
       },
       {
         current: 'ccc-num',
         node: {
+          type: 'node',
           nodeLabel: 'input',
           snippet: '<input type="text" name="CCNo" autocomplete="ccc-num">',
-          type: 'node',
         },
         suggestion: 'cc-number',
       },
@@ -310,27 +310,27 @@ describe('Best Practices: autocomplete audit', () => {
       {
         current: 'shipping section-red cc-name',
         node: {
+          type: 'node',
           nodeLabel: 'textarea',
           // eslint-disable-next-line max-len
           snippet: '<textarea type="text" name="name_cc2" autocomplete="shipping section-red cc-name">',
-          type: 'node',
         },
         suggestion: 'Review order of tokens',
       },
       {
         current: 'shipping section-red mobile tel',
         node: {
+          type: 'node',
           nodeLabel: 'input',
           // eslint-disable-next-line max-len
           snippet: '<input type="text" name="CCNo2" autocomplete="shipping section-red mobile tel">',
-          type: 'node',
         },
         suggestion: 'Review order of tokens',
       },
     ];
     const {score, details} = Autocomplete.audit(artifacts);
     expect(score).toBe(0);
-    expect(details.items).toStrictEqual(expectedItems);
+    expect(details.items).toMatchObject(expectedItems);
   });
 
   it('creates a warning when there is an invalid attribute set', () => {
@@ -449,7 +449,7 @@ describe('Autocomplete Audit: Check Attribute Validity', () => {
     };
     const output = Autocomplete.checkAttributeValidity(input);
     const expectedOutput = {hasValidTokens: false};
-    expect(output).toStrictEqual(expectedOutput);
+    expect(output).toMatchObject(expectedOutput);
   });
 
   it('returns true if attribute has optional "section=" token', () => {
@@ -468,7 +468,7 @@ describe('Autocomplete Audit: Check Attribute Validity', () => {
     };
     const output = Autocomplete.checkAttributeValidity(input);
     const expectedOutput = {hasValidTokens: true, isValidOrder: true};
-    expect(output).toStrictEqual(expectedOutput);
+    expect(output).toMatchObject(expectedOutput);
   });
 
   it('returns true if all tokens are valid and in order', () => {
@@ -487,7 +487,7 @@ describe('Autocomplete Audit: Check Attribute Validity', () => {
     };
     const output = Autocomplete.checkAttributeValidity(input);
     const expectedOutput = {hasValidTokens: true, isValidOrder: true};
-    expect(output).toStrictEqual(expectedOutput);
+    expect(output).toMatchObject(expectedOutput);
   });
 
   it(`returns true for hasValidTokens and false for isValidOrder
@@ -507,7 +507,7 @@ describe('Autocomplete Audit: Check Attribute Validity', () => {
     };
     const output = Autocomplete.checkAttributeValidity(input);
     const expectedOutput = {hasValidTokens: true, isValidOrder: false};
-    expect(output).toStrictEqual(expectedOutput);
+    expect(output).toMatchObject(expectedOutput);
   });
 
   it('returns false for invalid tokens', () => {
@@ -526,6 +526,6 @@ describe('Autocomplete Audit: Check Attribute Validity', () => {
     };
     const output = Autocomplete.checkAttributeValidity(input);
     const expectedOutput = {hasValidTokens: false};
-    expect(output).toStrictEqual(expectedOutput);
+    expect(output).toMatchObject(expectedOutput);
   });
 });
diff --git a/lighthouse-core/test/audits/seo/plugins-test.js b/lighthouse-core/test/audits/seo/plugins-test.js
index f54a74170a8a..19e04db84260 100644
--- a/lighthouse-core/test/audits/seo/plugins-test.js
+++ b/lighthouse-core/test/audits/seo/plugins-test.js
@@ -16,31 +16,53 @@ describe('SEO: Avoids plugins', () => {
       [{
         tagName: 'APPLET',
         params: [],
+        node: {},
       }],
       [{
         tagName: 'OBJECT',
         type: 'application/x-shockwave-flash',
         params: [],
+        node: {
+          lhId: 'page-11-OBJECT',
+          // eslint-disable-next-line max-len
+          devtoolsNodePath: '1,HTML,1,BODY,1,DIV,0,ARTICLE,12,FORM,0,DIV,1,DIV,1,DIV,0,DIV,0,OBJECT',
+          selector: 'div.code-group > div.result-pane > div.result > object',
+          boundingRect: {
+            top: 1173,
+            bottom: 1268,
+            left: 27,
+            right: 377,
+            width: 350,
+            height: 95,
+          },
+          // eslint-disable-next-line max-len
+          snippet: '<object type="application/x-shockwave-flash" data="/web_design/paris_vegas.swf" width="350" height="95">',
+          nodeLabel: 'object',
+        },
       }],
       [{
         tagName: 'EMBED',
         type: 'application/x-java-applet;jpi-version=1.4',
         params: [],
+        node: {},
       }],
       [{
         tagName: 'OBJECT',
         type: 'application/x-silverlight-2',
         params: [],
+        node: {},
       }],
       [{
         tagName: 'OBJECT',
         data: 'https://example.com/movie_name.swf?uid=123',
         params: [],
+        node: {},
       }],
       [{
         tagName: 'EMBED',
         src: '/path/to/movie_name.latest.swf',
         params: [],
+        node: {},
       }],
       [{
         tagName: 'OBJECT',
@@ -48,12 +70,14 @@ describe('SEO: Avoids plugins', () => {
           {name: 'quality', value: 'low'},
           {name: 'movie', value: 'movie.swf?id=123'},
         ],
+        node: {},
       }],
       [{
         tagName: 'OBJECT',
         params: [
           {name: 'code', value: '../HelloWorld.class'},
         ],
+        node: {},
       }],
     ];
 
@@ -75,15 +99,18 @@ describe('SEO: Avoids plugins', () => {
           tagName: 'EMBED',
           type: 'application/x-java-applet;jpi-version=1.4',
           params: [],
+          node: {},
         },
         {
           tagName: 'OBJECT',
           type: 'application/x-silverlight-2',
           params: [],
+          node: {},
         },
         {
           tagName: 'APPLET',
           params: [],
+          node: {},
         },
       ],
     };
@@ -110,17 +137,20 @@ describe('SEO: Avoids plugins', () => {
           type: 'image/svg+xml',
           data: 'https://example.com/test.svg',
           params: [],
+          node: {},
         },
         {
           tagName: 'OBJECT',
           data: 'https://example.com',
           params: [],
+          node: {},
         },
         {
           tagName: 'EMBED',
           type: 'video/quicktime',
           src: 'movie.mov',
           params: [],
+          node: {},
         },
         {
           tagName: 'OBJECT',
@@ -131,6 +161,7 @@ describe('SEO: Avoids plugins', () => {
             name: 'movie',
             value: 'http://www.youtube.com/v/example',
           }],
+          node: {},
         },
       ],
     };
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index a7c90d0b4532..15d0cca8de55 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -1843,8 +1843,6 @@
               "lhId": "page-1-IMG",
               "path": "3,HTML,1,BODY,14,IMG",
               "selector": "body > img",
-              "nodeLabel": "img",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?iar2\" width=\"120\" height=\"80\">",
               "boundingRect": {
                 "top": 574,
                 "bottom": 654,
@@ -1852,7 +1850,9 @@
                 "right": 252,
                 "width": 120,
                 "height": 80
-              }
+              },
+              "snippet": "<img src=\"lighthouse-480x318.jpg?iar2\" width=\"120\" height=\"80\">",
+              "nodeLabel": "img"
             }
           }
         ]
@@ -1886,8 +1886,8 @@
               "type": "node",
               "path": "1,HTML,1,BODY,2,DIV,0,DIV,0,DIV,0,ARTICLE,1,DIV,3,H5",
               "selector": "div.blog-index > article > div.entry-content > h5",
-              "nodeLabel": "Debugging Node.js with Chrome DevTools",
-              "snippet": "<h5>"
+              "snippet": "<h5>",
+              "nodeLabel": "Debugging Node.js with Chrome DevTools"
             }
           },
           {
@@ -1895,8 +1895,8 @@
               "type": "node",
               "path": "1,HTML,1,BODY,2,DIV,0,DIV,0,DIV,0,ARTICLE,1,DIV,4,P",
               "selector": "div.blog-index > article > div.entry-content > p",
-              "nodeLabel": "The canonical guide to using the Chrome DevTools UI for debugging Node.js. It d…",
-              "snippet": "<p>"
+              "snippet": "<p>",
+              "nodeLabel": "The canonical guide to using the Chrome DevTools UI for debugging Node.js. It d…"
             }
           },
           {
@@ -1904,8 +1904,8 @@
               "type": "node",
               "path": "1,HTML,1,BODY,2,DIV,0,DIV,0,DIV,0,ARTICLE,1,DIV,5,HR",
               "selector": "div.blog-index > article > div.entry-content > hr",
-              "nodeLabel": "hr",
-              "snippet": "<hr>"
+              "snippet": "<hr>",
+              "nodeLabel": "hr"
             }
           },
           {
@@ -1913,8 +1913,8 @@
               "type": "node",
               "path": "1,HTML,1,BODY,2,DIV,0,DIV,0,DIV,0,ARTICLE,1,DIV,6,P",
               "selector": "div.blog-index > article > div.entry-content > p",
-              "nodeLabel": "Aside from that, I’ve been busy working on Lighthouse, performance metrics, too…",
-              "snippet": "<p>"
+              "snippet": "<p>",
+              "nodeLabel": "Aside from that, I’ve been busy working on Lighthouse, performance metrics, too…"
             }
           }
         ]
@@ -2035,8 +2035,8 @@
               "type": "node",
               "path": "1,HTML,1,BODY,0,DIV",
               "selector": "body > div#animated-boi",
-              "nodeLabel": "div",
-              "snippet": "<div id=\"animated-boi\">"
+              "snippet": "<div id=\"animated-boi\">",
+              "nodeLabel": "div"
             },
             "subItems": {
               "type": "subitems",
@@ -2088,20 +2088,38 @@
             "url": "blob:http://localhost:10200/822c70a0-b912-41c7-9a21-56c3d309e75b",
             "node": {
               "type": "node",
+              "lhId": "page-7-IMG",
               "path": "3,HTML,1,BODY,63,IMG",
               "selector": "body > img",
-              "nodeLabel": "img",
-              "snippet": "<img src=\"blob:http://localhost:10200/822c70a0-b912-41c7-9a21-56c3d309e75b\">"
+              "boundingRect": {
+                "top": 1295,
+                "bottom": 1311,
+                "left": 322,
+                "right": 338,
+                "width": 16,
+                "height": 16
+              },
+              "snippet": "<img src=\"blob:http://localhost:10200/822c70a0-b912-41c7-9a21-56c3d309e75b\">",
+              "nodeLabel": "img"
             }
           },
           {
             "url": "filesystem:http://localhost:10200/temporary/empty-0.8423185960902964.png",
             "node": {
               "type": "node",
+              "lhId": "page-8-IMG",
               "path": "3,HTML,1,BODY,72,IMG",
               "selector": "body > img",
-              "nodeLabel": "img",
-              "snippet": "<img src=\"filesystem:http://localhost:10200/temporary/empty-0.8423185960902964.png\">"
+              "boundingRect": {
+                "top": 1317,
+                "bottom": 1333,
+                "left": 8,
+                "right": 24,
+                "width": 16,
+                "height": 16
+              },
+              "snippet": "<img src=\"filesystem:http://localhost:10200/temporary/empty-0.8423185960902964.png\">",
+              "nodeLabel": "img"
             }
           }
         ]
@@ -2720,9 +2738,8 @@
           {
             "node": {
               "type": "node",
-              "selector": "body > div > h2",
               "path": "3,HTML,1,BODY,7,DIV,0,H2",
-              "snippet": "<h2>",
+              "selector": "body > div > h2",
               "boundingRect": {
                 "top": 336,
                 "bottom": 364,
@@ -2731,16 +2748,16 @@
                 "width": 344,
                 "height": 28
               },
-              "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt (24px), font weight: bold). Expected contrast ratio of 3:1",
-              "nodeLabel": "Do better web tester page"
+              "snippet": "<h2>",
+              "nodeLabel": "Do better web tester page",
+              "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt (24px), font weight: bold). Expected contrast ratio of 3:1"
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > div > span",
               "path": "3,HTML,1,BODY,7,DIV,1,SPAN",
-              "snippet": "<span>",
+              "selector": "body > div > span",
               "boundingRect": {
                 "top": 384,
                 "bottom": 402,
@@ -2749,8 +2766,9 @@
                 "width": 57,
                 "height": 18
               },
-              "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
-              "nodeLabel": "Hi there!"
+              "snippet": "<span>",
+              "nodeLabel": "Hi there!",
+              "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
             }
           }
         ],
@@ -2855,9 +2873,8 @@
           {
             "node": {
               "type": "node",
-              "selector": "html",
               "path": "3,HTML",
-              "snippet": "<html manifest=\"clock.appcache\">",
+              "selector": "html",
               "boundingRect": {
                 "top": 0,
                 "bottom": 1345,
@@ -2866,8 +2883,9 @@
                 "width": 360,
                 "height": 1345
               },
-              "explanation": "Fix any of the following:\n  The <html> element does not have a lang attribute",
-              "nodeLabel": "html"
+              "snippet": "<html manifest=\"clock.appcache\">",
+              "nodeLabel": "html",
+              "explanation": "Fix any of the following:\n  The <html> element does not have a lang attribute"
             }
           }
         ],
@@ -2908,9 +2926,8 @@
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,12,IMG",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?iar1\" width=\"120\" height=\"15\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 639,
                 "bottom": 654,
@@ -2919,16 +2936,16 @@
                 "width": 120,
                 "height": 15
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-480x318.jpg?iar1\" width=\"120\" height=\"15\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,14,IMG",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?iar2\" width=\"120\" height=\"80\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 574,
                 "bottom": 654,
@@ -2937,16 +2954,16 @@
                 "width": 120,
                 "height": 80
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-480x318.jpg?iar2\" width=\"120\" height=\"80\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,16,IMG",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?isr1\" width=\"4800\" height=\"3180\" style=\"position: absolute;\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 574,
                 "bottom": 3754,
@@ -2955,16 +2972,16 @@
                 "width": 4800,
                 "height": 3180
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-480x318.jpg?isr1\" width=\"4800\" height=\"3180\" style=\"position: absolute;\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,18,IMG",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?isr2\" width=\"120\" height=\"80\" style=\"position: absolute;\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 574,
                 "bottom": 654,
@@ -2973,16 +2990,16 @@
                 "width": 120,
                 "height": 80
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-480x318.jpg?isr2\" width=\"120\" height=\"80\" style=\"position: absolute;\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,20,IMG",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?isr3\" width=\"960\" height=\"636\" style=\"image-rendering: pixelated; position: absolute;\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 574,
                 "bottom": 1210,
@@ -2991,16 +3008,16 @@
                 "width": 960,
                 "height": 636
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-480x318.jpg?isr3\" width=\"960\" height=\"636\" style=\"image-rendering: pixelated; position: absolute;\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,22,IMG",
-              "snippet": "<img src=\"lighthouse-480x318.jpg?isr4\" srcset=\"lighthouse-480x318.jpg 2x\" width=\"960\" height=\"636\" style=\"position: absolute;\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 574,
                 "bottom": 1210,
@@ -3009,16 +3026,16 @@
                 "width": 960,
                 "height": 636
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-480x318.jpg?isr4\" srcset=\"lighthouse-480x318.jpg 2x\" width=\"960\" height=\"636\" style=\"position: absolute;\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,24,IMG",
-              "snippet": "<img src=\"lighthouse-rotating.gif\" width=\"811\" height=\"462\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 658,
                 "bottom": 1120,
@@ -3027,16 +3044,16 @@
                 "width": 811,
                 "height": 462
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"lighthouse-rotating.gif\" width=\"811\" height=\"462\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,63,IMG",
-              "snippet": "<img src=\"blob:http://localhost:10200/75859e89-fbad-4471-b196-9304adbb874a\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 1295,
                 "bottom": 1311,
@@ -3045,16 +3062,16 @@
                 "width": 16,
                 "height": 16
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"blob:http://localhost:10200/75859e89-fbad-4471-b196-9304adbb874a\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > img",
               "path": "3,HTML,1,BODY,72,IMG",
-              "snippet": "<img src=\"filesystem:http://localhost:10200/temporary/empty-0.34660357368794004.png\">",
+              "selector": "body > img",
               "boundingRect": {
                 "top": 1317,
                 "bottom": 1333,
@@ -3063,8 +3080,9 @@
                 "width": 16,
                 "height": 16
               },
-              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "img"
+              "snippet": "<img src=\"filesystem:http://localhost:10200/temporary/empty-0.34660357368794004.png\">",
+              "nodeLabel": "img",
+              "explanation": "Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           }
         ],
@@ -3107,9 +3125,8 @@
           {
             "node": {
               "type": "node",
-              "selector": "body > input",
               "path": "3,HTML,1,BODY,58,INPUT",
-              "snippet": "<input type=\"password\" onpaste=\"event.preventDefault();\">",
+              "selector": "body > input",
               "boundingRect": {
                 "top": 1274,
                 "bottom": 1295,
@@ -3118,16 +3135,16 @@
                 "width": 153,
                 "height": 21
               },
-              "explanation": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty",
-              "nodeLabel": "input"
+              "snippet": "<input type=\"password\" onpaste=\"event.preventDefault();\">",
+              "nodeLabel": "input",
+              "explanation": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty"
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > input",
               "path": "3,HTML,1,BODY,60,INPUT",
-              "snippet": "<input type=\"password\">",
+              "selector": "body > input",
               "boundingRect": {
                 "top": 1296,
                 "bottom": 1317,
@@ -3136,16 +3153,16 @@
                 "width": 153,
                 "height": 21
               },
-              "explanation": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty",
-              "nodeLabel": "input"
+              "snippet": "<input type=\"password\">",
+              "nodeLabel": "input",
+              "explanation": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty"
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > input",
               "path": "3,HTML,1,BODY,62,INPUT",
-              "snippet": "<input type=\"password\" onpaste=\"return false;\">",
+              "selector": "body > input",
               "boundingRect": {
                 "top": 1296,
                 "bottom": 1317,
@@ -3154,8 +3171,9 @@
                 "width": 153,
                 "height": 21
               },
-              "explanation": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty",
-              "nodeLabel": "input"
+              "snippet": "<input type=\"password\" onpaste=\"return false;\">",
+              "nodeLabel": "input",
+              "explanation": "Fix any of the following:\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Form element does not have an implicit (wrapped) <label>\n  Form element does not have an explicit <label>\n  Element has no title attribute or the title attribute is empty"
             }
           }
         ],
@@ -3192,9 +3210,8 @@
           {
             "node": {
               "type": "node",
-              "selector": "body > a",
               "path": "3,HTML,1,BODY,54,A",
-              "snippet": "<a href=\"javascript:void(0)\" target=\"_blank\">",
+              "selector": "body > a",
               "boundingRect": {
                 "top": 1275,
                 "bottom": 1293,
@@ -3203,16 +3220,16 @@
                 "width": 0,
                 "height": 18
               },
-              "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "a"
+              "snippet": "<a href=\"javascript:void(0)\" target=\"_blank\">",
+              "nodeLabel": "a",
+              "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > a",
               "path": "3,HTML,1,BODY,56,A",
-              "snippet": "<a href=\"mailto:inbox@email.com\" target=\"_blank\">",
+              "selector": "body > a",
               "boundingRect": {
                 "top": 1275,
                 "bottom": 1293,
@@ -3221,8 +3238,9 @@
                 "width": 0,
                 "height": 18
               },
-              "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "a"
+              "snippet": "<a href=\"mailto:inbox@email.com\" target=\"_blank\">",
+              "nodeLabel": "a",
+              "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           }
         ],
@@ -3292,9 +3310,8 @@
           {
             "node": {
               "type": "node",
-              "selector": "body > object#5934a",
               "path": "3,HTML,1,BODY,2,OBJECT",
-              "snippet": "<object id=\"5934a\">",
+              "selector": "body > object#5934a",
               "boundingRect": {
                 "top": 8,
                 "bottom": 158,
@@ -3303,16 +3320,16 @@
                 "width": 300,
                 "height": 150
               },
-              "explanation": "Fix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "object"
+              "snippet": "<object id=\"5934a\">",
+              "nodeLabel": "object",
+              "explanation": "Fix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           },
           {
             "node": {
               "type": "node",
-              "selector": "body > object#5934b",
               "path": "3,HTML,1,BODY,3,OBJECT",
-              "snippet": "<object id=\"5934b\">",
+              "selector": "body > object#5934b",
               "boundingRect": {
                 "top": 162,
                 "bottom": 312,
@@ -3321,8 +3338,9 @@
                 "width": 300,
                 "height": 150
               },
-              "explanation": "Fix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\"",
-              "nodeLabel": "object"
+              "snippet": "<object id=\"5934b\">",
+              "nodeLabel": "object",
+              "explanation": "Fix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute or the title attribute is empty\n  Element's default semantics were not overridden with role=\"presentation\"\n  Element's default semantics were not overridden with role=\"none\""
             }
           }
         ],
@@ -4077,8 +4095,16 @@
             "node": {
               "type": "node",
               "path": "3,HTML,1,BODY,7,DIV,3,svg,0,title",
-              "snippet": "<title id=\"social-facebook-5\">",
               "selector": "body > div > svg.social-facebook > title#social-facebook-5",
+              "boundingRect": {
+                "top": 0,
+                "bottom": 0,
+                "left": 0,
+                "right": 0,
+                "width": 0,
+                "height": 0
+              },
+              "snippet": "<title id=\"social-facebook-5\">",
               "nodeLabel": "title"
             },
             "statistic": "Maximum DOM Depth",
@@ -4088,8 +4114,16 @@
             "node": {
               "type": "node",
               "path": "3,HTML,1,BODY,4,DIV,a,#document-fragment",
-              "snippet": "<div id=\"shadow-root-container\">",
               "selector": "body > div#shadow-root-container",
+              "boundingRect": {
+                "top": 316,
+                "bottom": 316,
+                "left": 8,
+                "right": 352,
+                "width": 344,
+                "height": 0
+              },
+              "snippet": "<div id=\"shadow-root-container\">",
               "nodeLabel": "div"
             },
             "statistic": "Maximum Child Elements",
@@ -4122,8 +4156,16 @@
               "type": "node",
               "path": "3,HTML,1,BODY,36,A",
               "selector": "body > a",
-              "nodeLabel": "external link",
-              "snippet": "<a href=\"https://www.google.com/\" target=\"_blank\">"
+              "boundingRect": {
+                "top": 1166,
+                "bottom": 1184,
+                "left": 91,
+                "right": 171,
+                "width": 80,
+                "height": 18
+              },
+              "snippet": "<a href=\"https://www.google.com/\" target=\"_blank\">",
+              "nodeLabel": "external link"
             },
             "href": "https://www.google.com/",
             "target": "_blank",
@@ -4135,8 +4177,16 @@
               "type": "node",
               "path": "3,HTML,1,BODY,38,A",
               "selector": "body > a",
-              "nodeLabel": "external link",
-              "snippet": "<a target=\"_blank\">"
+              "boundingRect": {
+                "top": 1166,
+                "bottom": 1184,
+                "left": 175,
+                "right": 255,
+                "width": 80,
+                "height": 18
+              },
+              "snippet": "<a target=\"_blank\">",
+              "nodeLabel": "external link"
             },
             "href": "Unknown",
             "target": "_blank",
@@ -4148,8 +4198,16 @@
               "type": "node",
               "path": "3,HTML,1,BODY,40,A",
               "selector": "body > a",
-              "nodeLabel": "external link",
-              "snippet": "<a href=\"https://www.google.com/\" target=\"_blank\" rel=\"nofollow\">"
+              "boundingRect": {
+                "top": 1166,
+                "bottom": 1184,
+                "left": 259,
+                "right": 340,
+                "width": 80,
+                "height": 18
+              },
+              "snippet": "<a href=\"https://www.google.com/\" target=\"_blank\" rel=\"nofollow\">",
+              "nodeLabel": "external link"
             },
             "href": "https://www.google.com/",
             "target": "_blank",
@@ -4374,15 +4432,35 @@
           {
             "node": {
               "type": "node",
+              "path": "3,HTML,1,BODY,58,INPUT",
+              "selector": "body > input",
+              "boundingRect": {
+                "top": 1274,
+                "bottom": 1295,
+                "left": 192,
+                "right": 345,
+                "width": 153,
+                "height": 21
+              },
               "snippet": "<input type=\"password\" onpaste=\"event.preventDefault();\">",
-              "path": "3,HTML,1,BODY,58,INPUT"
+              "nodeLabel": "input"
             }
           },
           {
             "node": {
               "type": "node",
+              "path": "3,HTML,1,BODY,62,INPUT",
+              "selector": "body > input",
+              "boundingRect": {
+                "top": 1296,
+                "bottom": 1317,
+                "left": 165,
+                "right": 318,
+                "width": 153,
+                "height": 21
+              },
               "snippet": "<input type=\"password\" onpaste=\"return false;\">",
-              "path": "3,HTML,1,BODY,62,INPUT"
+              "nodeLabel": "input"
             }
           }
         ]
@@ -4596,8 +4674,16 @@
               "type": "node",
               "path": "3,HTML,1,BODY,38,A",
               "selector": "body > a",
-              "nodeLabel": "external link",
-              "snippet": "<a target=\"_blank\">"
+              "boundingRect": {
+                "top": 1166,
+                "bottom": 1184,
+                "left": 175,
+                "right": 255,
+                "width": 80,
+                "height": 18
+              },
+              "snippet": "<a target=\"_blank\">",
+              "nodeLabel": "external link"
             }
           },
           {
@@ -4605,8 +4691,16 @@
               "type": "node",
               "path": "3,HTML,1,BODY,54,A",
               "selector": "body > a",
-              "nodeLabel": "a",
-              "snippet": "<a href=\"javascript:void(0)\" target=\"_blank\">"
+              "boundingRect": {
+                "top": 1275,
+                "bottom": 1293,
+                "left": 192,
+                "right": 192,
+                "width": 0,
+                "height": 18
+              },
+              "snippet": "<a href=\"javascript:void(0)\" target=\"_blank\">",
+              "nodeLabel": "a"
             }
           }
         ]
@@ -4661,7 +4755,6 @@
           {
             "tapTarget": {
               "type": "node",
-              "snippet": "<button class=\"small-button\">Do something</button>",
               "path": "3,HTML,1,BODY,17,BUTTON",
               "selector": "body > button.small-button",
               "boundingRect": {
@@ -4672,11 +4765,11 @@
                 "width": 200,
                 "height": 18
               },
+              "snippet": "<button class=\"small-button\">Do something</button>",
               "nodeLabel": "Do something"
             },
             "overlappingTarget": {
               "type": "node",
-              "snippet": "<button class=\"small-button\">Do something else</button>",
               "path": "3,HTML,1,BODY,18,BUTTON",
               "selector": "body > button.small-button",
               "boundingRect": {
@@ -4687,6 +4780,7 @@
                 "width": 200,
                 "height": 18
               },
+              "snippet": "<button class=\"small-button\">Do something else</button>",
               "nodeLabel": "Do something else"
             },
             "tapTargetScore": 864,
diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
index 6350a3e6281d..c8a2d3e479f2 100644
--- a/types/artifacts.d.ts
+++ b/types/artifacts.d.ts
@@ -148,10 +148,10 @@ declare global {
       export type MetaElement = LH.Artifacts['MetaElements'][0];
 
       export interface NodeDetails {
-        lhId?: string,
+        lhId: string,
         devtoolsNodePath: string,
         selector: string,
-        boundingRect?: Rect,
+        boundingRect: Rect,
         snippet: string,
         nodeLabel: string,
       }
@@ -205,7 +205,8 @@ declare global {
         src: string | null;
         data: string | null;
         code: string | null;
-        params: {name: string; value: string}[];
+        params: Array<{name: string; value: string}>;
+        node: LH.Artifacts.NodeDetails;
       }
 
       export interface IFrameElement {
diff --git a/types/externs.d.ts b/types/externs.d.ts
index 5b8a4243819e..760307ab437a 100644
--- a/types/externs.d.ts
+++ b/types/externs.d.ts
@@ -64,7 +64,7 @@ declare global {
   type FirstParamType<T extends (arg1: any, ...args: any[]) => any> =
     T extends (arg1: infer P, ...args: any[]) => any ? P : never;
 
-  type FlattenedPromise<A extends any> = Promise<A extends Promise<infer X> ? X : A>;
+  type FlattenedPromise<A> = Promise<A extends Promise<infer X> ? X : A>;
 
   /**
    * Split string `S` on delimiter `D`.