B/S架构页面巡检实践

1 前言

在B/S架构下，软件以浏览器作为客户端运行，一旦部署上线，就需要耗费大量人力对其进行回归测试以确保系统的稳定性。回归测试主要关注软件的基础功能，这是一项高度重复的工作，要求不断打开页面并检查是否存在潜在错误。这包括但不限于页面是否报错、页面的请求是否完全加载成功，以及页面的响应时间是否过长等等。

传统的测试方法存在一些不足，不能及时发现问题，且需要投入大量人力。在页面巡检中，优化测试方法变得尤为重要。通过引入更智能、高效的测试策略，可以提高问题发现的效率，减少人力成本。因此，对于B/S架构下的软件，我们需要探索更先进的测试方法，以便更迅速、准确地发现潜在问题，确保系统的健壮性。

2 技术选型

2.1 Chrome DevTools Protocol（CDP）

Chrome DevTools Protocol（CDP）是一种开放的协议，由 Google 开发并用于与基于 Chromium 内核的浏览器进行通信和控制，允许开发者与浏览器进行通信和交互。CDP 提供了一种直接访问 Chrome 内部开发工具的方式，使开发者能够监控、调试和修改浏览器的行为。

1. 底层协议：CDP 提供了一种低级别的通信协议，允许开发者通过 WebSocket 连接与运行中的 Chrome 实例进行通信。这使得开发者能够直接控制浏览器的底层行为。
2. 强大的调试能力：CDP 允许开发者在运行中的浏览器中执行调试操作，例如断点设置、代码执行、监视变量等。这对于开发者来说是调试 Web 应用程序的强大工具。
3. 网络分析和修改：CDP 允许开发者监控和修改浏览器的网络请求和响应。开发者可以通过 CDP 进行网络性能分析、模拟不同网络条件，甚至修改请求或响应数据。
4. 页面加载控制：CDP 允许开发者控制页面的加载过程，包括导航、加载事件、资源请求等。这对于执行自动化测试或性能优化非常有用。
5. DOM 操作：CDP 提供了对 Document Object Model（DOM）的直接访问和操作能力。开发者可以通过 CDP 操作页面的结构，例如查找元素、修改元素属性等。
6. 浏览器性能分析：CDP 允许开发者进行浏览器性能分析，监控浏览器的运行时性能，并识别潜在的性能问题。
7. 安全性：CDP 的访问是受到安全限制的，需要经过授权。这确保了开发者对浏览器的访问是有限制和安全的。
8. 工具的自动化：CDP 可以被用于构建各种工具，例如自动化测试工具、性能分析工具等，以帮助开发者更好地理解和优化他们的 Web 应用程序。

通过 CDP，开发者可以构建自动化测试工具、性能优化工具、爬虫以及其他需要深入浏览器内部机制的应用程序。

2.2 PlayWright

Playwright 是一个由 Microsoft Edge 团队开发的开源浏览器自动化工具。它提供了一组强大的 API，用于控制浏览器的行为，执行自动化测试、截图、录制等任务。Playwright 的设计理念包括跨浏览器支持、多语言支持、良好的性能和强大的功能。

与传统的浏览器自动化工具如 Selenium 和 Puppeteer 相比，它们在一些方面存在差异，大家可以根据业务需求进行选择。

多语言支持	多测览器支持	无头测览器支持	原生CDP支持	社区活跃度
playwright	✓	✓	✓	✓	高
puppeteer	×	×	✓	✓	⾼
selenium	✓	✓	✓	>=V4.0	⾼

由于我们项目需要支持多种浏览器，首先排除了 puppeteer，因为 puppeteer 最初就是专为 Chrome 和 Chromium 而设计。

Selenium 虽然也是一款非常优秀的浏览器自动化工具，并且随着版本迭代，在最新的 Selenium 4 版本中也加入的 CDP 的支持，但 Selenium 需要自行导入封装各个模块，可能会导致启动变慢并且稳定性不高，所以我们技术选型使用同样支持多浏览器和 CDP 的 Playwright。

3 技术实现

3.1 整体架构

本次页面巡检基于经过封装的 Playwright，该工具提供了多语言的实现和 API 调用，最终通过 Chrome DevTools Protocol（CDP）协议来控制 Chromium 浏览器。巡检流程整体划分为三个关键模块，分别是基于 Vue 的展示层、基于 Java 的后端服务和基于 Node.js 的巡检服务。

图1 业务架构图

查略 playwright 官网可看到它⽀持多种开发预⾔，但是考虑到 Playwright 最初是的生态系统是基于 NodeJS 且在社区中有更多的支持和资源，所以巡检端使用 NodeJS 开发。

图2 playwright 官网展示页

3.2 业务流程

图3 业务流程图

触发巡检任务有两种方式，手动触发和自动触发。一旦触发了巡检任务，服务端会根据预先配置的巡检参数对目标页面进行基础参数拼装，然后通过 HTTP 请求将巡检请求发送到巡检端。

巡检端在接收到请求后，异步地触发 Playwright，使用无头浏览器加载页面，并收集页面的各种状态信息。最终，巡检端将收集到的信息打包回调给服务端。

服务端在处理巡检回调时，根据回调数据包与巡检的配置进行分析，生成巡检结果并通知相关团队成员。

4 主要功能

4.1 多系统间的兼容性

因巡检端本身支持 HTTP 协议，所以可以通过在多个不同系统部署巡检节点实现兼容性的简易测试，比如说 Linux、 Windows 、Mac。这样也可以模拟到用户在不同的操作环境下的体验，提高系统的稳健性。

不同的操作系统可能对页面渲染、请求等有不同的行为结果，可以更加全面的评估系统在各个操作系统下的表现。

4.2 灵活的配置

1. 业务关注：通过关注页面内各个请求的状态码匹配，能够更准确地捕获业务逻辑中的问题，而不仅仅是 HTTP 请求的成功或失败。
2. 定制化配置：URL 过滤和重复巡检次数的配置允许根据具体需求对巡检行为进行定制，使其更适应不同页面和业务场景。
3. 排除偶发性问题：通过配置重复巡检次数，可以排除⼀些偶发性的问题，提高巡检结果的准确性。

4.3 页面性能结果的收集

使用 CDP 控制 Chromium 浏览器提供了很多性能数据，我们可以通过分析这些数据，能够了解前端页面的加载渲染和执行过程。

1. 性能数据收集：获取页面加载时的详细性能数据，包括网络请求、JavaScript 执行时间以及渲染过程，为我们提供全面的性能指标。
2. 网络请求分析：监控和分析每个网络请求的详细信息，包括请求和响应头、状态码和请求耗时，帮助识别慢速请求和其他影响性能的问题。
3. JavaScript 执行分析：跟踪 JavaScript 代码的执行过程，发现可能导致页面延迟的脚本，为代码优化提供有针对性的指导。
4. DOM 和 CSS 分析：获取页面的 DOM 结构和 CSS 样式信息，有助于识别可能导致页面渲染问题的元素和样式。
5. 页面截图：通过获取页面截图，提供可视化的视觉反馈，方便检查页面的加载状态。

5 结语

5.1 总结

页面巡检是⼀种全面的自动化测试方法，目的是验证 Web 应用程序的前端 UI 和后端接口的正常运行。通过结合 UI 自动化和接口自动化，页面巡检可以有效地捕获并验证系统中的各种问题，包括但不限于页面渲染、功能交互、接口请求等方面。

通过综合利用 UI 自动化和接口自动化，页面巡检成为确保 Web 应用程序高质量、高稳定性的关键测试策略。在快节奏的软件开发中，页面巡检的全面性和效率提升为团队提供了可靠的保障，确保系统在不断迭代中保持稳健。

5.2 后续计划

• JsonSchema 支持：利用 JsonSchema 对触达业务做针对性和自动化测试，减少人工的投入
• 移动设备的支持：目前基于 NodeJS 的 PlayWright 已经实验性支持了 Android 设备
• 增强子链的兼容性：目前部分子链兼容性还是较差，比如页面内嵌的 iframe 或者动态链接等

本文作者

大头，来自缦图互联网中心测试团队。

来源-微信公众号:缦图coder

出处:https://mp.weixin.qq.com/s/SzJhQ2pPXHWgsmV9qdBk0A