cannot read properties of undefined 'textContent'

Question

I have a simple piece of code

describe('My First Puppeeteer Test', () => {
it('Should launch the browser', async function() {
        const browser = await puppeteer.launch({ headless: false})
        const page = await browser.newPage()
        await page.goto('https://github.com/login')
        await page.type('#login_field', testLogin)
        await page.type('#password', testPassword)
        await page.click('[name="commit"]')
        await page.waitForNavigation()
        
        let [element] = await page.$x('//h3[@class="text-normal"]')
        let helloText = await page.evaluate(element => element.textContent, element);
        
        console.log(helloText);
        browser.close();
    })
})

Everything worked before but today I get an error + my stacktrace:

Error: Evaluation failed: TypeError: Cannot read properties of undefined (reading 'textContent') at puppeteer_evaluation_script:1:21 at ExecutionContext._evaluateInternal (node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:221:19) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async ExecutionContext.evaluate (node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:110:16) at async Context. (tests\example.tests.js:16:22)

How I can resolve this?

Kind regards

ggorlen · Answer 1 · 2022-03-24T16:40:58.047

While I haven't tested the code due to the login and I assume your selectors are correct, the main problem is almost certainly that

await page.click('[name="commit"]')
await page.waitForNavigation()

creates a race condition. The docs clarify:

Bear in mind that if click() triggers a navigation event and there's a separate page.waitForNavigation() promise to be resolved, you may end up with a race condition that yields unexpected results. The correct pattern for click and wait for navigation is the following:
const [response] = await Promise.all([
  page.waitForNavigation(waitOptions),
  page.click(selector, clickOptions),
]);

As a side point, it's probably better to do waitForXPath rather than $x, although this seems less likely the root problem. Don't forget to await all promises such as browser.close().

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.goto('https://github.com/login');
  await page.type('#login_field', testLogin);
  await page.type('#password', testPassword);

  //    vvvvvvvvvvv
  await Promise.all([
    page.click('[name="commit"]'),
    page.waitForNavigation(),
  ]);
  const el = await page.waitForXPath('//h3[@class="text-normal"]');
                 //     ^^^^^^^^^^^^
  //const el = await page.waitForSelector("h3.text-normal"); // ..or

  const text = await el.evaluate(el => el.textContent);
  console.log(text);
  //await browser.close();
  //^^^^^ missing await, or use finally as below
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

Additionally, if you're using Jest, once you get things working, you might want to move the browser and page management to beforeEach/afterEach or beforeAll/afterAll blocks. It's faster to use the same browser instance for all test cases, and pages can be opened and closed before/after each case.

cannot read properties of undefined 'textContent'

1 Answers1