在使用 Puppeteer 访问它之前是否必须使用 waitForSelector？

Question

我一直在从事一个项目，该项目有很多非常不稳定的测试。通常，找不到选择器，所以到目前为止，我们的笨拙解决方案是到处添加手动延迟。

之前，我们有这样的代码：

const selector = 'my-selector';
const ele = await page.$(selector);
await ele.click();

我最近尝试在

waitForSelector

调用之前添加

$

，如下所示：

const selector = 'my-selector';
await page.waitForSelector(selector);
const ele = await page.$(selector);
await ele.click();

现在看来更靠谱了。在访问元素之前始终使用

page.waitForSelector()

是不是很重要？或者有更好的方法吗？

Answer 1

page.$()

。如果该元素已经在页面上，则只需使用

waitForSelector

、

page.$

等选择它，否则等待它。如果您不确定是否会出现，最好等待。

page.$eval

基本上是更通用的

waitForSelector

上的常见情况便利包装器，它可以注册

waitForFunction

循环或

requestAnimationFrame

等待回调谓词为 true。 MutationObserver文档

声称“如果在调用该方法时选择器已经存在，该方法将立即返回”，但我没有看到它在附加

waitForSelector之前运行初步的page.$

类型查询

来自当前代码。另一方面，

requestAnimationFrame

和

page.$

以及公司只需以最小的开销为您运行

page.$eval

。尽管如此，我不会太担心性能；如果您要将所有

document.querySelector

调用替换为

page.$

调用，它可能不会非常引人注目。另一方面，我喜欢在适当的时候使用

waitForSelector

的表现力。它传达了您确定该元素存在的意图，如果您不加区别地使用

page.$

，则不会那么清楚。

waitForSelector

不会抛出异常，因此报告较弱，当您尝试访问

page.$

上的属性时，可能会将抛出推到下一行（或更远）。注意

null

返回第一个匹配元素

，所以代码可以写为 waitForSelector

无论你做什么，

不要睡觉

。

const selector = 'my-selector';
const ele = await page.waitForSelector(selector);
await ele.click();

已从 Puppeteer API 中

删除

，这是一件好事。 如果你厌倦了打字

waitForTimeout

，你可以随时为它写一个小包装：

page.waitForSelector