Giter Club home page Giter Club logo

sam-ui-test's Introduction

sam-ui-test

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

使用

原理  

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

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

使用步骤

  1. 一些依赖
  • Node.js >= 10.x

  • peerDependencies
    jest >= 26.6.3
    puppeteer-core >= 9.1.1

  1. 安装 sam-ui-test
npm install sam-ui-test --save
  1. 新建测试文件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();
})();
  1. 更改 package.json 文件
"scripts": {
    "test": "jest ./example.test.js"
},
  1. 执行测试命令获取测试结果
npm run test

解释

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

代码发布

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

项目规划

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

sam-ui-test's People

Contributors

dependabot[bot] avatar wushanchao avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.