木偶师找不到元素

我正在尝试使用puppeteer登录一个url，但是它找不到input元素和提交按钮，我相信这些元素是由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

---

解决方案

对于我来说，脚本在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);
  }
})();