无法读取未定义的“textContent”的属性

Question

我有一段简单的代码，

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();
    })
})

之前一切正常，但今天我收到一个错误+我的堆栈跟踪：

错误：评估失败：类型错误：无法读取未定义的属性（读取“textContent”） 在 puppeteer_evaluation_script:1:21 在 ExecutionContext._evaluateInternal (node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:221:19) 在 processTicksAndRejections （节点：内部/进程/task_queues：96：5） 在异步 ExecutionContext.evaluate (node_modules\puppeteer\lib\cjs\puppeteer\common\ExecutionContext.js:110:16) 在异步上下文中。 （测试\example.tests.js:16:22）

我该如何解决这个问题？

亲切的问候

Answer 1

虽然我没有因为登录而测试代码，并且我假设您的选择器是正确的，但主要问题几乎可以肯定会

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

产生竞争条件。 文档澄清：

请记住，如果 click() 触发导航事件，并且有一个单独的 page.waitForNavigation() 承诺得到解决，您可能最终会陷入一场竞争产生意想不到的结果的条件。单击并等待导航的正确模式如下：

const [response] = wait Promise.all([
  page.waitForNavigation(waitOptions),
  page.click(选择器, clickOptions),
]);

作为一个侧面，最好执行 waitForXPath 而不是 $x，尽管这似乎不太可能是根问题。不要忘记await所有承诺，例如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())
;

此外，如果您使用 Jest，一旦您开始工作，您可能需要将浏览器和页面管理移至beforeEach/< code>afterEach 或 beforeAll/afterAll 块。对于所有测试用例使用相同的浏览器实例会更快，并且可以在每个用例之前/之后打开和关闭页面。