跳至主要内容

导航

简介​

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

基础导航​

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

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

上面的代码加载页面并等待网页触发load事件。当整个页面及其所有依赖资源(如样式表、脚本、iframe和图片)都加载完成时，就会触发load事件。

note

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

页面何时加载完成？​

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

在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执行了某个操作，但表面上似乎什么都没发生。或者您在输入框中输入了一些文本，但它却消失了。这背后最可能的原因是页面hydration效果不佳。

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

验证您的页面是否存在水合不良问题的一个简单方法是打开Chrome开发者工具，在网络面板中选择"Slow 3G"网络模拟并重新加载页面。当您看到感兴趣的元素时，与之交互。您会发现按钮点击会被忽略，输入的文本会被后续的页面加载代码重置。解决此问题的正确方法是确保所有交互控件在水合完成前保持禁用状态，直到页面完全功能正常。

等待导航​

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

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

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

导航开始的方式包括更改页面URL或与页面交互（例如点击链接）。导航意图可能会被取消，例如在遇到无法解析的DNS地址时，或者转变为文件下载。

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

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