puppeteer 找不到元素

Question

我正在尝试使用 puppeteer 登录 url，但它找不到输入元素和提交按钮，我相信这些元素是由 javascript 动态生成的，即使我使用的是 waitForSelector 它没有不工作，我错过了什么？

这是我的代码：

const puppeteer = require('puppeteer');

(async () => {

    try {

        const browser = await puppeteer.launch({
            headless: false
        });

        const page = await browser.newPage();
        await page.goto('http://contatoplus.com/#!login', { waitUntil: 'networkidle0' });


            await page.waitForFunction("document.querySelector('#gwt-uid-3') && document.querySelector('#gwt-uid-3').clientHeight != 0");
            // or wait until "visibility" not hidden
            await page.waitForFunction("document.querySelector('#gwt-uid-3') && document.querySelector('#gwt-uid-3').style.visibility != 'hidden'");

            const btnNext = await page.$('#gwt-uid-3');
            await btnNext.keyboard.type('loginnn');


} catch (error) {
    console.log(error);
}

})();

我跟着这个： https://stackoverflow.com/a/54103671/5309671

Answer 1

对我来说，脚本在page.goto() 阶段超时。

1. 尝试删除, { waitUntil: 'networkidle0' }选项，page.waitForFunction()就足够了。
2. page.$() 返回没有 keyboard 属性的 elementHandle。只需使用await btnNext.type('loginnn');。

一个变种：

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const [page] = await browser.pages();

    await page.goto('http://contatoplus.com/#!login');

    await page.waitForFunction(() => {
      const selectors = ['#gwt-uid-3', '#gwt-uid-5', 'div[role="button"]'];
      return selectors.every(selector => document.querySelector(selector)?.clientHeight > 0);
    });

    await page.type('#gwt-uid-3', 'login');
    await page.type('#gwt-uid-5', 'password');
    await page.click('div[role="button"]');
  } catch (err) {
    console.error(err);
  }
})();