?> 为页面测试而生， 彻底解决页面测试的繁琐操作，提升测试乐趣！
<iframe src="//player.bilibili.com/player.html?aid=759967057&bvid=BV1764y1v7is&cid=392078147&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" framespacing="0" height="600" style=”width: 100%;height: 500px; max-width: 100%;align:center;padding:20px 0;” > </iframe>- 测试脚本通过录制实现，上手简单，效率高
- 上手方便，不需要额外的编码能力，使用多种方式定位dom
- 测试文件管理复用方便，维护成本低
市面上的 ete 测试框架很多，但对许多测试人员的编码能力有一定的要求，而且随着业务复杂度的提高，每一次迭代都可能导致重新编写测试脚本修改，可维护性很差，迁移能力较弱，测试成本高，结合以上问题，我们对 ete 测试框架做了二次封装，尽可能减少对测试人员编码的要求，满足日常多场景的测试，需要测试人员在 chrome 浏览器在开启 eTest 脚本录制工具，进行操作，便可生成测试人员想要的测试脚本，解放测试人员的臃肿烦躁的重复测试场景，让 ete 测试变的充满乐趣。使测试人员有更多的精力做更深层次的测试。
ete 测试，需要依赖操作者操作，收集录制脚本信息，所以需要安装 chrome 插件，通过启用插件，收集用户操作信息，生成 ete 测试需要的脚本文件。
!> Chrome 插件下载方式 eTest github 下载
- 支持 iframe 多嵌套操作 , 支持动态 iframe 插入问题 ✔️
- 支持关闭 alert 提示 ✔️
- 支持等待 dom 元素显示 ✔️
- 支持页面断言操作，数字类型的大于小于等于操作 ✔️
- 支持生成测试报告 ✔️
- 支持运行时页面请求错误收集 ✔️
- 支持延时操作处理 ✔️
- 支持运行自动化无头模式 ✔️
- 支持自动等待网络加载完成后操作 ✔️
- 支持阻止默认事件后，依然可以获取事件操作 ✔️
- 支持事件被阻止依旧可以收集 ✔️
- 支持断言错误自动截图 ✔️
- 支持在线修改 json 数据 ✔️
- 支持用例拖拽排序 ✔️
- 支持导出性能优化报告（lighthouse） ✔️
- 支持收集浏览器的前进后退刷新操作 ✔️
- 支持多 tab 页间的切换 ✔️
- 支持测试用例每一步的操作截图 ✔️
- 支持高级配置自定义对输入、断言修改 ✔️
- 支持获取页面的文本设置当前执行的变量 ✔️
- 支持自动收集页面滚动数据 ✔️
- 支持页面快捷键操作 ✔️
- 支持测试用例分组维护 ✔️
- 支持测试文件重命名修改 ✔️
- 支持导入导出文件信息 ✔️
- 支持设置缓存信息 ✔️
- 支持可视区域生成图片对比生成测试结果 ✔️
- 支持测试脚本按步骤调试 ✔️
- ete自动化测试报告，断言错误 支持视频回放查看结果 ✔️
- 支持在鉴权、登录请求下收集网站性能信息 ✔️
- 支持测试用例拖拽功能 ✔️
- 支持自定义函数、自定义插件扩展:heavy_check_mark:
- 支持多浏览器切换运行自动化测试 Chrome\Edge ✔️
- 支持测试报告图片放大预览:heavy_check_mark:
- 支持接口返回自定义请求值校验:heavy_check_mark:
- 支持mock请求返回值:heavy_check_mark:
- 支持文件上传:heavy_check_mark:
!> Chrome 插件下载方式 eTestv1.3.6 github 下载
打开浏览器管理扩展程序选择eTest插件，点击详情，打开在无痕模式下启用，即可。
打开右上角的 chrome 插件 点击小图标出现 start 状态，表示已启动测试脚本录制
?> 由于在脚本回放打开的是无痕浏览模式，所以在录制脚本的时候请先清除历史记录和缓存数据，以保证回放的时候的正确性，或者开启无痕模式录制脚本信息
点击网页操作，eTest 插件提示 添加一条操作事件 ，说明 eTest 插件正在记录用户在页面的操作。
!> 点击时间， 文本框，下拉框改变 都会触发该动作
选中文本，鼠标右键，选择期望的断言结果
根据用户选中的文本自动判断 string或者 number类型，然后自动生成需要的测试用例菜单列表，
注意
- 选择文本时，会自动选择当前标签内的全部内容。
- 如果选中的文本是含有两个相邻标签的内容，则会默认选中第一个标签的全部内容。
- 如果选中的文本内部包含多个标签 则会判断满足一定条件 最多 3 个子标签并且小于 200 字以内。
- load: 刷新
- click:单击事件
- dbclick:双击事件
- hover:鼠标 hover
- scroll:滚动至此
- 生成全局变量
!> 高级用法 生成全局变量 在需要的一些场景需要对页面的值做输入处理
- include:包含当前值
- exclude:不包含当前值
- greater：大于当前值
- equal：等于 当前值
- less：小于当前值
- include:包含当前值
- exclude:不包含当前值
点击右上 eTest 图标，结束测试脚本录制，并且生成测试脚本文件，下载到本地
!> 如果测试脚本用例小于 2 条，则不会生成脚本信息
通过chrome插件生成的脚本文件如下格式：
[
{
"active": true,
"audible": false,
"autoDiscardable": true,
"discarded": false,
"favIconUrl": "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg",
"groupId": -1,
"height": 882,
"highlighted": true,
"id": 83891737,
"incognito": false,
"index": 64,
"mutedInfo": { "muted": false },
"openerTabId": 83891734,
"pinned": false,
"selected": true,
"status": "complete",
"title": "百度一下，你就知道",
"url": "https://www.baidu.com/",
"width": 1680,
"windowId": 83891251,
"action": "start",
"indexNum": 0,
"date": 1678243527820,
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
"cookies": [
{
"domain": "www.baidu.com",
"expirationDate": 1711066469,
"hostOnly": true,
"httpOnly": false,
"name": "MSA_WH",
"path": "/",
"sameSite": "unspecified",
"secure": false,
"session": false,
"storeId": "0",
"value": "3901244"
}
],
"localStorage": {
"BAIDU_PRIVATE": "16ww496207",
"squarePop": "1",
"___ds_storage__eqid": "xxx|1679995377511",
"index_ls_qid": "xxx"
},
"sessionStorage": {
"BAIDU_PRIVATE": "xxx"
},
"isMobile": false,
"hasTouch": false,
"deviceScaleFactor": 1,
"type": "start"
},
{
"x": 505.5,
"y": 211.671875,
"url": "https://www.baidu.com/",
"date": 1678243529332,
"height": 44,
"xpath": "//*[@id=\"kw\"]",
"width": 550,
"value": "",
"clientX": 695,
"clientY": 234,
"selector": "document > html > body > div > div > div > div > div > form > span > input",
"iframe": "",
"indexNum": 1,
"innerHtml": "",
"localName": "input",
"localNameType": "text",
"type": "click"
},
{
"x": 505.5,
"y": 211.671875,
"url": "https://www.baidu.com/",
"date": 1678243539976,
"height": 38,
"xpath": "//*[@id=\"kw\"]",
"width": 471,
"value": "你好",
"clientX": 695,
"clientY": 234,
"selector": "document > html > body > div > div > div > div > div > form > span > input",
"iframe": "",
"indexNum": 2,
"innerHtml": "",
"localName": "input",
"localNameType": "text",
"type": "change"
},
{
"x": 725,
"y": 15,
"url": "https://www.baidu.com/",
"date": 1678243540156,
"height": 40,
"xpath": "//*[@id=\"su\"]",
"width": 112,
"value": "百度一下",
"clientX": 783,
"clientY": 36,
"selector": "document > html > body > div > div > div > div > div > form > span > input",
"iframe": "",
"indexNum": 3,
"innerHtml": "",
"localName": "input",
"localNameType": "submit",
"type": "click"
},
{
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
"isMobile": false,
"hasTouch": false,
"deviceScaleFactor": 1,
"type": "start",
"active": true,
"audible": false,
"autoDiscardable": true,
"discarded": false,
"favIconUrl": "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg",
"groupId": -1,
"height": 882,
"highlighted": true,
"id": 83891737,
"incognito": false,
"index": 64,
"mutedInfo": { "muted": false },
"openerTabId": 83891734,
"pinned": false,
"selected": true,
"status": "complete",
"title": "百度一下，你就知道",
"url": "https://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD&rsv_spt=1&rsv_iqid=0xece676f10009f696&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_sug3=10&rsv_sug1=10&rsv_sug7=101&sug=%25E4%25BD%25A0%25E5%25A5%25BD%2520%25E6%259D%258E%25E7%2584%2595%25E8%258B%25B1&rsv_n=1&rsv_btype=i&prefixsug=%25E4%25BD%25A0%25E5%25A5%25BD&rsp=0&inputT=9238&rsv_sug4=10826",
"width": 1680,
"windowId": 83891251,
"action": "replacePage",
"indexNum": 4,
"date": 1678243540180
},
{
"xpath": "//html",
"iframe": "",
"selector": "document",
"scrollTop": 594,
"scrollLeft": 0,
"type": "scrollWin",
"url": "https://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD&rsv_spt=1&rsv_iqid=0xece676f10009f696&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_sug3=10&rsv_sug1=10&rsv_sug7=101&sug=%25E4%25BD%25A0%25E5%25A5%25BD%2520%25E6%259D%258E%25E7%2584%2595%25E8%258B%25B1&rsv_n=1&rsv_btype=i&prefixsug=%25E4%25BD%25A0%25E5%25A5%25BD&rsp=0&inputT=9238&rsv_sug4=10826",
"indexNum": 5,
"date": 1678243545352
}
]| key | 描述 |
|---|---|
| url | 当前打开的 URL 地址信息 |
| x | 获取当前操作的 dom 位置 X 轴坐标 |
| y | 获取当前操作的 dom 位置 Y 轴坐标 |
| width | 当前录制的浏览器的宽度或者 获取当前操作的 dom 的宽度 |
| height | 当前录制的浏览器的高度或者 获取当前操作的 dom 的高度 |
| xpath | 获取当前操作的 dom 的唯一地址 |
| selector | 获取当前操作的 dom 的路径信息 |
| clientX | 获取当前操作的 dom 距离浏览器视口的 X 轴距离 |
| clientY | 获取当前操作的 dom 距离浏览器视口的 Y 轴距离 |
| type | 获取当前操作的 dom 操作类型 click、change、scrollWin、load、dbclick |
| date | 当前操作的 dom 操作录入的时间 |
| iframe | 当前网页是否嵌有 iframe 地址 |
| indexNum | 当前测试用例的索引 |
| scrollTop | 如果触发了 type为scrollWin需要记录滚动的上下位置 |
| scrollLeft | 如果触发了 type为scrollWin需要记录滚动的左右位置 |
打开集成测试 创建项目然后点击项目 进入ETE,可以通过点击新增 导入文件或者创建分组
!> 注意：导入文件会覆盖项目下的 ete 之前维护的脚本文件，请谨慎操作
新建分组，有利于分类归纳维护测试脚本文件，
上传测试脚本文件后可以按照分组归纳，如果需要调整分组，文件排序 按住 分组, 文件 拖动即可实现排序,
!> 注意：测试的文件需按顺序执行，如果出现断层则会影响测试结果。
测试文件上传时默认 选中; 如果没有勾选选中，在执行测试用例的过程中，则不被执行当前测试文件 支持 分组、单个脚本勾选
对分组、脚本的 删除 、重命名 操作，对后续的展示测试报告的时，更加友好
运行 ete 测试过程中，如果需要停止任务，可点击 停止运行，结束此次运行，运行结束后，生成测试报告报告名称 是项目名称加当前时间拼接成的，模式分为自动和手动 两种模式，自动：是定时任务运行的；手动：是用户自己运行的用例；
!> 注意：首次运行自动化前，请检查本地是否按装chrome 浏览器
测试报告列表，会展示一些关键信息 ,断言结果,请求错误,页面错误,用时 汇总信息
展示测试报告详情，解析也页面 断言结果、 请求接口错误 、页面错误 ，如果断言结果发生； 错误，则会截图展示错误结果，方便开发者查看断言错误原因；断言结果通过分组+ 脚本名称+ 脚本索引，可以更加快速的定位到测试脚本信息，页面在执行的过程中，出现了请求错误，则会抓取请求地址以及错误类型，展现在页面上； 页面错误：在运行 ete 过程中出现的错误，加载超时、找不到元素等，都会被列举出来。
设置性能分析后，ete 在测试结束时也会导出页面性能的分析报告，开发人员可以通过分析报告，参考web.dev完成对页面的性能优化，提升了页面的加载性能的优化。
点击 文件名称,弹出测试用例详细信息，可以对 测试用例文件进行简单的编辑操作，如assertions 表示断言信息，assertions.action表示断言结果, 如果熟悉断言 可直接修改断言信息，保存运行提高测试的执行效率
{
"editable": false,
"frameId": 0,
"linkUrl": "http://news.baidu.com/",
"menuItemId": "include",
"pageUrl": "https://www.baidu.com/",
"selectionText": "新闻",
"type": "assert",
"xpath": "//*[@id=\"s-top-left\"]",
"iframe": "",
"assertions": {
"value": "新闻",
"action": "include"
},
"indexNum": 12
}测试用例中有些测试场景需要支持文件上传，针对这个测试用例，可能需要开发者code代码
{
"xpath": "//*[@id="page-content"]/div/div/div[1]/div/div[1]/div[1]/div/div[1]/input",
"filePath": "/Users/xxx/Desktop/desktop/myproject/load.png",
"type": "upload",
"iframe": "",
"selector": "document",
"url": "https://www.xiaomiyoupin.com/",
}| key | 描述 | 是否必填 |
|---|---|---|
| url | 当前打开的 URL 地址信息 | Y |
| filePath | 上传文件路径地址，支持绝对路径，或者默认桌面文件 | Y |
| type | 获取当前操作的 dom 操作类型 upload | Y |
| xpath | 获取当前操作的 dom 的唯一地址 | Y |
| selector | 获取当前操作的 dom 的路径信息 | N |
| iframe | 当前网页是否嵌有 iframe 地址 | N |
!> 如果修改的测试用例信息过多，建议重新录制脚本信息，防止文件执行过程报错，影响测试结果。
- 无头模式：配置启动测试是否自动在无头模式下运行 默认是
fasle - 开启调试：配置开启调试模式后，仅在手动执行下生效，需要通过快捷键
ctrl+f执行下一步默认是fasle - 性能分析： 浏览器测试时，是否收集性能分析报告，定时任务不会开启性能分析 默认是
fasle - 行为快照： 对于页面的每一步操作都会生成快照,待用力执行完毕后，会自动导出到桌面，定时任务不会开启行为快照 ，默认是
fasle - 设置缓存：
cookies、localStorage中，这种情况只要开启此功能，会在开启页面的时候将数据塞进浏览器中，对sessionStorage缓存无效，并且多个脚本同一个key不同的value有优先使用第一个，cookies、localStorage中，这种情况只要开启此功能，会在开启页面的时候将数据塞进浏览器中，对sessionStorage缓存无效，并且多个脚本同一个key不同的value有优先使用第一个， - 开启高级配置：
开启高级配置需要再高级配置中，配置环境变量，不开启高级配置中的配置的变量不被生效 - 开启插件配置：
开启插件配置需要再高级配置中，配置插件配置，不开启高级配置中的插件配置不被生效 - 开启环境配置： ：
开启环境配置：需要再高级配置中，配置环境配置，不开启高级配置中的插件配置不被生效 - 超时时间：浏览器在操作时，等待下一个操作的最长时间 默认是
60s - 延迟时间：由于一些特色场景需要设置长时间等待，最大不得超过
60s，延迟时间与超时时间同时设置延迟时间不得超过超时时间
对于多环境的测试问题，可以通过配置环境域名来实现在不同的环境下执行测试用例，但是需要保证在执行的测试用例的数据是一致的
首先配置需要区分的环境变量
添加需要配置的替换的环境名称
启用环境变量
再执行自动化测试任务中有些入参是不能重复提交的，这就导致了我们录入的脚本信息，再跑定时任务的过程中，需要自定义配置入参
- 手动新增环境变量
- 来源分为
手动设置（可以自定义配置环境变量）、页面取值（通过录制脚本，获取需要取值的文本作为环境变量使用，可以修改） - 测试可以对于生成的环境变量取值是否符合预期
变量名称： 必填 唯一长度不能超过 20 位
取值方式：非必填 测试工具提前内置的函数
固定值：非必填 取值方式 为固定值时显示该文本，可录入该值
合并方式： 分为 前缀、后缀、替换 ，默认后缀；
- 固定值:自定义一个固定的值
- 页面取值： 脚本录制生成的变量（页面取值），自定义不可设置,
- 随机字母 2 位,
- 随机字母 4 位,
- 随机字母 6 位,
- 随机字母 8 位',
- 随机数 2 位',
- 随机数 4 位',
- 随机数 6 位',
- 随机数 8 位',
- 日期:分秒
- 日期:时分
- 日期:月日时
- 日期:月日时分
- 日期:年月日时分
- 日期:年月日时分秒
系统可设置环境变量的值为value，点击value既可以设置变量，选择需要设置的变量名称 保存即可
为了增强 ETE 测试功能，满足更多的测试场景，我们引入了扩展功能，方便测试自身设定的场景，我们提供自定义插件来满足需求；通过可插拔的使用方式，提升 ete 的扩展能力，全方位覆盖测试场景 可以参考plugin。
选择 插件需要执行的生命周期
?> 配置完成高级配置后，必须在全局配置开启 开启高级配置、开启插件配置、开启环境配置 总开关，否则高就配置就不会生效，