QA 自动化测试

栏目: 编程工具 · 发布时间: 4年前

内容简介：测试风格： ①测试驱动开发TDD 关注所有功能是否被实现，每个功能必须有对应的测试 ②行为驱动开发BDD 关注整体行为是否符合整体预期，编写的每一行代码都有目的提供一个全面的测试用例集比较常用的断言库 chai.js (TDD BDD) 或者 Jasmine.js(BDD)

单元测试
性能测试
安全测试
功能测试
UI还原测试

提前准备好node环境 此文章是按照 linux 或者mac系统为例

unit 测试

npm init -y

新建index.js

window.add = function(num){
    return num + 1;
}
复制代码

新建 index.spec.js

describe("函数基本的API测试",function(){
    it('+1函数是否可用',function(){
        expect(window.add(1)).toBe(2)
    })
})
复制代码

测试风格： ①测试驱动开发TDD 关注所有功能是否被实现，每个功能必须有对应的测试 ②行为驱动开发BDD 关注整体行为是否符合整体预期，编写的每一行代码都有目的提供一个全面的测试用例集

比较常用的断言库 chai.js (TDD BDD) 或者 Jasmine.js(BDD)

安装测试框架 karma npm install karma --save-dev
全局安装 karma-cli sudo npm install karma-cli -g
在QAtest目录 karma init 注意选择browsers 使用 PhantomJS 无头浏览器
配置 karma.conf.js 具体详细配置请查看官网这里我只修改了一下 files autoWatch singleRun

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      "./tests/unit/*.js",
      "./tests/unit/*.spec.js"
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['PhantomJS'],
    singleRun: true,
    concurrency: Infinity
  })
}
复制代码

装一些依赖包 npm install karma-jasmine karma-phantomjs-launcher jasmine-core --save-dev
在package.json中配置scripts "unit": "karma start"
执行 npm run unit 这样即可看到是否测试成功
这个时候我们只是检查我们写的测试并不知道程序的所有地方是否健康因此我们需要让karma提供检查测试覆盖率 =>karma-coverage 这个库用来检查覆盖率
npm install karma karma-coverage --save-dev
参考karma-coverage修改karma.conf.js
- reporters: ['progress', 'coverage']
- preprocessors: { './tests/unit/**/*.js': ['coverage'] }
- coverageReporter: { type : 'html', dir : './docs/coverage/' }
- 打开docs 你会发现:heartpulse: unit/index.html

e2e 页面功能测试

在tests目录下建立 e2e 目录用于页面功能测试

npm install selenium-webdriver --save-dev

const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('http://www.baidu.com/');
    await driver.findElement(By.name('wd')).sendKeys('女神', Key.RETURN);
    await driver.wait(until.titleIs('女神_百度搜索'), 1000);
  } finally {
    await driver.quit();
  }
})();
复制代码

更多的js的api参考链接

选择对应的浏览器驱动浏览器-设置-关于chrome 查看版本下载驱动
将下载好的驱动解压到 QAtest 目录下扔那就行
在package.json中配置scripts "e2e": "node ./tests/e2e/index.js"
npm run e2e

UI测试

在tests目录下建立 UI 目录用于页面功能测试

cnpm install backstopjs --save-dev
添加 package.json的 scripts "init":"backstop init" 并执行 npm run init ;

初始化完了之后这个init 就没有用了我们改为 "ui":"backstop test"

修改配置文件

{
  "id": "study",  //自定义 你叫的名字
  "viewports": [   //适配兼容 根据你UI给你的图 是哪个标准的尺寸
    {
      "label": "phone",
      "width": 375,
      "height": 667
    },
    {
      "label": "tablet",   //这里是测试ipad的 
      "width": 1024,
      "height": 768
    }
  ],
  "onBeforeScript": "puppet/onBefore.js",
  "onReadyScript": "puppet/onReady.js",
  "scenarios": [
    {
      "label": "qqmap",  //给图片起的名字
      "cookiePath": "backstop_data/engine_scripts/cookies.json",  // 这是如果网站需要cookie  就写在 cookies.json中
      "url": "https://map.qq.com/m/",  //注意  这里是你初始化测试的链接  我这里以腾讯地图为例
      "referenceUrl": "",
      "readyEvent": "",
      "readySelector": "",
      "delay": 0,
      "hideSelectors": [],
      "removeSelectors": [],
      "hoverSelector": "",
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "expect": 0,
      "misMatchThreshold" : 0.1,
      "requireSameDimensions": true
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",  //这里这个文件夹  放置UI 参考图
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "./docs/backstop_data/html_report", // 导出报表的位置
    "ci_report": "./docs/backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "engineOptions": {
    "args": ["--no-sandbox"]
  },
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": false,
  "debugWindow": false
}

复制代码

执行 npm run ui ;
这个时候你可以看到报错了是因为我们还没有放参考的图片我们在 QAtest/backstop_data/bitmaps_reference/study_qqmap_0_document_0_phone.png 放入你参考的图片
这个时候会自动打开浏览器并显示测试结果

是不是 UI哪里有问题就整的明明白白的了！！~ 不用跟你家UI 扯淡了

servers 测试

在tests目录下建立 servers 目录用于服务测试

npm install express --save-dev

const express = require("express");

var app = express();

app.get("/test",(request,response)=>{
    response.send({
        data:'hello world'
    })
})
const server = app.listen(3000,()=>{
    console.log("server start")
})
module.exports = app;
复制代码

node ./tests/servers/app.js
npm install mocha --save-dev
npm install mochawesome --save-dev
npm install supertest --save-dev

const app = require("./app");

function request(){
    return superagent(app.listen())
}

describe("Node接口测试",function(){
    it("test接口测试",function(done){
        request()
        .get("/test")
        .expect(200)
        .expect("Content-Type",/json/)
        .end(function(err,res){
            if(err){
                done(err)
            }
            if(res.body.data == "hello world"){
                done()
            }else{
                done(new Error("接口数据异常"))
            }
        })
    })
})  
复制代码

在根目录新建 mochaRunner.js

const Mocha = require("mocha");
mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: './docs/mochawesome-report',
      //quiet: true
    }
  });

mocha.addFile("./tests/servers/router.spec.js");
mocha.run(function(){
    process.exit();
})
  
复制代码