On certain audited pages, totalBodyElements are different from MainDocumentContent body nodes count

[hrenaud]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://www.spie.com/en/about-us/spie-around-world

What happened?

Through a plugin, I want to count SVG child elements.
To do this, I was going to use MainDocumentContent, but on the example page, the code is incomplete. When I count the number of elements in body, I get a big difference with the DOMStats data (which is good).
In my tests, I have :
allBodyNodesFromMainDocumentContent: 1542
artifacts.DOMStats.totalBodyElements: 4651
I'm using JSDOM to browse MainDocumentContent, but it's not the JSDOM that's causing the problem - I've checked the contents of MainDocumentContent.
Here's my code:

const totalBodyElements = artifacts.DOMStats.totalBodyElements
  const MainDocumentContent = artifacts.MainDocumentContent
  const dom = new JSDOM(MainDocumentContent)
  const allBodyNodesFromMainDocumentContent = dom.window.document
    .getElementsByTagName('body')[0]
    .querySelectorAll('*').length
  const svgContentBodyNodesFromMainDocumentContent = dom.window.document
    .getElementsByTagName('body')[0]
    .querySelectorAll('svg *').length

What did you expect?

I expect
allBodyNodesFromMainDocumentContent ===
artifacts.DOMStats.totalBodyElements

What have you tried?

I tried to find another gatherers that would contain the complete HTML code of the page, but I couldn't find anything other than MainDocumentContent.

How were you running Lighthouse?

node

Lighthouse Version

11.7.0

Chrome Version

linux-121.0.6167.85/chrome-linux64/ (from puppeteer)

Node Version

18.19.1

OS

Linux

Relevant log output

totalBodyElements 4651
allNodesFromMainDocumentContent 1565
allBodyNodesFromMainDocumentContent 1542
svgContentNodesFromMainDocumentContent 98
svgContentBodyNodesFromMainDocumentContent 98

[adamraine]

totalBodyElements represents the number of nodes in the document's body at the end of the page load.

MainDocumentContent is just the contents of the initial HTML request the page made when it started loading.

They represent different things and are not designed to match. If your page has any javascript that adds/removes nodes from the page they will almost certainly be different.