我想知道是否可以告诉 puppeteer 等待直到显示元素。
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();
有什么办法可以实现这个目标吗？
我认为您可以使用
page.waitForSelector(selector[, options])const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
const browser = await puppeteer.launch({executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe", headless: false});
const page = await browser.newPage();
await page.setUserAgent(options.agent);
await page.goto("https://www.url.net", {timeout: 60000, waitUntil: 'domcontentloaded'});
page
.waitForSelector('#myId')
.then(() => console.log('got it'));
browser.close();
});
要检查可用选项，请参阅 github 链接。
如果你想确保元素实际上可见，你必须使用
await page.waitForSelector('#myId', {visible: true})
否则你只是在 DOM 中查找元素而不检查可见性。
注意，截至今天提交的所有答案都是错误的
因为它回答一个元素，如果存在或位于
but NOTpage.waitFor()page.waitForFunction()// wait until present on the DOM
// await page.waitForSelector( css_selector );
// wait until "display"-ed
await page.waitForFunction("document.querySelector('.btnNext') && document.querySelector('.btnNext').clientHeight != 0");
// or wait until "visibility" not hidden
await page.waitForFunction("document.querySelector('.btnNext') && document.querySelector('.btnNext').style.visibility != 'hidden'");
const btnNext = await page.$('.btnNext');
await btnNext.click();
页面 DOM 上存在的元素如果具有 CSS 属性
display:nonevisibility:hiddenpage.waitForSelector(selector)function isExist(selector) {
let el = document.querySelector(selector);
let exist = el.length != 0 ? 'Exist!' : 'Not Exist!';
console.log(selector + ' is ' + exist)
}
function isVisible(selector) {
let el = document.querySelector(selector).clientHeight;
let visible = el != 0 ? 'Visible, ' + el : 'Not Visible, ' + el;
console.log(selector + ' is ' + visible + 'px')
}
isExist('#idA');
isVisible('#idA');
console.log('=============================')
isExist('#idB')
isVisible('#idB').bd {border: solid 2px blue;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bd">
<div id="idA" style="display:none">#idA, hidden element</div>
</div>
<br>
<div class="bd">
<div id="idB">#idB, visible element</div>
</div>在上面的代码片段中，函数
isExist()page.waitForSelector('#myId');
我们可以看到，在运行
isExist()#idA#idB但是运行
isVisible()#idA这里还有其他对象来检查元素是否显示或使用 CSS 属性
displayscrollWidth
scrollHeight
offsetTop
offsetWidth
offsetHeight
offsetLeft
clientWidth
clientHeight
风格
visibilityhidden注意：我不太擅长Javascript或英语，请随意改进这个答案。
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);
注意： 对于 frame，您还可以使用
、frame.waitFor()或frame.waitForSelector()。frame.waitForXPath()
更新了答案并进行了一些优化：
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();
})();
虽然我同意@ewwink 的回答。 Puppeteer 的 API 默认情况下会检查是否隐藏，因此当您这样做时：
await page.waitForSelector('#id', {visible: true})
CSS 不会隐藏和可见您。 为了确保渲染，您可以按照 @ewwink 的
waitForFunctionasync waitElemenentVisble(selector) {
function waitVisible(selector) {
function hasVisibleBoundingBox(element) {
const rect = element.getBoundingClientRect()
return !!(rect.top || rect.bottom || rect.width || rect.height)
}
const elements = [document.querySelectorAll(selector)].filter(hasVisibleBoundingBox)
return elements[0]
}
await page.waitForFunction(waitVisible, {visible: true}, selector)
const jsHandle = await page.evaluateHandle(waitVisible, selector)
return jsHandle.asElement()
}
在自己编写了一些这样的方法之后，我发现 expect-puppeteer 可以做到这一点，而且效果更好（请参阅 toMatchElement）。
async function waitForVisible (selector){
//const selector = '.foo';
return await page.waitForFunction(
(selector) => document.querySelector(selector) && document.querySelector(selector).clientHeight != 0",
{},
selector
);
}
以上功能使其具有通用性，因此您可以在任何地方使用它。
但是，如果您使用 pptr，还有另一个更快更简单的解决方案：
page.waitForSelector('#myId', {visible: true})
刚刚通过抓取健身网站对此进行了测试。 @ewwink、@0fnt 和 @caram 提供了最完整的答案。
仅仅因为 DOM 元素可见并不意味着它的内容已完全填充。
今天，我跑了：
await page.waitForSelector("table#some-table", {visible:true})
const data = await page.$eval("table#some-table",(el)=>el.outerHTML)
console.log(data)
并且错误地收到了以下内容，因为表 DOM 尚未由运行时完全填充。可以看到outerHTML是空的。
user@env:$ <table id="some-table"></table>添加 1 秒的暂停解决了这个问题，正如预期的那样：
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
await page.waitForSelector("table#some-table", {visible:true})
await sleep(1000)
const data = await page.$eval("table#some-table",(el)=>el.outerHTML)
console.log(data)
user@env:$ <table id="some-table"><tr><td>Data</td></tr></table>但是 @ewwink 的回答也是如此，更优雅（没有人为超时）：
await page.waitForSelector("table#some-table", {visible:true})
await page.waitForFunction("document.querySelector('table#sched-records').clientHeight != 0")
const data = await page.$eval("table#some-table",(el)=>el.outerHTML)
console.log(data)
user@env:$ <table id="some-table"><tr><td>Data</td></tr></table>