Google chrome devtools 在Puppeter中，如何等待DOM元素加载，然后单击

在Puppeter中，如何等待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秒（在上面的代码中注释），那个么我就能够在文本字段中键入内容

我想避免睡觉。请提出你的建议

您可以使用；：

---

您需要等待元素可见，因为该元素存在于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.
})();

---

试过这个。还是同一个问题。它并没有在文本字段中输入。我只是在行的开头缺少等待。您的解决方案也有效。这非常有效。如果我使用{headless:true}启动chrome，使用{visible:true}选项的waitForSelector会工作吗？waitForSelector如何处理错误？如果选择器未加载会发生什么情况？@MirzaPayam如果选择器在等待超时（默认为30000（30秒））毫秒后未出现，

waitForSelector

函数将抛出。请不要仅将代码作为答案发布，还要解释代码的作用以及它如何解决问题。带有解释的答案通常质量更高，更容易吸引选票。

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

//Errors

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