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

我想避免睡觉。请提出解决方案。

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

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

3 个答案: