一个WEB自动化工具的编写

╰半橙微兮° 2023-09-26 21:46 106阅读 0赞

**背景：**使用自动化测试框架编写用例的时候，维护元素信息以及脚本较为麻烦。对应新手来说，编写脚本的能力有限，使用工具会更容易入手。最重要的是可视化操作让我觉得体验舒服。

### **演示地址** ###

地址：http://43.142.40.119/\#/login  
账号：test  
密码：A123456.  
首次访问稍慢一些

### **操作说明** ###

已有demo例子，由于部署在服务器，只能够调起服务器的浏览器。

### **WEB 测试功能介绍** ###

#### **统计图表** ####

首先需要选中项目，后续的测试都是在这个项目下进行。

展示用例/计划的当前数量统计，一周内新增统计，一周内执行结果统计。

![c35ee121547249fd615bd28f47a0b7ab.png][]

#### **项目管理** ####

管理不同的项目，创建完一个项目后，可以在统计图表选中这个项目，来展开后续的测试。

![4a651438fd6f80a9d3e45131dc617e4d.png][]

#### **元素管理** ####

元素库：元素的分类用树形结构管理，选中节点后展示其下面的元素列表。  
元素列表：管理当前分类下的所有元素。

![dfc1c77b57348c0b9775f85ed5f58b72.png][]

#### **用例管理** ####

**管理页面**

场景管理：用例的分类用树形结构管理，选中节点后展示其下面的用例列表。  
用例列表：管理当前分类下的所有用例。

![8362f43b3ae10cbb25f5216a1b07b711.png][]

**新建/编辑页面**

点击新建或编辑会跳转到该页面，展示详细信息。  
用例名称：用例的标识名称。  
所属分类：用例库下的分类名称。  
用例等级：用例的等级。  
用例描述：用例的详细信息。  
性能模式：性能模式能减少内存和cpu的占用，启用后程序在后台运行，不调起浏览器。  
出现异常截图：执行后异常的步骤会截图保存，在报告内可以查看。  
结束关闭浏览器：执行结束会关闭浏览器。  
忽略异常并继续执行：步骤出现异常不会暂停执行，会一直执行下面的步骤。  
数据驱动：用例用数据驱动的方式执行。上传 EXECL 文件后，文件内容的行数=执行的次数，行名称=步骤变量名，每次执行都会按每行内容替换步骤中的变量值。

![301dd89a973cf1aac98b37f8d27cfe50.png][]

**新建/编辑步骤**

步骤名称：自定义输入步骤的概要信息。  
操作类型：浏览器操作、元素操作、鼠标操作、输入操作、断言操作。  
操作对象：元素库选择或者直接输入定位表达式。  
启用状态：启用的会执行，不启用的会跳过。  
行背景色：选择后列表行会显示该颜色。

![1477e9bcbfd52956eb40c4956dbc0db3.png][]

**用例引用**

可以引用当前项目下所有的用例，比如我们常需要用到前置操作的登录，或后置操作的登出，可以用过它来引用。

引用完成后会关闭引用对话框且该引用在列表最后一行显示，可以通过行拖拽功能自由调整位置，用例步骤的执行顺序是从上到下的。

注意：用例A引用了用例B，如果用例B步骤变了，需要在用例A删除用例B，再重新引用用例B。

![b1594308e67fdfdb51fee29926df6789.png][]

**场景变量**

管理当前用例下所用到的变量。

字符串类型的变量，引用的方式为 $\{变量名\}；定义为全局的变量后，则在当前项目任何用例下都能使用。当前项目下变量名不能重名。

例：当前有个 变量名称为group在步骤中使用 $\{group\}，在后续执行中会替换变量值 “测试部”。

![c59cdff8a001d54935994d3280054075.png][]

**立即执行**

立即执行后，前端页面会进入loading状态来等待用例的执行，执行完成会打开全屏测试报告对话框。

![97dfab12bb6ad5d0bd8f87db1bbd1b5e.png][]

#### **执行计划** ####

**新建/编辑页面**

点击新建或编辑会跳转到该页面，展示详细信息。  
计划名称：计划的标识名称。  
计划描述：用例的详细信息。  
性能模式：性能模式能减少内存和cpu的占用，启用后程序在后台运行，不调起浏览器。  
出现异常截图：执行后异常的步骤会截图保存，在报告内可以查看。  
结束关闭浏览器：执行结束会关闭浏览器。  
忽略异常并继续执行：步骤出现异常不会暂停执行，会一直执行下面的步骤。  
异常告警：开启告警后可选择钉钉群发送告警消息，选择 @ 联系人后，输入手机号码用英文逗号隔开。

![e62db0feb0ddf16b7d7c84b02f676c0d.png][]

**用例引用**

与用例新建编辑页的引用一致，区别在于用例的新建编辑不光能引用其他用例，也能新建步骤，而计划内只能引用用例。

**立即执行**

立即执行后，前端页面会进入loading状态来等待用例的执行，执行完成会打开全屏测试报告对话框。

**调度执行**

依赖xxl-job任务调度中心去运行计划，xxl-job 的具体功能请参阅它的官网介绍，官方文档地址：https://www.xuxueli.com/xxl-job/。

调度执行：点击调度执行后，浏览器会打开新标签页，并打开调度平台登录页，并复制当前计划的 id（在任务参数输入框粘贴）。

![fecaad91bb49b804308919867bb76269.png][]

任务调度中心账号/密码 ：admin/123456

操作步骤：登录任务调度中心 --> 任务管理 --> 新建或更新任务 --> 任务参数输入框粘贴计划 id。启用任务会根据 cron 调度，执行一次则立马执行。执行完成后，可在测试报告列表页处查看执行人为 xxl-job 的记录。

![1f41c0a8aa2885cc7944fc20e92ba5e6.png][]

#### **测试报告** ####

用例执行、计划执行、调度计划执行后会生成相应的测试报告，点击报告名称可以查看报告详情。

![79b65fe71a4afaa0489cfcc4173acb75.png][]

### **总结** ###

也算初步完成了该工具，目前还是自己在测试使用，边使用边改问题也相对稳定了，之后也会持续更新。稳定了，把代码整理好会开源。

**最后：** 为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们如果需要可以自行免费领取**`【保证100%免费】`**

![在这里插入图片描述][9d205f76a3bb49d8bce29972548618fa.png_pic_center]

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

### 全套资料获取方式： ###

![9b1ef4bb3ae84db4b77c0d713018771a.gif][]

![59b2b9dee8804cc0932a0009afdc4fbc.gif][]

[c35ee121547249fd615bd28f47a0b7ab.png]: https://img-blog.csdnimg.cn/img_convert/c35ee121547249fd615bd28f47a0b7ab.png
[4a651438fd6f80a9d3e45131dc617e4d.png]: https://img-blog.csdnimg.cn/img_convert/4a651438fd6f80a9d3e45131dc617e4d.png
[dfc1c77b57348c0b9775f85ed5f58b72.png]: https://img-blog.csdnimg.cn/img_convert/dfc1c77b57348c0b9775f85ed5f58b72.png
[8362f43b3ae10cbb25f5216a1b07b711.png]: https://img-blog.csdnimg.cn/img_convert/8362f43b3ae10cbb25f5216a1b07b711.png
[301dd89a973cf1aac98b37f8d27cfe50.png]: https://img-blog.csdnimg.cn/img_convert/301dd89a973cf1aac98b37f8d27cfe50.png
[1477e9bcbfd52956eb40c4956dbc0db3.png]: https://img-blog.csdnimg.cn/img_convert/1477e9bcbfd52956eb40c4956dbc0db3.png
[b1594308e67fdfdb51fee29926df6789.png]: https://img-blog.csdnimg.cn/img_convert/b1594308e67fdfdb51fee29926df6789.png
[c59cdff8a001d54935994d3280054075.png]: https://img-blog.csdnimg.cn/img_convert/c59cdff8a001d54935994d3280054075.png
[97dfab12bb6ad5d0bd8f87db1bbd1b5e.png]: https://img-blog.csdnimg.cn/img_convert/97dfab12bb6ad5d0bd8f87db1bbd1b5e.png
[e62db0feb0ddf16b7d7c84b02f676c0d.png]: https://img-blog.csdnimg.cn/img_convert/e62db0feb0ddf16b7d7c84b02f676c0d.png
[fecaad91bb49b804308919867bb76269.png]: https://img-blog.csdnimg.cn/img_convert/fecaad91bb49b804308919867bb76269.png
[1f41c0a8aa2885cc7944fc20e92ba5e6.png]: https://img-blog.csdnimg.cn/img_convert/1f41c0a8aa2885cc7944fc20e92ba5e6.png
[79b65fe71a4afaa0489cfcc4173acb75.png]: https://img-blog.csdnimg.cn/img_convert/79b65fe71a4afaa0489cfcc4173acb75.png
[9d205f76a3bb49d8bce29972548618fa.png_pic_center]: https://img-blog.csdnimg.cn/9d205f76a3bb49d8bce29972548618fa.png#pic_center
[9b1ef4bb3ae84db4b77c0d713018771a.gif]: https://img-blog.csdnimg.cn/9b1ef4bb3ae84db4b77c0d713018771a.gif
[59b2b9dee8804cc0932a0009afdc4fbc.gif]: https://img-blog.csdnimg.cn/59b2b9dee8804cc0932a0009afdc4fbc.gif