在 puppeteer 中如何等待 DOM 元素加载然后单击

Question

在 puppeteer 中如何等待 DOM 元素加载然后单击。我正在尝试访问一个简单的页面，点击 Start 按钮，然后应该会出现一个文本字段，我需要输入该文本字段。

代码如下。

const puppeteer = require('puppeteer');
const sleep = (waitTimeInMs) => new Promise(resolve => setTimeout(resolve, waitTimeInMs));

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://janus.conf.meetecho.com/videocalltest.html');
  await page.click('#start', {waitUntil: 'domcontentloaded'});
  //await sleep(5000);
  await page.type('#username', 'austin');
  await sleep(5000);
  await browser.close();
})();

但是，如果我休眠 5 秒（在上面的代码中注释），那么我可以在文本字段中输入。

我想避免睡觉。请建议解决方法。

Answer 1

您需要等待元素可见，因为该元素存在于 DOM 中，但不可见。

这是有效的脚本：

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://janus.conf.meetecho.com/videocalltest.html');
  await page.click('#start');
  await page.waitForSelector('#username', { visible: true });
  await page.type('#username', 'austin');
  // await browser.close(); // commented it just to make sure that text is typed in the input before close browser.
})();

Answer 2

你可以使用;page.waitForSelector(selector[, options]):

await page.waitForSelector('#username', {visible: true})

Answer 3

//Errors

await page.waitForSelector('#username', {visible: true})
.then(()=>{
    console.log('success');
})
.catch((err)=>{
    console.log(err);
}