sam-ui-test

sam-ui-test 是一个组合 Chrome，Jest，Puppeteer 的自动化 UI 测试配置库。
它通过面向配置编程的思路，结合 Jest 的断言能力和 Puppeteer 控制 Chrome 的能力，来降低部分场景下的自动化 UI 测试的上手成本。

使用

原理

基于 Jest 对 UI 测试场景进行抽象封装测试用例：

场景，步骤，操作行为，期望结果

使用步骤

一些依赖

Node.js >= 10.x
peerDependencies
jest >= 26.6.3
puppeteer-core >= 9.1.1

安装 sam-ui-test

npm install sam-ui-test --save

新建测试文件example.test.js 并添加内容如下。

const samuitest = require("sam-ui-test");

samuitest({
  name: "截屏",
  browserConfig: {
    // Mac系统
    executablePath:  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
  },
  step: [
    {
      name: "打开百度并对首页进行截屏",
      action: [
        {
          method: "goto",
          arg: ["https://www.baidu.com"],
        },
        {
          method: "screenshot",
          arg: [{ path: "example.png" }],
        },
      ],
    },
  ],
});

对比下 puppeteer 官网的代码

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://example.com");
  await page.screenshot({ path: "example.png" });

  await browser.close();
})();

更改 package.json 文件

"scripts": {
    "test": "jest ./example.test.js"
},

执行测试命令获取测试结果

npm run test

解释

action 里面的 method 方法默认是 puppeteer 的 page 实例方法。具体可参考这个链接。
当 method 方法是 expect 时，expect 是 jest 的 expect 方法。
后续提供上下文切换选项。

代码发布

执行npm login --registry http://registry.npmjs.org登录账号
修改 package.json 版本号，通常+1
执行npm publish --registry http://registry.npmjs.org发布

项目规划

配置化基本功能完善
场景变量，行动变量的支持配置参数校验自定义 action 函数
配置化转 DSL 化
自动化接口测试和自动化 UI 测试的接口一致化
优化多进程并行测试方案
优化需求变化引起的测试用例变化同步更新方案

wushanchao/sam-ui-test

sam-ui-test

使用

原理

使用步骤

解释

代码发布

项目规划