core: fallback to selector, not tagName for nodeLabel

lighthouse-core/lib/page-functions.js

@@ -378,9 +378,9 @@ function isPositionFixed(element) {
 /**
  * Generate a human-readable label for the given element, based on end-user facing
  * strings like the innerText or alt attribute.
- * Falls back to the tagName if no useful label is found.
+ * Returns label string or null if no useful label is found.
  * @param {Element} element
- * @return {string}
+ * @return {string | null}
  */
 function getNodeLabel(element) {
   // Inline so that audits that import getNodeLabel don't
@@ -415,7 +415,7 @@ function getNodeLabel(element) {
       }
     }
   }
-  return tagName;
+  return null;
 }
 
 /**
@@ -482,6 +482,7 @@ function getNodeDetails(element) {
   }
 
   element = element instanceof ShadowRoot ? element.host : element;
+  const selector = getNodeSelector(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.
@@ -505,10 +506,10 @@ function getNodeDetails(element) {
   const details = {
     lhId,
     devtoolsNodePath: getNodePath(element),
-    selector: getNodeSelector(element),
+    selector: selector,
     boundingRect: getBoundingClientRect(element),
     snippet: getOuterHTMLSnippet(element),
-    nodeLabel: getNodeLabel(element),
+    nodeLabel: getNodeLabel(element) || selector,
   };
 
   return details;

lighthouse-core/test/lib/page-functions-test.js

@@ -21,12 +21,14 @@ describe('Page Functions', () => {
     global.ShadowRoot = ShadowRoot;
     global.Node = Node;
     global.HTMLElement = HTMLElement;
+    global.window = {};
     dom = new DOM(document);
   });
 
   afterAll(() => {
     global.ShadowRoot = undefined;
     global.Node = undefined;
+    global.window = undefined;
   });
 
   describe('wrapRuntimeEvalErrorInBrowser()', () => {
@@ -177,16 +179,11 @@ describe('Page Functions', () => {
       assert.equal(pageFunctions.getNodeLabel(el), Array(78).fill('a').join('') + '💡…');
     });
 
-    it('Uses tag name for html tags', () => {
-      const el = dom.createElement('html');
-      assert.equal(pageFunctions.getNodeLabel(el), 'html');
-    });
-
-    it('Uses tag name if there is no better label', () => {
+    it('Returns null if there is no better label', () => {
       const el = dom.createElement('div');
       const childEl = dom.createElement('span');
       el.appendChild(childEl);
-      assert.equal(pageFunctions.getNodeLabel(el), 'div');
+      assert.equal(pageFunctions.getNodeLabel(el), null);
     });
   });
 
@@ -217,4 +214,14 @@ describe('Page Functions', () => {
       assert.equal(pageFunctions.getNodePath(img), '0,MAIN,a,#document-fragment,0,SECTION,0,IMG');
     });
   });
+
+  describe('getNodeDetails', () => {
+    it('Returns selector as fallback if nodeLabel equals html tag name', () => {
+      const el = dom.createElement('div', '', {id: 'parent', class: 'parent-el'});
+      const childEl = dom.createElement('p', '', {id: 'child', class: 'child-el'});
+      el.appendChild(childEl);
+      const {nodeLabel} = pageFunctions.getNodeDetails(el);
+      assert.equal(nodeLabel, 'div#parent');
+    });
+  });
 });