Hello Playwright:(8)等待页面加载

在我们前面的文章中,我们始终使用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

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

9204cc4d6e42673b8a79e8372d646d7b.png

DOMContentLoaded

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

79c1d68fc44a05f6aa9f83cb89605e7e.jpeg

Load

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

927019bd211db43ed5a27651a5d90d9b.jpeg

NetworkIdle

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

5e0b3937d9948ca9defc41455be168ca.jpeg

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

93d1a16dc32f31c1c147eb29ed634232.jpeg

结论

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

Commit -> DOMContentLoaded -> Load -> NetworkIdle

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

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

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值