puppeteer：等待元素可见？

I would like to know if I can tell puppeteer to wait until an element in displayed.

我想知道我是否可以告诉木偶戏等到显示的元素。

const inputValidate = await page.$('input[value=validate]');
await inputValidate.click()

//I want to do something like that 
waitElemenentVisble('.btnNext ')

const btnNext = await page.$('.btnNext');
await btnNext.click();

Is there any way I can accomplish this?

有什么方法可以做到这一点吗?

3 个解决方案

#1

I think you can use page.waitForSelector(selector[, options]) function for that purpose.

我认为您可以使用page.waitForSelector(selector [,options])函数来实现此目的。

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page
    .waitForSelector('#myId')
    .then(() => console.log('got it');
  browser.close();
});

#2

You can use page.waitFor(), page.waitForSelector(), or page.waitForXPath() to wait for an element on a page:

您可以使用page.waitFor(),page.waitForSelector()或page.waitForXPath()来等待页面上的元素:

// Selectors

const css_selector   = '.btnNext';
const xpath_selector = '//*[contains(concat(" ", normalize-space(@class), " "), " btnNext ")]';

// Wait for CSS Selector

await page.waitFor( css_selector );
await page.waitForSelector( css_selector );

// Wait for XPath Selector

await page.waitFor( xpath_selector );
await page.waitForXPath( xpath_selector );

Note: In reference to a frame, you can also use frame.waitFor(), frame.waitForSelector(), or frame.waitForXPath().

注意:在引用框架时,您还可以使用frame.waitFor(),frame.waitForSelector()或frame.waitForXPath()。

#3

Updated answer with some optimizations:

更新了一些优化的答案:

const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();

    await page.goto('https://www.somedomain.com', {waitUntil: 'networkidle2'});
    await page.click('input[value=validate]');
    await page.waitForSelector('#myId');
    await page.click('.btnNext');
    console.log('got it');

    browser.close();
})();

#1