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

但是，如果我 sleep 5 秒(在上面的代码中注释)，那么我就可以在文本字段中输入。

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

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