no element screenshots in timespans

[brendankenny]

It appears that it has been this way since at least 9.0 (e.g. see the "Avoid large layout shifts" audit in this report from the user-flows article), even in simple timespans with no navigations and no dynamic DOM or changing styles.

lhr.audits['full-page-screenshot'].details.nodes is always empty, so detals-renderer assumes the element wasn't in the DOM at the time of the screenshot and you always get just the outerHTML and snippet:

lighthouse/report/renderer/details-renderer.js

Lines 515 to 516 in 62bd578

	const rect = item.lhId && this._fullPageScreenshot.nodes[item.lhId];
	if (!rect || rect.width === 0 || rect.height === 0) return element;

I haven't dug too far into this, but from a quick debug it looks like __lighthouseNodesDontTouchOrAllVarianceGoesAway is always undefined (both with and without isolation) when the full-page-screenshot gatherer goes looking for it:

lighthouse/lighthouse-core/gather/gatherers/full-page-screenshot.js

Line 148 in 62bd578

if (!window.__lighthouseNodesDontTouchOrAllVarianceGoesAway) return nodes;

Is this expected? I couldn't find any discussion of this before, and I can't think of anything fundamental about timespans that would prevent this from working

[brendankenny]

Interestingly, the sample flow report does have element screenshots, so maybe I'm wrong that it's always true for timespans, but for all my timespan scripts and some random tests with timespans in DevTools all have missing nodes

[adamraine]

I think the root cause is #13881 (comment). Most but not all element collecting gatherers run after the FPS. I'll make a PR to fix this.

Honestly we could consider disabling FPS for timespans. The gatherer is pretty disruptive as is and theoretically there isn't anything special about the end of a timespan. Unfortunately, this opens a whole can of worms about gatherers only looking for elements at the end of a run.