跳到主要内容

导航

简介​

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

基本导航​

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

// 导航到页面
await page.GotoAsync("https://example.com");

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

备注

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

页面何时加载完成？​

现代页面在触发 load 事件后会执行大量活动。它们会在 load 事件触发后延迟获取数据、填充用户界面（UI）、加载昂贵的资源、脚本和样式。无法确切判断页面何时 “加载完成”，这取决于页面、框架等因素。那么何时可以开始与页面进行交互呢？

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

// 导航并点击元素
// Click 会自动等待元素
await page.GotoAsync("https://example.com");
await page.GetByText("Example Domain").ClickAsync();

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

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

注水（Hydration）​

在某些情况下，你可能会遇到这样的用例：Playwright 执行了一个操作，但似乎没有任何反应。或者你在输入框中输入了一些文本，但它会消失。这背后最可能的原因是页面 注水（hydration） 不佳。

当页面进行注水时，首先，页面的静态版本会发送到浏览器。然后发送动态部分，页面变为 “活动” 状态。作为一个速度非常快的 “用户”，Playwright 一看到页面就会开始与之交互。如果页面上的按钮已启用，但尚未添加监听器，Playwright 会执行其操作，但点击不会产生任何效果。

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

等待导航​

点击一个元素可能会触发多次导航。在这些情况下，建议显式地使用 Page.WaitForURLAsync() 等待特定的 URL。

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

导航事件​

Playwright 将在页面中显示新文档的过程分为 导航 和 加载。 导航开始 于更改页面 URL 或与页面交互（例如，点击链接）。导航意图可能会被取消，例如，遇到无法解析的 DNS 地址时，或者转换为文件下载。

导航确认（Navigation is committed） 指的是响应头已被解析且会话历史已更新。只有在导航成功（确认）后，页面才开始 加载（loading） 文档。

加载（Loading） 涵盖通过网络获取剩余的响应体、解析、执行脚本以及触发加载事件：

  • Page.Url 设置为新的 URL

  • 通过网络加载并解析文档内容

  • 触发 Page.DOMContentLoaded 事件

  • 页面执行一些脚本并加载样式表和图像等资源

  • 触发 Page.Load 事件

  • 页面执行动态加载的脚本