Getting started: Front-end automation test Karma, Backstopjs, Selenium- WebDriver, Mocha

Preface:

Recently, I have been learning front-end automation testing, and have been exposed to many testing frameworks, such as Karma+Jasmine+ Karma – Coverage: Unit testing and test code coverage, Backstopjs: CSS regression testing, Selenium- WebDriver: E2E testing, Mocha+ CHAI: Asynchronous test, encountered a lot of pits, barely managed to run through a basic process, if there are mistakes, welcome to point out, thank you.

Github address: fetest

1.Karma+Jasmine+karma-coverage

A unit test (module test) is a small piece of code written by a developer to verify that a small, well-defined function of the code under test is correct. Typically, a unit test is used to determine the behavior of a particular function under a particular condition (or scenario).

Karma is a JavaScript Test Runner based on Node.js. The tool can be used to test all major Web browsers, integrated into the Continuous Integration (CI) tool, and used with other code editors. A powerful feature of this test tool is that it can monitor (Watch) file changes and then execute them on its own.

Jasmine is a Behavior Driven Development (TDD) testing framework, a JS testing framework that doesn’t rely on browsers, DOM, or other JS frameworks. Refer to the official API for specific syntax.

1.1 To unit test code using Karma, you first need to install a series of related plug-ins.

Create the fetest folder and enter

Install the karma

npm install -g karma-cliCopy the code

npm install karma --save-devCopy the code

Install various related plug-ins

npm install karma-jasmine karma-phantomjs-launcher jasmine-core --save-dev
Copy the code

Initialization, the overall configuration options are as follows:

karma init
Copy the code

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> noCopy the code

Start the karma

karma startCopy the code

If the following interface appears, it indicates success. You can proceed to the next step. Phantomjs needs to be installed for the first time

npm install -g phantomjsCopy the code

After initialization, a karma. Conf.js file is generated in our project, which is the configuration file for karma.

// Karma Configuration // Generated on Sat Jun 02 2018 11:06:15 GMT+0800 (China standard Time) Module. exports = Generated on Sat Jun 02 2018 11:06:15 GMT+0800 (China standard Time) Modulefunction(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: ' ',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'// List of files/patterns to loadin the browser
    files: [
       './unit/**/*.js', // The path to the code being tested'./unit/**/*.spec.js'// List of files/patterns to exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, //test results reporter to use
    // possible values: 'dots'.'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true// Concurrency level // How many browser should be started simultaneous Concurrency: Infinity}Copy the code

Create the Unit folder and create index.js, index.spec.js

index.js

function add (num){
    if(num == 1){
        return 1;
    }else{
        returnnum+1; }}Copy the code

index.spec.js

describe("Testing simple basic functions".function() {
    it("+ 1 test".function() {
        expect(add(1)).toBe(1);
        expect(add(2)).toBe(5);
    });
});Copy the code

Start the karma

karma startCopy the code

One success, one mistake.

1.2 Test code coverage using Karma-Coverage

Install the karma – coverage

npm install karma-coverage --save-devCopy the code

Create a docs folder to store the generated test files and configure the karma. Conf.js file:

// Karma Configuration // Generated on Sat Jun 02 2018 19:49:27 GMT+0800 (China standard Time) Module. exports = Generated on Sat Jun 02 2018 19:49:27 GMT+0800 (China standard Time) Modulefunction(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: ' ',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
        './unit/**/*.js'.'./unit/**/*.spec.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        'unit/**/*.js': ['coverage']// Generate code coverage checks for those files}, //test results reporter to use
    // possible values: 'dots'.'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter

    reporters: ['progress'.'coverage'], / / added'coverage'

    coverageReporter: {
          type : 'html'// Generate HTML page dir:'./docs/coverage/'// Web server port port: 9876, //enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}
Copy the code

Start the karma

karma startCopy the code

A Coverage folder is generated in Docs with a visual HTML page for the generated test code coverage.

Open index. HTML

Modified index. Spec. Js

describe("Testing simple basic functions".function() {
    it("+ 1 test".function() {
        expect(add(1)).toBe(1);
    });
});Copy the code

karma startCopy the code

Backstopjs: CSS regression test

Unlike Mocha, which relies on JavaScript to determine whether assertion statements are true or false, and PhantomJS, which simulates user actions, BackstopJS is a regression testing tool that compares changes in site snapshots. Therefore, he is more suitable for regression testing styles in projects to ensure that they do not change when we refactor the site, and he supports multiple browser sizes to test responsive layouts.

Simple point to say: BackstopJS, can automatically compare the UI out of the map and the front-end written map, inconsistent place will be marked.

BackstopJS has the following features:

Support multi-page, multi-test case testing
You can use scripts to simulate user interactions
Reports are available in both command line and browser formats
PhantomJS or SlimerJS are supported as the browser engine. In fact, the two engines can also transform the regression test scheme based on snapshot comparison, but BackstopJS is easier to use and can be configured to switch the engine.
Supports setting a variety of browser sizes to facilitate responsive layout testing
You can test HTML5 elements, such as web fonts and Flexbox
An extended interface is provided for users to integrate into other test systems

Install BackstopJS

npm install -g backstopjsCopy the code

After initialization, configuration files backstop.json and backstop_data folders are generated

backstop initCopy the code

Configuration backstop. Json

{
  "id": "backstop_default",// Test case ID for BackstopJS management and file naming"viewports": [{"label": "phone"// Set the phone resolution"width": 375,
      "height": 667}, {"label": "tablet"// Configure the tablet resolution"width": 1024,
      "height": 768}]."onBeforeScript": "puppet/onBefore.js"."onReadyScript": "puppet/onReady.js"// Test cases"scenarios": [{"label": "qq.map",// Test case name"cookiePath": "backstop_data/engine_scripts/cookies.json"."url": "https://map.baidu.com/mobile/webapp/index/index/"// Test the address"referenceUrl": ""."readyEvent": ""."readySelector": ""."delay": 0."hideSelectors": []."removeSelectors": []."hoverSelector": ""."clickSelector": ""."postInteractionWait": 0."selectors": []."selectorExpansion": true."misMatchThreshold": 0.1."requireSameDimensions": true}]."paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference"// Store the image given by the UI during the test"bitmaps_test": "backstop_data/bitmaps_test"// Generate test images"engine_scripts": "backstop_data/engine_scripts"."html_report": "./docs/backstop_data/html_report"// Generate the path to the test HTML page"ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"]."engine": "puppeteer"."engineFlags": []."asyncCaptureLimit": 5,
  "asyncCompareLimit": 50."debug": false."debugWindow": false
}Copy the code

My test is tencent map at https://map.baidu.com/mobile/webapp/index/index/

Start the

backstop test Copy the code

The first startup will display the following error, you need to create the folder bitmaps_reference in the backstop_data folder and store the corresponding test map in it. The above 3 pictures correspond to the test picture, the website picture automatically captured, and the comparison picture (the pink area is inconsistent) respectively.

To start again

backstop test Copy the code

3.Selenium- WebDriver: E2E test

Selenium is a browser automation testing library that we use most of the time to test Web applications. Selenium can handle any task of automating testing on a browser.

Webdriver (Selenium2) is an automated testing tool for Web applications. It provides a set of user-friendly apis that are much easier to understand and use than Selenium 1 (Selenium-RC), with significantly improved readability and maintainability. Webdriver is nothing more than a set of libraries that don’t rely on any testing framework. There is no need to start other processes or install programs other than the necessary browser drivers, and there is no need to start services first.

To install Selenium webdriver

npm install Selenium-webdriver --save-devCopy the code

Geckodriver (.exe) : Geckodriver (.exe)

Create folder e2e and create baidu.js in it

The Selenium- WebDriver API can be viewed at bidum.js

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

(async function example() {
    let driver = await new Builder().forBrowser('firefox').build();
    try {
        await driver.get('https://www.baidu.com/'); // Open test page await driver.findelement (by.name ()'wd')).sendKeys('Go with the Wind', Key.RETURN); Await driver.wait(until.titleIs())'Go with the Wind _ Baidusearch'), 1000); } finally { await driver.quit(); // Exit}})();Copy the code

Start with Node

node ./e2e/baidu.jsCopy the code

After the test will automatically pop up, successful exit, error will pop up error message, you can play by yourself.

4.Mocha+ CHAI: Asynchronous test

Mocha is a rich javascript unit testing framework that supports TDD, BDD, and other interfaces. It can be run in nodeJS or a browser environment. Javascript is a single-threaded language, most notable for its asynchronous execution. For synchronous code, it is easy to test whether the return value of the function meets the expectation, while for asynchronous functions, the test framework needs to support callbacks, promises, or other methods to determine the correctness of the test results. Mocha supports asynchronous unit testing of javascript well. Mocha executes the test cases we write serally, allowing for flexible and accurate reports of test results while pointing uncaught exceptions to the application.

Install Mocha, Mochawesome, chai

npm install -g mocha Copy the code

npm install chai mochawesome --save-devCopy the code

Create mochaRunner. Js

const Mocha = require("mocha");
const mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions:{
        reporteDir:"./docs/mochawesome-reporter"// generate test page path}}); mocha.addFile('./service/router.spec.js'); // Test the file path mocha.run(function(){
    console.log("done");
    process.exit();
})Copy the code

Create the service folder and create app.js, router.spec.js in it

App. Js start a server listening on port 3000, if you visit http://127.0.0.1:3000/test will return data to the data

var express = require('express');
var app = express();

app.get('/test'.function (req, res) {
    res.send({
        data:'Hello World'
    });
});

var server = app.listen(3000, function () {
    console.log('Service start');
});
module.exports = app;Copy the code

To install express

npm install expressCopy the code

router.spec.js

const axios = require('axios');
const { expect } = require('chai');
describe("Node Interface Test".function(){
    it("Test Interface test", (done) => {
        axios.get('http://localhost:3000/test'// Request url.then (function (res) {
            expect(res.status).to.equal(200);
            console.log(res.data)
            if(res.data.data == "Hello World!") {done(a); }else{
                    done(new Error('Results did not meet expectations!! '));
            }
            }).catch(function (error) {
            done(error);
        });
    });
});Copy the code

Axios needs to be installed

npm install axiosCopy the code

Start the mocha

mocha ./mochaRunner.jsCopy the code

node ./mochaRunner.jsCopy the code

Mochawesome -reports will be generated in the sibling directory, accessing HTML

It can also be configured in package.json:

"scripts": {
  "test": "npm run unit"."e2e": "node ./e2e/baidu.js"."unit": "karma start"."uitest": "backstop test"."service": "mocha ./mochaRunner.js"
},Copy the code

This lets you use NPM run *** directly

The end:

There are many frameworks for front-end automation testing, such as Rizejs, Nightwhatchjs, F2etest and so on. Just contact with these testing framework, there are too many do not understand, this needs time to accumulate, continuous learning, continuous progress, let oneself grow up to be the one you want to be, thank you for watching!!

Getting started: Front-end automation test Karma, Backstopjs, Selenium- WebDriver, Mocha

Preface:

1.Karma+Jasmine+karma-coverage

1.1 To unit test code using Karma, you first need to install a series of related plug-ins.

1.2 Test code coverage using Karma-Coverage

Backstopjs: CSS regression test

BackstopJS has the following features:

3.Selenium- WebDriver: E2E test

4.Mocha+ CHAI: Asynchronous test

The end:

Related Posts

CSS interview review refers to north

Spongebob Squarepants takes you through bubbling sort and selection Sort

Number method summary