javascript 使用 Puppeteer 时等待文本出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46825300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wait for text to appear when using Puppeteer
提问by elena
I wonder if there's a similar way as in Selenium to wait for text to appear for a particular element. I've tried something like this, but it doesn't seem to wait:
我想知道是否有与 Selenium 类似的方法来等待特定元素的文本出现。我试过这样的事情，但它似乎没有等待：
await page.waitForSelector('.count', {visible: true});
采纳答案by nilobarp
You can use waitForFunction. See https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforfunctionpagefunction-options-args
您可以使用waitForFunction. 见https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforfunctionpagefunction-options-args
Including @elena's solution for completeness of the answer:
包括@elena 的答案完整性解决方案：
await page.waitForFunction('document.querySelector(".count").inner??Text.length == 7');
回答by Thomas Dondorf
Apart from the method presented in the answer from nilobarp, there are two more ways to do this:
除了 nilobarp 的回答中提出的方法之外，还有两种方法可以做到这一点：
page.waitForSelector
page.waitForSelector
Using the pseudo selector :emptyit is possible to find elements that contain no child nodes or text. Combining this with the :notselector, we can use page.waitForSelectorto query for a selector which is not empty:
使用伪选择器:empty可以找到不包含子节点或文本的元素。将此与:not选择器结合使用，我们可以使用page.waitForSelector查询非空的选择器：
await page.waitForSelector('.count:not(:empty)');
XPath expression
XPath 表达式
If you not only want to make sure that the element is not empty, but also want to check for the text it contains, you can use an XPath expression using page.waitForX:
如果您不仅要确保元素不为空，还要检查它包含的文本，您可以使用 XPath 表达式page.waitForX：
await page.waitForXPath("//*[@class='count' and contains(., 'Expected text')]");
This line will only resolve after there is an element on the page which has the attribute class="count"and contains the text Expected text.
此行仅在页面上存在具有属性class="count"并包含文本的元素后才会解析Expected text。
回答by Gilles Quenot
The best solution you can do using waitForFunction()(avoid weird function as string):
您可以使用的最佳解决方案waitForFunction()（避免将奇怪的函数作为字符串）：
const selector = '.count';
await page.waitForFunction(
selector => document.querySelector(selector).value.length > 0,
{},
selector
);
Depends of the type of the text, replace valueby innerText.
取决于文本的类型，替换value为innerText。
Check puppeteer API
回答by Grant Miller
page.waitFor()
page.waitFor()
You can also just simply use page.waitFor()to pass a function orCSS selector for which to wait.
您也可以简单地使用page.waitFor()来传递等待的函数或CSS 选择器。
Wait for Function
等待函数
If the element is an inputfield, we can check that the .countelement exists before checking that a valueis present to avoid potential errors:
如果元素是一个input字段，我们可以.count在检查 avalue是否存在之前检查该元素是否存在以避免潜在的错误：
await page.waitFor(() => {
const count = document.querySelector('.count');
return count && count.value.length;
});
If the element is notan inputfield, we can check that the .countelement exists before checking that innerTextis present to avoid potential errors:
如果元素是不是一个input领域，我们可以检查.count元件检查之前就存在innerText的存在是为了避免潜在的错误：
await page.waitFor(() => {
const count = document.querySelector('.count');
return count && count.innerText.length;
});
Wait for CSS Selector
等待 CSS 选择器
If the element is an inputfield that contains a placeholder, and you want to check if a valuecurrently exists, you can use :not(:placeholder-shown):
如果元素是input包含 a的字段placeholder，并且您想检查 avalue当前是否存在，则可以使用:not(:placeholder-shown)：
await page.waitFor('.count:not(:placeholder-shown)');
If the element is an inputfield that does notcontain a placeholder, and you want to check if the valueattribute contains a string, you can use :not([value=""]):
如果元素是不包含 a的input字段，并且您想检查该属性是否包含字符串，则可以使用：placeholdervalue:not([value=""])
await page.waitFor('.count:not([value=""])');
If the element is notan inputfield that does not have any child element nodes, we can use :not(:empty)to wait for the element to contain text:
如果元素不是input没有任何子元素节点的字段，我们可以使用:not(:empty)等待元素包含文本：
await page.waitFor('.count:not(:empty)');
page.waitForXPath()
page.waitForXPath()
Wait for XPath
等待 XPath
Otherwise, you can use page.waitForXPath()to wait for an XPath expression to locate element(s) on the page.
否则，您可以使用page.waitForXPath()等待 XPath 表达式来定位页面上的元素。
The following XPath expressions will work even if there are additional classes present on the element other than count. In other words, it will work like .count, rather than [class="count"].
即使元素上存在除count. 换句话说，它将像 一样工作.count，而不是[class="count"]。
If the element is an inputfield, you can use the following expression to wait for the valueattribute to contain a string:
如果元素是input字段，则可以使用以下表达式来等待value属性包含字符串：
await page.waitForXPath('//*[contains(concat(" ", normalize-space(@class), " "), " test ") and string-length(@value) > 0]')
If the element is notan inputfield, you can use the following expression to wait for the element to contain text:
如果元素是不是一个input领域，你可以使用下面的表达式来等待包含文本的元素：
await page.waitForXPath('//*[contains(concat(" ", normalize-space(@class), " "), " count ") and string-length(text()) > 0]');
