导航
简介
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 像一个非常快速的用户一样操作 - 它一看到按钮,就会单击它。在一般情况下,您无需担心所有资源是否已加载等等。
Hydration
在某个时候,您会偶然发现一个用例,其中 Playwright 执行了一个操作,但似乎没有任何反应。或者您在输入字段中输入一些文本,它会消失。这背后最可能的原因是页面 hydration 不佳。
当页面被 hydration 时,首先,页面的静态版本被发送到浏览器。然后发送动态部分,页面变为“live”。作为一个非常快速的用户,Playwright 将在看到页面的那一刻开始与之交互。如果页面上的按钮已启用,但尚未添加侦听器,则 Playwright 将完成其工作,但单击不会有任何效果。
验证您的页面是否受到不良 hydration 影响的简单方法是打开 Chrome DevTools,在 Network 面板中选择“Slow 3G”网络模拟,然后重新加载页面。看到感兴趣的元素后,与之交互。您会看到按钮单击将被忽略,并且输入的文本将被后续页面加载代码重置。解决此问题的正确方法是确保在 hydration 之后,即页面完全正常运行之前,禁用所有交互式控件。
等待导航
单击元素可能会触发多次导航。在这些情况下,建议显式 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") 事件被触发
- 页面执行动态加载的脚本