前言

Playwright 可以导航到 URL 并处理由页面交互引起的导航。本篇涵盖了等待页面导航和加载完成的常见场景。

导航生命周期

导航从更改页面 URL 或通过与页面交互（例如，单击链接）开始。导航意图可能会被取消，例如，在点击未解析的 DNS 地址或转换为文件下载时。
解析响应标头并更新会话历史记录后，将提交导航。只有在导航成功（提交）后，页面才会开始加载文档。
加载包括通过网络获取剩余的响应主体、解析、执行脚本和触发加载事件：

调用 page.goto(url) 后页面加载过程：

page.url 设定新的 url
document 文档内容通过网络加载并解析
page.on(“domcontentloaded”) 事件触发
执行页面的 js 脚本，页面执行一些脚本并加载 css 和图像等资源
page.on(“load”) 事件触发
页面执行动态加载的脚本
networkidle 当 500 毫秒内没有新的网络请求时触发

事件状态

导航到 URL 会自动等待页面触发事件load。如果页面之前进行了客户端重定向load，page.goto()将自动等待重定向页面触发事件load。

从源码可以看到 wait_until 等待的事件可以支持[“commit”, “domcontentloaded”, “load”, “networkidle”] 四个参数，默认是等待load 触发。

wait_until:Union[“commit”，“domcontentloaded”，“load”，“networkidle”，无]当认为操作成功时，默认为“加载”。事件可以是：

domcontentloaded：在触发“domcontentloaded”事件时完成操作。
load：触发 load事件时完成操作。
networkidle：当 500 毫秒内没有新的网络请求时触发，认为操作已完成。
commit：考虑在接收到网络响应并且文档开始加载时完成操作。

    def goto(
        self,
        url: str,
        *,
        timeout: typing.Optional[float] = None,
        wait_until: typing.Optional[
            Literal["commit", "domcontentloaded", "load", "networkidle"]
        ] = None,
        referer: typing.Optional[str] = None
    ) -> typing.Optional["Response"]:

如果我们希望ajax 也请求完成了，再继续下一步，那么可以覆盖默认行为以等待特定事件，例如 networkidle.
(对于 click、fill 等操作会自动等待元素出现。)

# Navigate and wait until network is idle
page.goto("https://example.com", wait_until="networkidle")

等待元素

在延迟加载的页面中，使用locator.wait_for()等待元素可见是很有用的。或者，像page.click()这样的页面交互会自动等待元素。

# Navigate and wait for element
page.goto("https://example.com")
page.get_by_text("example domain").wait_for()

# Navigate and click element
# Click will auto-wait for the element
page.goto("https://example.com")
page.get_by_text("example domain").click()

页面交互

click/fill 会自动等待

在下面的场景中，locator.click()启动导航，然后等待导航完成。
默认情况下，locator.click()将等待导航步骤完成。这可以与导航页面上的页面交互相结合，该页面交互将自动等待元素。

# Click will auto-wait for navigation to complete
page.get_by_text("Login").click()

# Fill will auto-wait for element on navigated page
page.get_by_label("User Name").fill("John Doe")

自定义等待

locator.click可以结合page.wait_for_load_state()来等待加载事件。

page.locator("button").click()  # Click triggers navigation
page.wait_for_load_state("networkidle")  # This waits for the "networkidle"

等待元素

在延迟加载的页面中，使用locator.wait_for()等待元素可见是很有用的。或者，像locator.click()这样的页面交互会自动等待元素。

# Click triggers navigation
page.get_by_text("Login").click()
# Click will auto-wait for the element
page.get_by_label("User Name").wait_for()

# Click triggers navigation
page.get_by_text("Login").click()
# Fill will auto-wait for element
page.get_by_label("User Name").fill("John Doe")

异步导航

单击一个元素可以在启动导航之前触发异步处理。在这些情况下，建议显式调用page.expect_navigation()。例如：

导航是从setTimeout
页面在导航前等待网络请求

# Waits for the next navigation. Using Python context manager
# prevents a race condition between clicking and waiting for a navigation.
with page.expect_navigation():
    # Triggers a navigation after a timeout
    page.get_by_text("Navigate after timeout").click()

多重导航

击一个元素可能会触发多个导航。在这些情况下，建议将 page.expect_navigation() 显式指向特定的 url。例如：

load事件后发出的客户端重定向
多次推送到历史状态

# Using Python context manager prevents a race condition
# between clicking and waiting for a navigation.
with page.expect_navigation(url="**/login"):
    # Triggers a navigation with a script redirect
    page.get_by_text("Click me").click()

加载弹出窗口

打开弹出窗口时，显式调用page.wait_for_load_state()可确保将弹出窗口加载到所需状态。

with page.expect_popup() as popup_info:
    page.get_by_text("Open popup").click() # Opens popup
popup = popup_info.value
popup.wait_for_load_state("load")

高级模式

对于具有复杂加载模式的页面，page.wait_for_function()是定义自定义等待条件的强大且可扩展的方法。

page.goto("http://example.com")
page.wait_for_function("() => window.amILoadedYet()")
# Ready to take a screenshot, according to the page itself.
page.screenshot()

timeout 等待超时

timeout 参数可以设置页面加载超时时间, 默认是30秒，传递“0”以禁用超时。

timeout : Union[float, None]
            Maximum operation time in milliseconds, defaults to 30 seconds, pass `0` to disable timeout. The default value can
            be changed by using the `browser_context.set_default_navigation_timeout()`,
            `browser_context.set_default_timeout()`, `page.set_default_navigation_timeout()` or
            `page.set_default_timeout()` methods.

更改默认值可以使用以下方法更改

browser_context.set_fault_navigation_timeout（）进行更改，
browser_context.set_fault_timeout（），
page.set_fault_navigation_timeout）
page.set_fault_timeout（）