',
'explanation': 'Fix any of the following:\n Element has a tabindex greater than 0',
- 'nodeLabel': 'div',
+ 'nodeLabel': 'body > section > div#tabindex',
},
},
],
diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js
index 80b611ba8014..3f7ef5df3d25 100644
--- a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js
+++ b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js
@@ -188,7 +188,7 @@ module.exports = [
{
traceEventType: 'largest-contentful-paint',
node: {
- nodeLabel: 'img',
+ nodeLabel: 'section > img',
snippet: '

',
boundingRect: {
top: 108,
@@ -274,7 +274,7 @@ module.exports = [
{
node: {
type: 'node',
- nodeLabel: 'img',
+ nodeLabel: 'section > img',
path: '0,HTML,1,BODY,1,DIV,a,#document-fragment,0,SECTION,0,IMG',
},
},
diff --git a/lighthouse-core/lib/page-functions.js b/lighthouse-core/lib/page-functions.js
index c938752ae009..5be0572136f2 100644
--- a/lighthouse-core/lib/page-functions.js
+++ b/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;
diff --git a/lighthouse-core/test/lib/page-functions-test.js b/lighthouse-core/test/lib/page-functions-test.js
index 6736404b6f87..4ee60be44597 100644
--- a/lighthouse-core/test/lib/page-functions-test.js
+++ b/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');
+ });
+ });
});