​​

在使用 Playwright 进行自动化测试时，有时需要设置等待时间，因为如果它不等待某些事件（例如某个事件的发生），测试就会失败。比如，你可能需要等待页面加载完成才能进行下一步操作。

可以通过设置“等待”一段时间来让测试暂停，比如说5秒钟。如果这样做，无论是否必要，测试都会等待这段时间，从而导致测试过程比实际需要更慢。

在编写 Playwright 测试时，最好让测试等待一些具体的内容，比如等待定位器渲染完成、等待某个事件发生或等待 API 调用完成，因为测试会等待定位器或事件。如果测试使用这种类型的等待，它只会等待到满足指定条件所必需的时间。因此，测试不会出现不稳定现象，并且运行速度应更快。

我发现 Playwright API 中的以下 TypeScript 函数在编写 Playwright 测试时是非常有用的等待方式：

Waiting for a locator – waitFor()

​waitFor()​ 函数可以与定位器（locator）串联使用，以等待该定位器渲染完成，例如：

​​

我发现 waitFor()​ 在等待导航完成时非常有用，因为测试时会等待指定的定位器。

可以将等待的定位器的状态以及超时长度的参数传递给 waitFor()​，以指定正在等待的状态，可参考：https://playwright.dev/docs/api/class-locator#locator-wait-for

Waiting for an API call – waitForResponse()

测试可能需要等待来自 API 调用的响应。这可以通过 waitForResponse()​ 来实现。在这个例子中，waitForResponse​是在 click()​ 之后等待响应。

​​

测试需要等待的 API 调用可以在开发者工具的“网络”选项卡中找到，然后将其作为参数传递给 waitForResponse()​。函数 waitforResponse()​会返回匹配的响应。

可以将predicate和timeout这两个参数传递给 WaitforResponse()​，可参考：https://playwright.dev/docs/api/class-page#page-wait-for-response

Waiting for an event – waitForEvent()

有时测试不是在等待 API 调用或定位器的出现，而是在等待某个事件的发生，比如“requestfinished”（请求完成）或“domcontentloaded”（DOM 内容加载完成）。WaitForEvent​ 会等待事件触发并返回一个真值。在下面的例子中，测试在等待 navigate()​ 之后发生的“domcontentloaded”事件。

​​

可以向 waitForEvent()​ 方法传递参数，这些参数包括event、predicate和timeout，可参考：https://playwright.dev/docs/api/class-page#page-wait-for-event

Waiting for a truthy value – waitForFunction()

如果测试需要等待一个真值（如 querySelectorAll()​ 返回的值），你可以使用 waitForFunction()​；

该函数将等待直到超时时间结束，直到返回真值为止。在这个例子中，当长度大于零时返回真值，当长度为零时返回假值。

​​

可以向 waitForFunction()​ 方法传递参数，这些参数包括要执行的函数、评估参数、轮询间隔和超时时间，可草考：https://playwright.dev/docs/api/class-page#page-wait-for-function

结论

本文介绍了我在测试中使用的等待功能，而 Playwright API 包含的等待功能比我上面展示的还要多。如果你发现本文中的函数无法满足你的需求，那么值得去探索一下 Playwright API，以找到不同的测试等待方式。

我们很容易养成在测试中等待固定秒数的习惯。然而，这种等待固定秒数的习惯会拖慢你的测试速度。

如果你使用像上面那些函数来进行测试等待，那么测试只会等待到满足条件为止，从而加快脚本的运行速度。

‍