从Trae翻车到Claude重生：我的UI自动化测试平台开发实录

前言

很久没有更新【AI测试平台开发】系列的文章了。最近断更的日子里，我也没有闲着，而是在用AI编程工具开发UI自动化测试模块。

在用Trae国内版这款AI工具开发测试平台的实践中，由于我给的需求比较简单，直接让它仿写它前面调研好的几款测试平台，没有详细的需求明细，再加上这款AI编程工具也是各种拉胯，所以开发出来的效果也就惨不忍睹。在我调试了整整两小时、让它自我修复了“七七四十九个bug”后，项目才算勉强运行起来。

后面我保留了部分优秀的功能设计，又用Claude Code重构了一版。所以从本篇开始，将会持续分享CC重构及改造UI自动化测试平台的操作实践。

一、为什么要开发UI自动化测试平台？

现在市面上，不乏各种UI自动化测试框架，例如Selenium、Playwright；也不乏各种优秀的商用的、开源的UI自动化测试平台，例如Metersphere、Testim；尤其是近两年AI大爆发后，各种AI自动化测试框架或AI测试平台更是层出不穷，例如Midsence.js、Browser Use等。

那么为什么还要重复造轮子呢？其实回答这个问题也很简单，主要有以下几点：

1. 高度定制化：别人开发的终究是别人的，开源的还好点，要是商用的，根本无法拿来改造；而自己开发，则可以高度定制化，切实解决个人测试过程中遇到的痛点。
2. 培养解决问题的能力：既是练手，也是学习；不仅是学习AI，更是学习如何去解决问题。因为在实践过程中，会有各种各样的屏障，学会逐一击破，既锻炼心智、毅力，也锻炼解决问题的能力。
3. 具备造轮子的能力：很多时候，我们不一定要造很多轮子，但一定要具备造轮子的能力；不是说“入职拧螺丝、面试造火箭”吗？得先入职才行机会拧螺丝啊。
4. “一人即团队”的摸索：自从AI爆火以后，编程门槛被大大降低。大家从原来的各司其职（产、研、测），到现在一人兼任多种角色：既是产品，又是开发，同时也是测试，甚至还可以兼运维，还能充当用户，自己给自己提需求。AI时代，“人人都是产品经理”的说法已经过时，不如说“一人即一个团队”。
5. 理论与实践结合：想，永远都是问题；干，才是硬道理！路，是人走出来的。哪怕是照着别人的路走，也需要亲自走才行。

二、设计理念

先说说设计理念。起初，我是直接让Trae仿写它前面调研好的几款测试平台，再结合各家的优秀设计及功能特点，融百家之所长，给我开发出一款炫酷高大上而又实用的测试平台，然后我再慢慢优化改进。但很遗憾，翻车了。

于是，我在保留了Trae开发出来的部分可用功能的基础上，再通过Claude Code按照“元素->用例->套件”的传统思路，进行重构和细化改造，后续再融入开源AI测试框架，使其既具备传统的UI自动化测试能力，也具备AI测试能力。

1.元素

传统的“元素->用例->套件”的理念很好理解。元素就是提供各种定位方法使其能够定位到这个页面元素，在创建的时候可以单独创建一个页面（集合），在此页面下创建页面元素。这也与UI自动化测试中“PageObject”的思想不谋而合。

2.用例

与传统的手动测试用例或是自己编码编写的UI自动化测试用例类似，一个用例就是一个单独可运行的场景。步骤由元素+操作（点击、输入、滑动等）组成，多个步骤组合起来形成一个场景，也就是用例。

3.套件

多个测试用例组合成一个测试套件，用于测试某一或某些特定页面、流程、场景等。

4.执行记录与测试报告

测试的执行记录或测试结果，属于结果展示层面。

5.多引擎、多浏览器

通过不同测试引擎（Playwright、Selenium）在不同浏览器（Chrome、Firefox、Safari、Edge）上执行测试。

6.定时任务与通知

用于驱动多个测试套件执行，发送结果通知到不同平台（邮件、钉钉、飞书、企微），支持任意配置。

三、页面效果与功能实现

1.数据看板

说完了设计理念，再来看看截止目前为止，整个UI自动化测试平台所实现的功能效果。

首先是数据看板：

1. 顶部展示项目、用例、测试套件、执行记录相关数据的统计；
2. 中间展示平台操作记录以及各个菜单的快捷跳转入口；
3. 底部展示核心功能介绍；

2.项目管理

然后是项目管理，展示当前待测试的所有项目，也是整个模块下最大的单元结构。后面所有的用例、套件、脚本、报告都是基于项目开展的。

3.元素管理

类似于Postman集合（页面）下再创建请求（元素）的组织形式，展示各个页面下的操作按钮、输入框、下拉框等页面元素，支持多种元素定位方式。同时与PageObject的思想不谋而合，元素管理中只关心元素，不关心操作。至于怎么组织元素，那是后面测试用例干的事儿。

4.用例管理

1. 将各个页面元素+操作形成操作步骤，再将各个步骤组合为测试用例，步骤之间支持上下拖拽移动；
2. 支持Playwright+Selenium双执行引擎，Chrome、Firefox、Safari等多浏览器，有头/无头模式执行；
3. 执行结果展示具体的执行步骤、失败截图、错误信息；

5.脚本生成

通过添加元素操作，使其生成为直接复制可用的测试脚本，支持Playwright或Selenium，切换不同语言（这块目前稍显鸡肋，后续会考虑如何优化）。

6.套件管理

将多条测试用例组合为测试套件，用于测试某一或某些特定页面、流程、场景等；

7.执行记录

对于手动单独执行的测试用例和测试套件驱动执行的测试用例，均生成执行记录，有点类似前面开发的接口测试模块的“请求历史”。执行详情中展示具体的执行日志、失败截图、错误信息，支持一键重跑；

8.测试报告

手动执行的测试用例不生成测试报告，只有手动运行测试套件或定时任务批量执行多个测试套件，才生成测试报告，详情中展示套件内每条用例的运行结果；同样地，每条用例也支持查看具体的结果详情；

9.定时任务与通知

1. 定时任务：支持多种触发器类型、任务类型和测试执行选项；

1. 通知列表：展示执行成功后发送到各个平台的通知；

1. 通知配置：支持配置多种通知类型，飞书、企微、钉钉。

四、不足与改进计划

看到这里的朋友，相信大家都有一个明显的体会，当前只是一个传统意义上的UI测试平台，并不具备AI测试能力。所以后续的开发计划也会围绕“AI测试”展开，结合时下较为流行的Midsence.js、Browser Use、Playwright Agents等开源框架，将其打造为基于AI的具备自愈能力、智能元素识别的UI自动化测试平台。

欢迎动动你发财的小手关注、点赞、收藏，如果你有什么好的创意，也可以留言与我交流！