Front end Test review and why we chose Karma

Front-end testing, or UI testing, has been a big challenge for the industry. Recently, Q.js using Karma as a Test task management tool, this article reviews the front-end test scenarios, and also analyzes why Q.js Karma is chosen instead of other test frameworks.

Pixel-level Total station comparison

There have been a number of people have done this UI test, that is, the final page image is expected, through the picture differences to identify possible problems.

, the so-called pixel-level site comparison, that is, the use of screenshots before and after the comparison to find the site before and after differences, so as to identify problems.

Q: Why do you need this kind of testing?

A:css is easy to be destroyed, in the case of large-scale response reconstruction, pixel-level total station comparison is a better test scheme.

The two most common tools currently used are:

• Backstopjs
• Pahntomcss

Record-based testing

The classic selenium, which provides coded tests in nature, is widely used for recording tests because of the recording capabilities provided.

Coding test

That is, by writing code to test the UI, but because of various compatibility issues, there are various scenarios.

Jstestdriver type

is to enable a server, and then have the test browser link to the server, you can automatically run the test task, the following is a demonstration in Busterjs:

• Start the server

• Open the test browser and connect to the server, press the button to make the server capture the browser

• Once a test is initiated on the server, each captured browser runs a test case

Static testing

That is, usually open a page for testing, here is an example of Mocha's static test page:

Headless Browser test

This is done through a headless browser, such as: Phantomjs, Slimerjs, to test

Continuous integration Testing

This needs to see what the continuous Integration System can provide browser support, generally at least to provide phantomjs for testing, relatively good continuous integration system is:

• Sauce Labs
• Travis

The following is a test of backbone in sauce labs, which can be tested using a variety of browsers:

Karma

Karma is a test task management tool that can easily be opened with Jasmine, mocha and other commonly used test frameworks, and can be quickly integrated into various environments through its plug-ins. For example: on-premises environment, continuous integration environment.

She can let us just enter a single line of command to test, and after the file is modified, to re-run the use case, the process is like using Nodejs to test the same.

So it is currently used in major open source projects, and the following is the complete output that is used Q.js for testing:

Bogon:q.js miniflycn$ Gulp test[23:58:30] Using gulpfile ~/github/q.js/gulpfile.js[23:58:30] Starting ' test ' ... info [framework.browserify]: 70617 bytes written (0.30 seconds) INFO [framework.browserify]: Bundle builtinfo [Karma]: Kar Ma v0.12.35 server started at Http://localhost:9876/INFO [Launcher]: Starting browser Chromeinfo [Launcher]: Starting brow Ser phantomjsinfo [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket yflqovttbrfh9mmxvqeu with ID 10368837WARN [we B-server]: 404:/favicon.icoinfo [Phantomjs 1.9.8 (Mac OS X 0.0.0)]: Connected on socket E1mb7b7zs7ugi4u-vqev with ID 6855 9341start:data? Should able to get a VM data? Should able to set a VM data? Should able to pop a VM data? Should able to unshift a VM data? Should able to shift a VM data? Should able to call indexOf for a dataarray? Should able to call splice for a dataarray? Should return itself when key is undefined? Should able to watch VM change? Should able traversingA array which have some property? Should able to watch push method class? Should able to define & require a Hello component? Should able to create a child component? Should able to set the data of a children component custom? Should able to create a custom filter? Should able to toggle class? Should able to set a class if? Should able to use if directive Attrbute? Should able to set SRC? Should able to set attribute on? Should able bind event repeat? Should able repeat? Should able push a data? Should able splice a data? Should able multiple repeat? should not throw a error when repeat element has been modified? Should throw a error when a filter hasn ' t implemented? Should able to use double repeat utils? Should find a element? Should able to copy a arrays use slice? Should able check contains? Should able to set and get data? Should able to add & Remove event? Should able to exTend objects? Should able to extend from multiple srouces? Should able to add & Remove class? Should able to check a objectfinished in 2.447 secs/2.318 secssummary:? Tests completed

In this composition, Karma automatically launches and tests locally, based on the configuration we set Chrome PhantomJS .

So why do we choose to test it with karma?

• Easy Integration Testing
• The more common open source solution, Google
• Q.js is a JS library, does not require pixel-level testing, because it is the programmer we do not need to record testing, we need static testing (development phase), and continuous integration testing (integration phase)
• You can choose different browsers to test according to different environments. For example, we can only use the PhantomJS test, now we are able to use and test in the integrated system Firefox PhantomJS , in the local environment we can also Chrome , IE automated testing. If we have the money, we can buy Sauce Labs the service (the key without money = =) to get more browser support.

Front end Test review and why we chose Karma