基于jest和puppeteer的前端自动化测试实战

标签：equal   and   launch   resolve   tom   fun   全局变量   fine   网站   

前端测试现状

经常听到后端同学说“单元测试”，前端写过测试用例的有多少？答案是：并不多，为什么呢？两个主要原因

1、前端属于GUI软件，浏览器众多，兼容问题让人头大，用户量有一定规模的浏览器包括：

　　IE8、IE9、IE10、IE11、chrome、FireFox、360浏览器、搜狗浏览器、QQ浏览器……

要在这么多浏览器上做几轮测试并不容易

2、前端界面变化快，很多时候界面比测试脚本迭代的更快，测试跟不上脚步，投入产出不成正比

以上两点导致前端测试不受重视，很多前端开发者可能工作数年仍未写过单元测试，这是现状

该不该写前端测试，还是得视项目情况而定，一般标准的开源项目都会做单元测试，所以有必要了解一下前端测试大概是个什么东西

分类

前面一直说的是前端测试而不是单元测试，是因为前端不同于后端，前端是有界面的，测试应该分为单元测试和集成测试

所谓单元测试，就是测试一个函数或某个代码片段，通过模拟输入确保输出符合预期

实例1：以下是一个完整的测试用例，用来测试函数sum是否按预期的计算两个数字之和

const sum = (a,b) => { 
    return a+b;
} 
describe(‘分组测试描述‘,() => {
    test(‘test 1+1‘, () => {
        expect(1 + 1).toBe(2);
    });    
})

解释一下两个关键字：

describe，作用是将test分组，影响 beforeEach/afterEach/beforeAll/afterAll四个方法的作用域，它有两个参数

第一个参数就是分组描述，描述这个分组是干嘛的

第二个参数是个回调函数，内部可以有多个test，test的作用是声明一个测试

test，作用就是声明一个测试，有三个参数

第一个同样是描述，描述测试内容

第二个也是回调，内部为详细测试内容

第三个是测试超时时间，默认为5s钟，做单元测试一般都是足够的，集成测试一般都是不够的，可以用jest.setTimeout(timeout)方法修改所有test默认超时时间

集成测试，测的是一个功能模块，比如用户注册功能，集成测试又包括UI测试，UI测试用于确保页面正常渲染

集成测试完全是用测试脚本去模拟用户操作，比如打开浏览器、点击注册链接、输入用户名密码、点击注册

UI测试怎么确保页面正常渲染？

两种方式：像素级对比和快照

像素及对比，就是首先人肉确认页面渲染正常，执行脚本对页面截个图，下次利用测试脚本截个图跟上次的截图的每个像素自动进行对比，如果每个像素都一样，那么测试通过

快照，这里的快照不是截图的意思，而是将页面渲染后的DOM结构生成一个序列化的文本，下次再次生成一个序列化的DOM文本与之对比，如果内容完全一样，测试通过，做快照测试，必须保证多次测试输出快照总是一致的，然而在react中，model经常变化，这时就要用mock模拟函数返回固定数据确保model不变，mock功能在下文有介绍

主流库 

流行的单元测试包括jest、mocha、jasmine、……

流行的集成测试库包括puppeteer、casperJS、PhantomJS、……

jest的特点是零配置、即时反馈，它所有测试用例默认是并行执行的，速度快，它也可以配置成串行，在调试时比较有用，jest每个测试用例文件都是一个沙箱，在单个测试文件内部定义或修改全局变量，不会影响其它测试文件，jest由Facebook团队维护，对React友好，适合大型项目

mocha是一个精简而灵活的单元测试框架，它本身没有包含断言库和mock（模拟）功能，需要自行引入其它库，而jest和jasmine都自带断言库和mock功能，什么是mock，后面会介绍

puppeteer是个神器，它并不仅仅可以做自动化集成测试，它本身是个node库，自带chromuium浏览器（所以npm安装它比较慢），它提供了一些高级API通过DevTools协议控制headless chrome或chromuium，它也可以配置为使用有界面版的chrome，既然是浏览器，chrome能做到的它基本都能做到，chrome做不到的，它也能做到，用puppeteer做集成测试，测试用例是真正在真实的浏览器上执行的，下面几点都是它所擅长的

• 生成页面屏幕截图或pdf
• 自动提交表单，做UI测试、模拟键盘输入、鼠标操作等
• 创建一个最新的自动化测试环境，用最新的JavaScript和浏览器功能，直接在最新的chrome中做测试
• 捕获你网站的时间线跟踪，以帮助诊断性能问题

casperJS是一个基于PhantomJS的库，它封装了PhantomJS的API使它更容易使用，PhantomJS内置了webkit的内核，测试用例并不是跑在真正的浏览器上面

本文的重点是jest和puppeteer，下面是实例和API都是基于这两者

Setup 

如果在执行jest测试用例之前需要做一些配置，在用例执行完做一些清除操作，那你需要了解下面4个API

断言 

expect(sum(1,1)).toBe(2);

function timeout() {
    setTimeout(() => {
        console.count(‘count‘);
        timeout();
    }, 10000);
}

jest.useFakeTimers();

test(‘useFakeTimers‘, () => {
    timeout();
    jest.runOnlyPendingTimers();
    expect(setTimeout).toHaveBeenCalledTimes(2);
});

function forEach(items, callback) {
    for (let index = 0; index < items.length; index++) {
        callback(items[index]);
    }
}

test(‘test forEach‘, () => {
    const mockCallback = jest.fn();
    forEach([0, 1], mockCallback);
    // The mock function is called twice
    expect(mockCallback.mock.calls.length).toBe(2);
    // The first argument of the first call to the function was 0
    expect(mockCallback.mock.calls[0][0]).toBe(0);
    // The first argument of the second call to the function was 1
    expect(mockCallback.mock.calls[1][0]).toBe(1);
}); 

// done
test(‘async test‘, done => {
    function callback(data) {
        expect(data).toBe(‘xx‘);
        done();
    }
    fetchData(callback);
});

// return promise
test(‘async test‘, () => {
    //判断当前测试有一个断言被执行
    expect.assertions(1);
    return fetchData().then(data => {
        expect(data).toBe(‘xx‘);
    });
});

test(‘works with resolves‘, () => {
    expect.assertions(1);
    return expect(user.getUserName(5)).resolves.toEqual(‘xx‘);
});

// async/await can be used.
it(‘works with async/await‘, async () => {
    expect.assertions(1);
    const data = await user.getUserName(4);
    expect(data).toEqual(‘xx‘);
});

// async/await can also be used with `.resolves`.
it(‘works with async/await and resolves‘, async () => {
    expect.assertions(1);
    await expect(user.getUserName(5)).resolves.toEqual(‘xx‘);
});

基于jest和puppeteer的前端自动化测试实战

标签：equal   and   launch   resolve   tom   fun   全局变量   fine   网站   

原文地址：https://www.cnblogs.com/wangmeijian/p/9080188.html