uitester-puppeteer v0.2.1

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

describle

actions && afterIt字段定义

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

action管理

setCookie时，其value示例：

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

it字段定义

it.condition字段定义：

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 子方法：

示例：

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);