Puppeteer: Correctly Selecting Inner Text from Nested Elements

Other Questions Puppeteer
1

I need to retrieve the inner text from an element with a specific class name, let’s say ‘ClassA’.

Here’s the code I initially used, which functioned correctly:

let itemCount = await page.evaluate(() => {
    return document.querySelector('.ClassA').textContent;
});

However, recently, running this code resulted in the following error:

Error: Evaluation failed: TypeError: Cannot read property 'textContent' of null

Upon debugging with console.log() statements, I discovered that the issue lies here.

Investigating the webpage, I found multiple instances of the same class name within deeply nested elements.

How can I accurately select the specific class I’m targeting, given I know its parent structure?

EDIT: Since there are three elements with the same class name, can I utilize array indexing in querySelector() to get the first one?

EDIT2: I tried running this command:

return document.querySelector('.ClassA').length;

This resulted in:

Error: Evaluation failed: TypeError: Cannot read property 'length' of null

This has further complicated the situation…

EDIT 3: I followed a suggestion provided and noticed the code snippet offered returned a valid result, indicating that my selector is active.

However, when executing this code:

let itemCount = await page.evaluate(() => {
    return document.querySelector('#root > section > div > header > ul > li:first-child > a > span').textContent;
});

I encountered the same error:

Error: Evaluation failed: TypeError: Cannot read property 'textContent' of null
2

hey Grace_31Dance! Sounds like a case of selector mismatch. Make sure your targeted element is loaded before you try to access it. Try using waitForSelector before evaluating. Also, confirm the whole selector path is correct in all states; slight changes in the DOM structure can cause that error.