Hello Playwright:等待页面加载

Posted dotNET跨平台

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Hello Playwright:等待页面加载相关的知识,希望对你有一定的参考价值。

在我们前面的文章中,我们始终使用await page.GotoAsync(url);加载页面,我们的目的是等待足够长的时间让页面上的元素出现。但是,我们更希望永远不要因为等待浪费任何时间。

WaitUntil

GotoAsync方法的定义如下:

Task<IResponse?> GotoAsync(string url, PageGotoOptions? options = null);

而在PageGotoOptions参数中,有一个WaitUntil,它的作用是判断当前操作是否成功。可选值包括:

  • DOMContentLoaded 认为在 DOMContentLoaded 事件完成时操作完成

  • Load 认为在 load 事件完成时操作完成

  • NetworkIdle 认为在至少 500 毫秒内没有网络连接时操作完成

  • Commit 认为接收到网络响应并且文档开始加载时操作完成

上述概念从字面上不好理解,下面让我们用一个 Demo 来演示一下:

var url = "https://stackoverflow.com/";
 
var page1 = await browser.NewPageAsync();
await page1.GotoAsync(url, new PageGotoOptions  WaitUntil = WaitUntilState.Commit );
await page1.ScreenshotAsync(new PageScreenshotOptions  Path = "Commit.png", FullPage = true );

var page2 = await browser.NewPageAsync();
await page2.GotoAsync(url, new PageGotoOptions  WaitUntil = WaitUntilState.DOMContentLoaded );
await page2.ScreenshotAsync(new PageScreenshotOptions  Path = "DOMContentLoaded.png", FullPage = true );

var page3 = await browser.NewPageAsync();
await page3.GotoAsync(url, new PageGotoOptions  WaitUntil = WaitUntilState.Load );
await page3.ScreenshotAsync(new PageScreenshotOptions  Path = "Load.png", FullPage = true );

var page4 = await browser.NewPageAsync();
await page4.GotoAsync(url, new PageGotoOptions  WaitUntil = WaitUntilState.NetworkIdle );
await page4.ScreenshotAsync(new PageScreenshotOptions  Path = "NetworkIdle.png", FullPage = true );

我们用 4 种不同的WaitUntil值等待 https://stackoverflow.com/ 加载完成并截图。下面是对应的效果

Commit

仅显示了页面默认窗口视图下的元素。

DOMContentLoaded

显示了完整页面(图片太长,仅截取了部分)。

Load

和 DOMContentLoaded 的效果基本一样,但是包含了所有图片资源。

NetworkIdle

和 Load 的效果基本一样,但是页面顶部出现了警告。

这是因为,有个 js 文件无法下载,需要等待网络连接超时关闭:

结论

通过上面的 Demo,我们已经可以判断出页面加载的整个状态变化如下:

Commit -> DOMContentLoaded -> Load -> NetworkIdle

你可以根据实际情况,选择最适合的WaitUntil,避免无效的等待。

添加微信号【MyIO666】,邀你加入技术交流群

以上是关于Hello Playwright:等待页面加载的主要内容,如果未能解决你的问题,请参考以下文章

Hello Playwright:执行 JavaScript 代码

Hello Playwright:与元素交互

Hello Playwright:模拟键盘和鼠标

Hello Playwright:从开发到部署

Hello Playwright:基本概念

Hello Playwright:简化部署方式