跳到主要内容

导航

简介​

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

基本导航​

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

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

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

注意

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

页面何时加载完成？​

现代页面在 load 事件触发后会执行许多活动。它们延迟获取数据、填充 UI、在 load 事件触发后加载昂贵的资源、脚本和样式。没有办法判断页面是否 loaded，这取决于页面、框架等。那么你什么时候可以开始与之交互呢？

在 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 就像一个非常快速的用户一样操作 - 当它看到按钮的那一刻，它就会点击它。在一般情况下，您无需担心所有资源是否已加载等。

Hydration (水合作用)​

在某些时候，您会偶然发现一个用例，其中 Playwright 执行了一个操作，但似乎什么也没有发生。或者您在输入字段中输入了一些文本，它会消失。这背后最可能的原因是页面 hydration (水合作用) 不佳。

当页面 hydrated (水合) 时，首先，页面的静态版本被发送到浏览器。然后发送动态部分，页面变为 “live (活动)”。作为一个非常快速的用户，Playwright 将在看到页面的那一刻开始与之交互。如果页面上的按钮已启用，但尚未添加监听器，则 Playwright 将完成其工作，但单击将没有任何效果。

验证您的页面是否受到 hydration (水合作用) 不佳影响的一种简单方法是打开 Chrome DevTools，在 Network 面板中选择 “Slow 3G (慢速 3G)” 网络模拟，然后重新加载页面。看到感兴趣的元素后，与之交互。您将看到按钮点击将被忽略，并且输入的文本将被后续页面加载代码重置。解决此问题的正确方法是确保在 hydration (水合作用) 之后（页面完全正常运行后）禁用所有交互式控件。

等待导航​

单击元素可能会触发多次导航。在这些情况下，建议显式使用 page.waitForURL() 等待特定 URL。

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

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

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

当响应标头已被解析并且会话历史记录已更新时，Navigation (导航) 被提交。仅在导航成功（已提交）后，页面才开始 loading (加载) 文档。

Loading (加载) 涵盖通过网络获取剩余的响应正文、解析、执行脚本和触发 load 事件