跳至主要内容

导航

简介​

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

基本导航​

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

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

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

注意

如果页面在 load 之前执行了客户端重定向， 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();

对于上述场景，Playwright 会等待文本变为可见，会等待该元素的其他可操作性检查通过，然后单击它。

Playwright 像一个非常快的用户一样操作——只要它看到按钮，就会立即单击它。通常情况下，你无需担心是否所有资源都已加载完毕，等等。

水合​

在某些时候，你可能会遇到 Playwright 执行操作但似乎什么也没发生的情况。或者你输入一些文本到输入字段中，但文本会消失。造成这种情况的最可能原因是页面水合不佳 水合。

当页面水合时，首先，会将页面的静态版本发送到浏览器。然后发送动态部分，页面变为“实时”。作为一个非常快的用户，Playwright 只要看到页面就会开始与它交互。如果页面上的按钮已启用，但尚未添加监听器，Playwright 将执行其操作，但单击将不会产生任何效果。

验证页面是否水合不佳的一个简单方法是打开 Chrome DevTools，在网络面板中选择“慢速 3G”网络模拟，然后重新加载页面。当你看到感兴趣的元素后，与它交互。你会看到按钮单击会被忽略，输入的文本会被随后的页面加载代码重置。解决此问题的正确方法是确保所有交互控件在页面完全功能之前（水合后）都处于禁用状态。

等待导航​

单击元素可能会触发多次导航。在这些情况下，建议明确地 page.waitForURL() 到特定 URL。

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

Playwright 将在页面中显示新文档的过程分为 导航 和 加载。

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

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

加载 包括通过网络获取剩余的响应主体、解析、执行脚本并触发加载事件