跳至主要内容

导航

简介​

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

基本导航​

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

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

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

注意

如果页面在 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 面板中选择“Slow 3G”网络模拟并重新加载页面。一旦您看到目标元素，请与它交互。您会发现按钮点击会被忽略，输入的文本会被随后的页面加载代码重置。解决此问题的正确方法是确保所有交互式控件在页面完全可用之前都处于禁用状态，即在水合完成后。

等待导航​

单击一个元素可能会触发多个导航。在这种情况下，建议明确地 Page.waitForURL() 到特定的 URL。

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

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

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

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

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