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