木偶师找不到元素

2022-03-11 00:00:00 node.js puppeteer javascript

我正在尝试使用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);
  }
})();

相关文章