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

Question

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

代码如下。

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 秒（在上面的代码中注释），那么我可以在文本字段中输入。

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

标签： google-chrome-devtoolspuppeteer

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