导航

简介

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

基本导航

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

// Navigate the page
await page.goto('https://example.com');
javascript

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

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

页面何时加载完毕？

现代页面在 load 事件触发后会进行大量操作。它们会懒加载数据、填充 UI、加载昂贵的资源、脚本和样式等。这些操作通常会在 load 事件触发后进行，因此没有办法准确判断页面是否加载完毕，这取决于页面的实现、框架等。那么，什么时候可以开始与页面交互呢？

在 Playwright 中，您可以在任何时刻与页面进行交互。它会自动等待目标元素变为可操作状态。

// Navigate and click element
// Click will auto-wait for the element
await page.goto('https://example.com');
await page.getByText('Example Domain').click();
javascript

在这个场景中，Playwright 会等待文本变得可见，等待该元素的其他可操作性检查通过，然后执行点击操作。

Playwright 就像一个非常快速的用户 —— 一旦看到按钮，它就会点击它。在一般情况下，您不需要担心所有资源是否加载完毕等问题。

页面水化（Hydration）

有时，您可能会遇到 Playwright 执行操作后，页面似乎没有反应的情况。或者您在输入框中输入一些文本，它却消失了。这种情况最可能的原因是页面水化不好。

当页面水化时，首先会将页面的静态版本发送到浏览器。然后，动态部分会被发送，页面变得“可用”。由于 Playwright 是一个非常快速的用户，它会在看到页面时立即开始与页面交互。如果页面上的按钮已启用，但事件监听器尚未添加，Playwright 会执行操作，但点击不会生效。

验证页面是否存在水化问题的一个简单方法是打开 Chrome DevTools，在网络面板中选择“慢速 3G”网络模拟并重新加载页面。一旦看到感兴趣的元素并与之交互，您会发现按钮点击会被忽略，输入的文本会被后续的页面加载代码重置。解决这个问题的正确方法是确保在页面完全功能化、即水化完成后，所有交互控件才会启用。

等待导航

点击元素可能会触发多个导航事件。在这种情况下，建议明确使用 page.waitForURL() 等待特定的 URL。

await page.getByText('Click me').click();
await page.waitForURL('**/login');
javascript

导航事件

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

导航：通过更改页面 URL 或与页面进行交互（如点击链接）启动。导航意图可能会被取消，例如遇到未解析的 DNS 地址，或被转化为文件下载。

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

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

  • page.url() 被设置为新 URL。

  • 文档内容从网络加载并解析。

  • page.on('domcontentloaded') 事件被触发。

  • 执行一些脚本并加载资源（如样式表和图片）。

  • page.on('load') 事件被触发。

  • 页面执行动态加载脚本。