跳至主要内容

导航

简介​

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

基本导航​

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

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

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

注意

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

页面何时加载？​

现代页面在触发 load 事件后执行许多活动。它们延迟获取数据、填充 UI、加载昂贵的资源、在 load 事件触发后加载脚本和样式。无法确定页面是否已“加载”，这取决于页面、框架等。那么您何时可以开始与它交互呢？

在 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 执行某个操作但似乎没有任何反应的情况。或者您在输入字段中输入一些文本，它会消失。造成这种情况最可能的原因是页面 水合 不佳。

当页面水合时，首先将页面的静态版本发送到浏览器。然后发送动态部分，页面变得“活跃”。作为非常快的用户，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 事件被触发
  • 页面执行动态加载的脚本