egg-uitest

egg的UI操作插件 使用Headless浏览器puppeteer，实现对页面进行UI操作。可用于页面的UI测试以及线上页面监控。 通过配置实现，无需写额外的操作代码。

• 支持元素检测、点击、输入、键盘按键等操作
• 支持页面的请求拦截
• 支持viewport尺寸设置

Install

$ npm i egg-uitest -S

Usage

// {app_root}/config/plugin.js
exports.uitest = {
  enable: true,
  package: 'egg-uitest',
};

Configuration

// {app_root}/config/config.default.js
exports.uitest = {
  // headless: false, // 设置成false 有界面展示 默认：true
};

Example

// {app_root}/app/controller/home.js
public async testOnce() {
  const { ctx } = this;
  const { config } = ctx.request.body;
  ctx.body = await this.ctx.uitest(config);
}

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
    }
  ],
}

License

MIT