导航
简介
Playwright 可以导航到 URL 并处理由页面交互触发的导航。
基本导航
最简单的导航形式是打开一个 URL
- 同步
- 异步
# Navigate the page
page.goto("https://example.com")
# Navigate the page
await page.goto("https://example.com")
上面的代码加载页面并等待网页触发 load 事件。当整个页面加载完毕,包括所有依赖资源(如样式表、脚本、iframe 和图像)时,就会触发 load 事件。
如果页面在 load
之前执行了客户端重定向,page.goto() 会等待重定向后的页面触发 load
事件。
页面何时加载完成?
现代页面在 load
事件触发后执行许多活动。它们延迟获取数据,填充 UI,加载昂贵的资源、脚本和样式,所有这些都在 load
事件触发后完成。没有办法确定页面何时 加载完成
,这取决于页面、框架等。那么你什么时候可以开始与它交互呢?
在 Playwright 中,你可以在任何时刻与页面交互。它会自动等待目标元素变得 可操作。
- 同步
- 异步
# Navigate and click element
# Click will auto-wait for the element
page.goto("https://example.com")
page.get_by_text("example domain").click()
# Navigate and click element
# Click will auto-wait for the element
await page.goto("https://example.com")
await page.get_by_text("example domain").click()
对于上面的场景,Playwright 会等待文本变得可见,会等待对该元素执行其他可操作性检查,然后会点击它。
Playwright 就像一个非常快的用户——它一看到按钮就点击它。在一般情况下,你无需担心所有资源是否加载完成等。
水合
在某些时候,你可能会遇到 Playwright 执行动作,但看似没有任何反应的情况。或者你输入一些文本到输入字段,然后它消失了。造成这种情况的最可能原因是页面 水合 不佳。
当页面进行水合时,首先会将页面的静态版本发送到浏览器。然后发送动态部分,页面就变得“活动”了。作为一个非常快的用户,Playwright 会在看到页面时立即开始与它交互。如果页面上的按钮已启用,但监听器尚未添加,Playwright 会完成它的工作,但点击不会有任何效果。
验证页面是否水合不佳的一种简单方法是在 Chrome DevTools 中打开“网络”面板,选择“慢速 3G”网络模拟,然后重新加载页面。当看到目标元素时,与它交互。你会看到,按钮点击会被忽略,并且后续页面加载代码会重置输入的文本。解决此问题的正确方法是确保所有交互式控件在水合完成之前都处于禁用状态,直到页面完全可用。
等待导航
点击一个元素可能会触发多次导航。在这些情况下,建议显式 page.wait_for_url() 到特定的 URL。
- 同步
- 异步
page.get_by_text("Click me").click()
page.wait_for_url("**/login")
await page.get_by_text("Click me").click()
await page.wait_for_url("**/login")
导航事件
Playwright 将在页面中显示新文档的过程分为 **导航** 和 **加载**。
**导航开始** 于更改页面 URL 或与页面交互(例如,点击链接)。导航意图可能会被取消,例如,遇到未解析的 DNS 地址或转换为文件下载。
**导航已提交** 当响应标头已解析并且会话历史记录已更新时。只有在导航成功(已提交)后,页面才会开始 **加载** 文档。
**加载** 包括从网络获取剩余的响应主体、解析、执行脚本和触发加载事件
- page.url 设置为新的 URL
- 文档内容从网络加载并解析
- page.on("domcontentloaded") 事件触发
- 页面执行一些脚本并加载资源,如样式表和图像
- page.on("load") 事件触发
- 页面执行动态加载的脚本