uitester-puppeteer

基于puppeteer的UI自动化测试

使用

安装

npm i uitester-puppeteer -S

具体使用

const Tester = require('uitester-puppeteer');
const cases = [
  // ...
];
const options = {
  // ...
};
let tester = new Tester(cases, options);

tester.on('start', () => {});
tester.on('describe_start', (describe) => {});
tester.on('describe_done', (describe) => {});
tester.on('action_start', (action) => {});
tester.on('action_done', (action) => {});
tester.on('it_start', (it) => {});
tester.on('it_done', (it) => {});
tester.on('done', (result) => {});
tester.on('fail', (result) => {});
tester.on('complete', (result) => {});

cases 示例

以下示例模拟登陆，并检查是否登录成功

const cases = [
  {
    describe: '全局测试',
    newBrowser: false,
    newPage: false,
    actions: [
      {
        name: '打开环境',
        value: 'https://xxx',
        action: 'open',
        waitForAfter: 1000,
        screenshot: true
      },
      {
        name: '填充用户名',
        action: 'type',
        selector: '#username',
        value: 'admin'
      },
      {
        name: '填充密码',
        action: 'type',
        selector: '#password',
        value: '123456'
      },
      {
        name: '提交',
        action: 'click',
        selector: '#submit',
        waitForAfter: 1000
      },
    ],
    it: [{
      name: '测试验证',
      selector: '#content',
      condition: 'hasText'
    }],
    afterIt: [
        // 同actions
    ]
  }
];

options

|属性|说明|类型|默认值| |--|--|--|--| | global | 全局变量，可供测试用例中的 action、it、afterIt 的 value 使用 | map | - | | dev | 决定是否打开调试日志、是否headless | boolean | false | | sandBox | 是否沙盒模式 | boolean | false | | clientWidth | 默认视口宽度 | number | 1024 | | clientHeight | 默认视口高度 | number | 768 | | screenshotPrePath | 截图存放目录，需要保证其写入权限没问题。目录不存在，会自动创建。 | string | 无 |

describle

|字段|解释| |--|--| |newBrowser|一般连续写多个 describe，而且后面的 describe 依赖前面的 describe （比如在之前的 action 中本地记录过cookie、localStorage、sessionStorage），所以默认一个完整测试中，新的 describe 不重新打开浏览器。反之，将会销毁之前的浏览器，重新打开浏览器。| | newPage | 一般连续写多个 describe，而且后面的 describe 依赖前面的 describe （比如在之前的 action 中已经登陆过，进入到了某个页面），所以默认一个完整测试中，新的 describe 不重新打开新的页面。反之，将会关闭之前的page，重新打开一个新的page（这时候往往需要重新 open 一个 url） | | actions | 执行的动作 | | it | 执行的验证（只有一个验证条件，建议都用 its 的方式） | | its | 执行的验证（数组，有多个验证条件） | | afterIt | 数据格式和actions是一样的，其作用一般是用来清除前面actions带来的副作用。比如，测试过程中建立了一条数据，我们就可以在afterIt里面定义action，把这条数据删除掉。 |

actions && afterIt字段定义

| 字段 | 解释 | 值 | |--|--|--| | name | 动作名称 | - | | value | 动作可能涉及到的内容，比如打开的url、填充的值，支持引用和模拟 | - | | action | 执行动作，后续会逐步扩展 | 详情见action管理表格 | | selector | 选择器 | 支持css选择器和xpath | | screenshot | 产品报告中是否截图（初始化不传screenshotPrePath，则不会截图） | 默认false | | waitFor | 等待当前selector出现 | 超时时间，ms，默认1000ms | | waitBefore | 动作前延时 | ms | | waitAfter | 动作后延时 | ms | | delay | 延时 | ms,type输入的时候会用到 | | frameName | 测试对象切换到iframe | iframe的name属性值 | | frameUrl | 测试对象切换到iframe | iframe的src属性值 | | frameTitle | 测试对象切换到iframe | iframe的title属性值 |

当action===frame的时候，可以通过iframe的 frameName、frameUrl、frameTitle属性来定位（只需要一个字段即可，frameName > frameUrl > frameTitle）

action管理

| name | 说明 | |--|--| | open | 打开一个页面 | | click | 点击一个元素 | | type | 表单输入 | | frame | 切换到 iframe | | mainframe | （切换到 iframe 之后）切换到父窗口 | | setCookie | 设置 cookie | | script | 执行原生脚本， string: script 或者 promise: fun | | screenshot | 仅截图 |

setCookie时，其value示例：

{
  name: string,
  value: string,
  url: string,
  domain: string,
  path: string,
  expires: string|number,
  httpOnly: boolean,
  secure: boolean,
  sameSite: boolean
}

it字段定义

| 字段 | 说明 | 类型 | |--|--|--| | name | 验证器名称 | string | | selector | 选择器 | string | | condition | 条件, 参考下边 “it.condition字段定义” | string | | value | 用来做判断的值，支持引用和模拟 | boolean | string | number | | screenshot | 是否截图 | false |

it.condition字段定义：

| name | 说明 | 对应value类型 | |--|--|--| | isEmpty | 无innerText | boolean | | isEmptyHtml | 无innerHTML | boolean | | isNotEmpty | 有innerText | boolean | | isNotEmptyHtml | 有innerHTML | boolean | | equal | innerText全等 | boolean | | equalHtml | innerHTML全等 | boolean | | notEqual | innerText不全等 | boolean | | startWith | innerText以value开始 | string | | endWith | innerText中以value结束 | string | | notStartWith | innerText不以value开始 | string | | notEndWith | innerText中不以value结束 | string | | contain | innerText中含有value | string | | notContain | innerText中不含有value | string | | countEqual | selectors的长度为value | string | | countNotEqual | selectors的长度不为value | string | | countMore | selectors的长度大于value | number | | countLess | selectors的长度小于value | number |

value 值的引用和模拟

从 0.1.0 版本开始，测试用例中的 action、it、afterIt 中的 value 值支持引用和模拟。

而被引用的 global 里面的值也可以被模拟。

引用

引用是指从 global 对象中进行引用。相关模板字符串为：'<global:VARIABLE>'。

如果 VARIABLE 变量在 global 中不存在，则返回空字符串。

示例：

const Tester = require('uitester-puppeteer');
const cases = [
  {
    describe: '全局测试',
    newBrowser: false,
    newPage: false,
    actions: [
      {
        name: '填充用户名',
        value: '<global:username>',
        action: 'open',
        waitForAfter: 1000,
        screenshot: true
      },
      ...
    ],
    ...
  }
];
const options = {
  global: {
    username: 'admin'
  },
  ...
};
let tester = new Tester(cases, options);

模拟

数据的模拟基于 mock.js。相关模板字符串为：'<mock:@PLACEHOLDER>'。PLACEHOLDER 为 mock.js 的占位符。

模板字符串中的 @占位符 与 Mock.Random 中的方法一一对应

Mock.random 子方法：

| Type | Method | | --- | --- | | Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now | | Image | image, dataImage | | Color | color | | Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle | | Name | first, last, name, cfirst, clast, cname | | Web | url, domain, email, ip, tld | | Address | region, province, city, county, zip | | Miscellaneous | guid, id |

示例：

const Tester = require('uitester-puppeteer');
const cases = [
  {
    describe: '全局测试',
    newBrowser: false,
    newPage: false,
    actions: [
      {
        name: '填充任务 ID',
        value: '<global:taskId>',
        action: 'type',
        selector: '#taskId'
      },
      {
        name: '填充邮箱',
        value: '<mock:@email>',
        action: 'type',
        selector: '#email'
      },
      ...
    ],
    ...
  }
];
const options = {
  global: {
    taskId: '<mock:@guid>'
  },
  ...
};
let tester = new Tester(cases, options);