跳到主要内容

导航

简介​

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

基本导航​

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

# Navigate the page
page.goto("https://example.com")

上面的代码加载了页面并等待网页触发 load 事件。当整个页面加载完成，包括所有相关资源如样式表、脚本、iframe 和图片后，load 事件会被触发。

备注

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

页面何时加载完成？​

现代网页在 load 事件触发之后还会执行许多活动。它们会在 load 事件之后懒加载数据、填充 UI、加载昂贵的资源、脚本和样式。没有方法可以告诉页面是否“加载完成”，这取决于页面、框架等。那么你什么时候才能开始与页面进行交互呢？

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

# Navigate and click element
# Click will auto-wait for the element
page.goto("https://example.com")
page.get_by_text("example domain").click()

对于上述场景，Playwright 将等待文本变得可见，将会等待该元素通过所有可操作性检查，并点击它。

Playwright 操作起来非常快速 - 它一看到按钮就会点击它。通常情况下，您无需担心是否所有资源都已加载完成等。

Hydration​

在某些时候，你会遇到这样的用例：Playwright 执行了一个动作，但似乎没有任何反应。或者你在输入字段中输入了一些文本然后它消失了。背后最可能的原因是一个糟糕的页面 hydration。

当页面 hydration 时，首先会向浏览器发送页面的静态版本。然后动态部分被发送并且页面变为“活跃”。作为非常快速的用户，Playwright 一旦看到页面就会开始与其交互。如果页面上的按钮启用但监听器尚未添加，Playwright 将执行其工作，但点击将没有任何效果。

验证你的页面是否存在 poor hydration 的简单方法是打开 Chrome DevTools，在 Network 面板中选择“Slow 3G”网络模拟并重新加载页面。一旦你看到感兴趣的元素，就与其互动。你会发现按钮点击会被忽略，输入的文本会被后续的页面加载代码重置。解决此问题的正确方法是确保在 hydration 之后，页面完全功能齐全之前禁用所有交互控件。

等待导航​

点击一个元素可能会触发多个导航。在这种情况下，建议明确 page.wait_for_url() 到特定的 url。

page.get_by_text("Click me").click()
page.wait_for_url("**/login")

导航事件​

Playwright 将在页面中显示新文档的过程分为 navigation 和 loading。

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

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

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