core(full-page-screenshot): handle ShadowRoots (#11852)

Author: brendankenny

lighthouse-cli/test/smokehouse/test-definitions/dobetterweb/dbw-expectations.js

@@ -429,6 +429,30 @@ const expectations = [
             }],
           },
         },
+        'full-page-screenshot': {
+          score: null,
+          details: {
+            type: 'full-page-screenshot',
+            screenshot: {
+              width: 360,
+              // Allow for differences in platforms.
+              height: '3755±5',
+              data: /^data:image\/jpeg;.{500,}/,
+            },
+            nodes: {
+              'page-0-IMG': {
+                // Test that these are numbers and in the ballpark.
+                top: '650±50',
+                bottom: '650±50',
+                left: '10±10',
+                right: '120±20',
+                width: '120±20',
+                height: '20±20',
+              },
+              // And then many more nodes.
+            },
+          },
+        },
       },
     },
   },

lighthouse-core/lib/page-functions.js

@@ -467,26 +467,27 @@ function getNodeDetailsImpl(element) {
     window.__lighthouseNodesDontTouchOrAllVarianceGoesAway = new Map();
   }
 
+  const htmlElement = element instanceof ShadowRoot ? element.host : element;
+
   // Create an id that will be unique across all execution contexts.
   // The id could be any arbitrary string, the exact value is not important.
   // For example, tagName is added only because it might be useful for debugging.
   // But execution id and map size are added to ensure uniqueness.
   // We also dedupe this id so that details collected for an element within the same
   // pass and execution context will share the same id. Not technically important, but
   // cuts down on some duplication.
-  let lhId = window.__lighthouseNodesDontTouchOrAllVarianceGoesAway.get(element);
+  let lhId = window.__lighthouseNodesDontTouchOrAllVarianceGoesAway.get(htmlElement);
   if (!lhId) {
     lhId = [
       window.__lighthouseExecutionContextId !== undefined ?
         window.__lighthouseExecutionContextId :
         'page',
       window.__lighthouseNodesDontTouchOrAllVarianceGoesAway.size,
-      element.tagName,
+      htmlElement.tagName,
     ].join('-');
-    window.__lighthouseNodesDontTouchOrAllVarianceGoesAway.set(element, lhId);
+    window.__lighthouseNodesDontTouchOrAllVarianceGoesAway.set(htmlElement, lhId);
   }
 
-  const htmlElement = element instanceof ShadowRoot ? element.host : element;
   const details = {
     lhId,
     devtoolsNodePath: getNodePath(element),