跳到主要内容

导航

简介

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

基本导航

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

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

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

注意

如果页面在 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 的操作就像一个非常快的用户——一旦看到按钮,就会点击它。通常情况下,你无需担心是否所有资源都已加载等问题。

水合作用

有时你可能会遇到 Playwright 执行了某个动作,但似乎什么都没发生的情况。或者你输入了一些文本到输入字段,然后它消失了。这背后最可能的原因是页面水合作用不佳。

当页面进行水合时,首先会向浏览器发送页面的静态版本。然后发送动态部分,页面变得“活泼”。作为一个非常快速的用户,Playwright 会在看到页面的那一刻就开始与之交互。如果页面上的按钮是启用的,但监听器尚未添加,Playwright 会执行其操作,但点击不会产生任何效果。

验证你的页面是否存在水合作用不佳的简单方法是打开 Chrome DevTools,在 Network 面板中选择“Slow 3G”网络模拟并重新加载页面。一旦看到目标元素,就与之交互。你会发现按钮点击会被忽略,并且输入框中的文本会被随后的页面加载代码重置。解决这个问题的正确方法是确保在水合作用完成后,页面完全可用时,所有交互式控件才被启用。

等待导航

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

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

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

导航开始通过更改页面 URL 或与页面交互(例如,点击链接)。导航意图可能会被取消,例如,遇到无法解析的 DNS 地址或转换为文件下载。

导航提交在响应头被解析并且会话历史记录更新时发生。只有在导航成功(已提交)后,页面才开始加载文档。

加载涵盖通过网络获取剩余的响应体、解析、执行脚本和触发加载事件