egg-uitest
egg的UI操作插件 使用Headless浏览器puppeteer,实现对页面进行UI操作。可用于页面的UI测试以及线上页面监控。 通过配置实现,无需写额外的操作代码。
- 支持元素检测、点击、输入、键盘按键等操作
- 支持页面的请求拦截
- 支持viewport尺寸设置
Install
$ npm i egg-uitest -S
Usage
// {app_root}/config/plugin.jsexportsuitest = enable: true package: 'egg-uitest';
Configuration
// {app_root}/config/config.default.jsexportsuitest = // headless: false, // 设置成false 有界面展示 默认:true;
Example
// {app_root}/app/controller/home.jspublic async { const ctx = this; const config = ctxrequestbody; ctxbody = await thisctx;}
config完整示例
"config": "page": "url": "https://m.baidu.com" // 访问百度 "monit": "delay": 1 // 页面打开1秒后开始 "steps": "type": "check" // 检查是否存在【搜索框】 "elements": "name": "搜索框" "selector": "#index-kw" "type": "type" // 【搜索框】输入内容【新闻联播】 "value": "新闻联播" "elements": "name": "搜索框" "selector": "#index-kw" "type": "keyboard" // 按下键盘【回车键】 "key": "Enter" "options": "screenshot": true // 这个步骤给截图 "type": "check" // 检查是否存在元素【播放按钮】和【商品图片】 "elements": "name": "播放按钮" "selector": ".kg-video-result-abstract-play" "name": "商品图片" "selector": ".product" "options": "delay": 1 // 这个步骤延迟1秒执行
返回示例
"monitResult": "result": false "msg": "【商品图片】数量有误,目标为1个,现有0个。" "process": "【等待1s...】" "【搜索框】数量正确" "【搜索框】输入内容【新闻联播】" "【Enter键】" "【截图】http://image.uc.cn/s/uae/g/0n/uim/1569322222459-i0co6hwgf8e.png" "【等待1s...】" "【播放按钮】数量正确" "【等待1s...】" "【商品图片】数量有误,目标为1个,现有0个。" "errScreenShot": "http://image.uc.cn/s/uae/g/0n/uim/1569322224782-r8o39tc206m.png"
具体配置
page // 页面信息 viewport // viewport monit // 具体执行步骤
page
// 页面url "url": "https://baidu.com" // 请求加工 "request": "urlFilters": "baidu.com" // 过滤url // 添加对应参数 "params": "token": "asjKJYJK8888hHJKK"
viewport
"width": 375 "height": 667
monit
"delay": 3 // 单位(秒)预留时间供一些异步渲染 "steps": "type": "check" // check | click | keyboard | type "elements": "name": "" // 元素名称 用于标识元素 "selector": "" // 样式名 "amount": 10 // 非必填,默认是1 "options": // 非必填 "delay": 1 // 延迟 单位(s) "screenshot": false // 这一步骤是否需要截图 默认false "value": "" // 非必填,type为'type'时,需要填写输入的内容 "key": "" // 非必填,type为'keyboard'时,需要输入具体的按键。 // 每个按键对应的key: // https://github.com/GoogleChrome/puppeteer/blob/v1.20.0/lib/USKeyboardLayout.js