跳到主要内容

导航

简介​

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

基本导航​

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

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

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

注意

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

页面何时算加载完成？​

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

在 Playwright 中，您可以随时与页面交互。它会自动等待目标元素变得可操作。

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

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

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

水合​

有时，您可能会遇到 Playwright 执行某个操作但似乎什么都没发生的情况。或者您在输入字段中输入了一些文本，但它却消失了。这背后最可能的原因是页面水合不良。

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

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

等待导航​

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

page.getByText("Click me").click();
page.waitForURL("**/login");

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

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

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

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