跳转到主要内容

导航

简介​

Playwright 可以导航到 URL 并处理由页面交互引起的导航。

基本导航​

最简单的导航形式是打开 URL

// Navigate the page
await page.GotoAsync("https://example.com");

上面的代码会加载页面并等待网页触发 load 事件。当整个页面（包括所有依赖的资源，如样式表、脚本、iframe 和图像）加载完成后，就会触发 load 事件。

注意

如果页面在 load 事件触发前执行了客户端重定向，Page.GotoAsync() 将会等待重定向后的页面触发 load 事件。

页面何时加载完成？​

现代页面在 load 事件触发后会执行许多活动。它们会延迟加载数据、填充 UI、在 load 事件触发后加载昂贵的资源、脚本和样式。没有一种方法可以确定页面已“完全加载”（loaded），这取决于页面、框架等。那么，你何时可以开始与它交互呢？

在 Playwright 中，你可以在任何时刻与页面进行交互。它会自动等待目标元素变为可操作状态。

// Navigate and click element
// Click will auto-wait for the element
await page.GotoAsync("https://example.com");
await page.GetByText("Example Domain").ClickAsync();

对于上述情况，Playwright 将等待文本变得可见，等待该元素的其余可操作性检查通过，然后点击它。

Playwright 的操作速度非常快——它一看到按钮，就会点击它。通常情况下，您无需担心所有资源是否已加载等问题。

水合​

有时，你会遇到这样的情况：Playwright 执行了一个操作，但似乎什么也没发生。或者你向输入字段输入了一些文本，它却消失了。最可能的原因是页面水合（hydration）不佳。

当页面进行水合时，首先会将页面的静态版本发送到浏览器。然后发送动态部分，页面变为“实时”。作为一个非常快的用户，Playwright 会在看到页面的那一刻开始与之交互。如果页面上的按钮已启用，但监听器尚未添加，Playwright 会完成它的工作，但点击将不会有任何效果。

验证你的页面是否存在水合不佳问题的简单方法是打开 Chrome 开发者工具，在“网络”面板中选择“慢速 3G”网络模拟，然后重新加载页面。一旦看到你感兴趣的元素，就与之交互。你会发现按钮点击会被忽略，输入的文本会在后续的页面加载代码中被重置。解决此问题的正确方法是确保所有交互式控件在水合完成、页面完全功能化之前都处于禁用状态。

等待导航​

点击某个元素可能会触发多次导航。在这种情况下，建议显式调用 Page.WaitForURLAsync() 等待跳转到特定的 URL。

await page.GetByText("Click me").ClickAsync();
await page.WaitForURL("**/login");

Playwright 将在页面中显示新文档的过程分为导航和加载。

导航开始通过更改页面 URL 或与页面交互（例如，点击链接）。导航意图可能会被取消，例如，在遇到未解析的 DNS 地址或转换为文件下载时。

当响应头被解析并且会话历史记录更新后，导航被提交。只有在导航成功（已提交）后，页面才开始加载文档。

加载包括通过网络获取剩余的响应体、解析、执行脚本和触发加载事件

  • Page.Url 被设置为新 URL
  • 文档内容通过网络加载并解析
  • Page.DOMContentLoaded 事件被触发
  • 页面执行一些脚本并加载样式表和图片等资源
  • Page.Load 事件被触发
  • 页面执行动态加载的脚本