B/S架构页面巡检实践

原创大头缦图coder

点击关注上方蓝字，阅读更多干货~

1 前言

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

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

2 技术选型

2.1 Chrome DevTools Protocol（CDP）

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

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