Skip to main content

导航

介绍​

¥Introduction

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

¥Playwright can navigate to URLs and handle navigations caused by the page interactions.

基本导航​

¥Basic navigation

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

¥Simplest form of a navigation is opening a URL:

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

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

¥The code above loads the page and waits for the web page to fire the load event. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images.

注意

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

¥If the page does a client-side redirect before load, page.goto() will wait for the redirected page to fire the load event.

页面何时加载？​

¥When is the page loaded?

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

¥Modern pages perform numerous activities after the load event was fired. They fetch data lazily, populate UI, load expensive resources, scripts and styles after the load event was fired. There is no way to tell that the page is loaded, it depends on the page, framework, etc. So when can you start interacting with it?

在 Playwright 中，你可以随时与页面交互。它会自动等待目标元素变成 actionable。

¥In Playwright you can interact with the page at any moment. It will automatically wait for the target elements to become actionable.

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

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

¥For the scenario above, Playwright will wait for the text to become visible, will wait for the rest of the actionability checks to pass for that element, and will click it.

Playwright 的操作速度非常快 - 当它看到按钮时，它就会点击它。一般情况下，你不需要担心所有资源是否加载等等。

¥Playwright operates as a very fast user - the moment it sees the button, it clicks it. In the general case, you don't need to worry about whether all the resources loaded, etc.

Hydration​

在某个时间点，你会偶然发现一个用例，Playwright 执行一个动作，但似乎什么也没发生。或者你在输入字段中输入一些文本，它就会消失。其背后最可能的原因是 hydration 页面质量不佳。

¥At some point in time, you'll stumble upon a use case where Playwright performs an action, but nothing seemingly happens. Or you enter some text into the input field and it will disappear. The most probable reason behind that is a poor page hydration.

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

¥When page is hydrated, first, a static version of the page is sent to the browser. Then the dynamic part is sent and the page becomes "live". As a very fast user, Playwright will start interacting with the page the moment it sees it. And if the button on a page is enabled, but the listeners have not yet been added, Playwright will do its job, but the click won't have any effect.

验证页面是否水合不良的一个简单方法是打开 Chrome DevTools，在“网络”面板中选择 "3G 速度慢" 网络模拟并重新加载页面。一旦你看到感兴趣的元素，就与其进行交互。你将看到按钮单击将被忽略，并且输入的文本将由后续页面加载代码重置。解决此问题的正确方法是确保所有交互式控件均处于禁用状态，直到水合作用之后，即页面完全发挥作用时。

¥A simple way to verify if your page suffers from a poor hydration is to open Chrome DevTools, pick "Slow 3G" network emulation in the Network panel and reload the page. Once you see the element of interest, interact with it. You'll see that the button clicks will be ignored and the entered text will be reset by the subsequent page load code. The right fix for this issue is to make sure that all the interactive controls are disabled until after the hydration, when the page is fully functional.

等待导航​

¥Waiting for navigation

单击一个元素可能会触发多个导航。在这些情况下，建议显式 page.waitForURL() 到特定 url。

¥Clicking an element could trigger multiple navigations. In these cases, it is recommended to explicitly page.waitForURL() to a specific url.

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

¥Navigation events

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

¥Playwright splits the process of showing a new document in a page into navigation and loading.

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

¥Navigation starts by changing the page URL or by interacting with the page (e.g., clicking a link). The navigation intent may be canceled, for example, on hitting an unresolved DNS address or transformed into a file download.

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

¥Navigation is committed when the response headers have been parsed and session history is updated. Only after the navigation succeeds (is committed), the page starts loading the document.

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

¥Loading covers getting the remaining response body over the network, parsing, executing the scripts and firing load events:

  • page.url() 设置为新的 url

    ¥page.url() is set to the new url

  • 文档内容通过网络加载并解析

    ¥document content is loaded over network and parsed

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

    ¥page.on('domcontentloaded') event is fired

  • 页面执行一些脚本并加载样式表和图片等资源

    ¥page executes some scripts and loads resources like stylesheets and images

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

    ¥page.on('load') event is fired

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

    ¥page executes dynamically loaded scripts