使用 Chrome 中的工具进行顺畅的自动化测试

测试很重要。在向用户分发您构建的内容(无论是整个网站或应用,还是新功能)之前,这是一个关键步骤,以检查其是否按预期运行。不过,许多测试仍然会手动进行,需要同事或测试工程师查看新功能并报告问题。

Matthias Rohmer
Matthias Rohmer

虽然这种手动测试可以显示某些类别的问题,但可能会遗漏很多问题。执行测试的人员可能会错过极端情况,或者完全无法测试通过应用的特定历程。他们也没有您在编写代码时获得的所有信息,他们不知道您添加了代码来防止出现哪些具体问题。并且,随着时间的流逝和不断添加新功能,他们是否会返回并重新测试之前正常运行的所有功能,以确保这些更改没有破坏它们?

这就是 Chrome 团队坚信自动化测试的重要性的原因。通过使用可可靠且反复测试功能是否出现故障的测试套件,您可以确保每个小细节都可以在未来的开发中得到测试。您作为功能开发者的知识会封装在测试中。

不过,我们知道自动化测试可能颇具挑战性。因此,Chrome 团队提供了以下工具和指南,帮助您尽可能顺畅地使用应用。

木偶操作师

Puppeteer 是一个 Node.js 库。它可让您通过一个简单易用的高级 API 实现 Chrome、Chromium 和 Firefox 的自动化。

虽然此 API 最初基于 Chrome DevTools 协议,但我们的目标是在今年年底前使新的高级 WebDriver BiDi 协议成为 Puppeteer 的基础。WebDriver BiDi 是由所有主流浏览器供应商共同打造的,它简化了许多自动化用例,并实现了许多新的自动化用例,并且具有跨浏览器兼容性。

但您无需等待。目前,Puppeteer 的 API 已经支持许多自动化用例,只有 WebDriver BiDi 可以改进这些用例。您可以使用网页互动请求拦截屏幕截图等功能执行很多操作,包括测试、可视化抓取和流程自动化。您甚至可以使用 WebGPU 和 WebGL 在云端测试 Web AI 模型

此外,Puppeteer 也用于 WebdriverIO(一种成熟的浏览器测试框架)和 Privacy Sandbox Analysis Tool(Privacy Sandbox 分析工具)等工具,可让您更好地了解自己网站上的 Cookie 和用户数据使用情况。

Chrome 无头

如果您曾使用 Puppeteer 自动执行 Chrome,则可能会发现在运行测试时不会显示浏览器窗口。默认情况下,Puppeteer 会在 Headless 模式下启动 Chrome。这意味着,在自动化操作运行时,没有实际的浏览器窗口。

但您知道吗?Chrome 的无头模式不仅是无窗口的 Chrome,而且实际上是完全单独维护的 Chrome 版本。长期以来,一直造成混淆,难以查明 bug 和问题。

从 Chrome 112 开始,我们推出了一种新的无头模式,该模式现在基于与常规 Chrome 相同的代码库。这不仅减少了之前的混淆,还带来了之前不可能实现的功能,例如在自动化过程中使用扩展程序。

从版本 22 开始,Puppeteer 一直将这种新的无头模式用作默认模式。如果您是通过其他自动化解决方案使用 Chrome 无头模式,则可以使用 --headless=new 命令行开关强制采用新的无头模式。

虽然 Chrome 全新的无头模式功能更强大,但不如旧的无头模式那样轻量。如果您的资源受到严重限制或不需要 Chrome 的所有功能,则可以将旧版无头模式用作 chrome-headless-shell

Chrome for Testing

测试时,您需要对测试环境(操作系统、浏览器和浏览器版本)进行精细控制。Chrome 的自动更新功能可能很难实现

因此,我们打造了 Chrome for Testing,这是一个无自动更新的 Chrome 版本,与每个主要操作系统的 Chrome 版本一起发布,适用于各种主要操作系统,可通过版本归档访问。这样,您就可以针对特定的 Chrome 版本运行自动化工作流,而无需大费周章。

您可以通过 Chrome for Testing 可用性信息中心JSON APIPuppeteer 命令行实用程序访问 Chrome for Testing 二进制文件。


Puppeteer、Chrome 更新后的无头模式和 Chrome for Testing 只是我们的团队目前开展的工作,旨在尽可能为您顺畅地实现浏览器自动化和运行测试。此外,DevTools Recorder 等相关工具也支持您创建测试:在 Chrome 中录制用户流,然后在 Puppeteer 中重放该流。

在 web.dev 上了解测试

本博文中介绍的工具可帮助您改进自动化测试。不过,如果您刚刚起步,那么理解和学习似乎有很多内容。因此,我们创建了一个新的课程(共 10 个单元)- 在 web.dev 上学习测试。此课程深入探讨测试的核心概念、测试的运行位置和方式、测试类型,以及实际测试的内容。它是您测试旅程的一个良好起点。掌握基础知识后,您可以随时前往我们的“测试自动化”课程,其中包含有关更具体的测试问题的深入探究和实用提示。