Home > Developer > Web Develop
The previous article (http://www.cnblogs.com/xiaoningz/p/7122633.html) uses grunt-protractor-coverage as the coverage test plug-in, if the project management tool is just grunt, That is perfect, but some projects are using Gulp to do management tools, that maintenance of two sets of management tools is a bit of resources wasted, just gulp also has a matching protractor e2e test coverage plug-in, this article is how to use Gulp matching plug-in protractor e2e Coverage reports.
Environmental Prerequisites:
1. Nodejs Installation (https://nodejs.org/en/download/)
Steps:
1. NPM Init creates a Nodejs project.
2. Use the following npm install command to download node modules,
NPM Install angular-dnpm Install angular-mocks-dnpm install gulp-dnpm install GULP-CLEAN-DNPM install gulp-istanbul-d NPM Install istanbul-dnpm Install http-server-dnpm install PROTRACTOR-ISTANBUL-PLUGIN-DNPM install Protractor-jasmine2 -html-reporter-d
Then add the command to the Package.json scripts node as follows:
"Scripts": { "start": "Http-server-a localhost-p 8000-c-1", "test": "Gulp clean && Gulp Instrument & ;& protractor protractor.conf.js ", " Report ":" Istanbul report--include E2ereport/*.json--dir e2ereport/ Coverage html " },Start: To start an HTTP service in the current project directory so that it can be accessed directly through the URL at test time.
Test
Gulp Clean: Perform Gulp's clean task, see the Glupfile.js configuration below, mainly to empty the instrument and report directories.
Gulp Instrument: Execute Gulp Instrument task, the specific behavior of the following gulpfile.js configuration, the main role is to copy non-injected necessary files, and inject copy of the test JS file.
Protractor protractor.conf.js: Perform protractor e2e test.
Report: Execute the Istanbul reports command to convert the *.json coverage information file into an HTML reporting.
2.1 As with the previous article, you need to update the jar and driver as you would with Protractor, and execute Webdriver-manager under the project directory node_modules\protractor\node_modules\.bin\ The update command downloads the SELENIU server jar and chrome driver, otherwise the server jar error is reported when the test is executed, and if it cannot be downloaded, try adding the proxy as follows:
Webdriver-manager Update--ignore_ssl--proxy http://username:[email protected]:p ORT
Because the downloaded protractor is the latest version, the Selenium server and driver, which are usually downloaded through the above commands, will also be the latest version, if unsure, to node_modules\protractor\node_modules\ Webdriver-manager\selenium directory to view the downloaded version, if it does not meet your needs, you can change the Webdriver-manager directory under the Config.json file for the specified version, and then update it again.
3. Create a Angularjs-based demo as a test site, just for testing purposes, not too complicated. The same as a piece of paper,
New Js/index.js
varAngular =Window.angularvarApp = Angular.module (' app ', []); App.controller (' Indexctrl ',function($scope) {$scope. Add=function(A, b) {if(a&&b) {returnNumber (a) +Number (b)}return0; }, $scope. Minus=function(c, D) {if(c&&d) {returnNumber (c)-Number (d)}return0; }});View Code
New html/index.html
<!DOCTYPE HTML><HTMLLang= "en"Ng-app= "App"><Head> <MetaCharSet= "UTF-8"> <title>Index</title></Head><Body><DivNg-controller= "Indexctrl"> <Div> <inputtype= "text"Ng-model= "a"value= "0"> + <inputtype= "text"Ng-model= "B"value= "0"> =<spanID= ' result '>{{Add (b)}}</span> </Div> <Div> <inputtype= "text"Ng-model= "C"value= "0"> - <inputtype= "text"Ng-model= "D"value= "0"> =<spanID= ' RESULT1 '>{{minus (c,d)}}</span> </Div></Div></Body></HTML><Scriptsrc=".. /node_modules/angular/angular.min.js "></Script><Scriptsrc=".. /node_modules/angular-mocks/angular-mocks.js "></Script><Scriptsrc=".. /js/index.js "></Script>View Code
New E2E test code e2etest/index-e2etest.js. Note that the site path that the test fills in must be the project path using the injected JS, otherwise the obtained coverage report is empty.
Describe (' index.html ',function() {Beforeeach (function() {Browser.get (' Http://localhost:8000/istanbulCode/html/index.html '); }); It (' Test minus ',function() { varA = Element (By.model (' C '))); varb = Element (By.model (' d ')); A.sendkeys (4); B.sendkeys (2); varresult = Element (By.id (' RESULT1 '))); Expect (Result.gettext ()). Toequal (' 2 '); }); It (' Test add ',function() { varA = Element (By.model (' a '))); varb = Element (By.model (' B '))); A.sendkeys (1); B.sendkeys (2); varresult = Element (by.id (' result '))); Expect (Result.gettext ()). Toequal (' 3 '); });});View Code
4. Configure the Protractor configuration file and the Gulp configuration file as follows:
Create a new protractor.conf.js in the root directory, add protractor-jasmine2-html-reporter to e2e test to produce an HTML report, add plugins nodes, Use the Protractor-istanbul-plugin plugin to generate the E2E test coverage information into a JSON file into the E2ereport directory:
varJasmine2htmlreporter = require (' Protractor-jasmine2-html-reporter '));varIstanbulplugin = require (' Protractor-istanbul-plugin ')); Exports.config={allscriptstimeout:11000, BaseUrl:' Http://localhost:8000/html/', //Capabilities to is passed to the webdriver instance.capabilities: {' Browsername ': ' Chrome '}, Framework:' Jasmine ', //Spec Patterns is relative to the configuration file location passed //To protractor (on this example conf.js). //They may include glob patterns.Specs: [' e2etest/*.js '], //Options to is passed to Jasmine-node.jasminenodeopts: {showcolors:true //Use colors with the command line report .}, Plugins: [{inline:istanbulplugin, OutputPath:' e2ereport/'}], Defaulttimeoutinterval:30000, Onprepare:function() {jasmine.getenv (). Addreporter (NewJasmine2htmlreporter ({savepath:' E2EREPORT/E2E ', Screenshotsfolder:' Images ', Takescreenshots:false }) ); }};
Create the Gulpfile.js file under the root directory, as follows:
Clean task: Empties the files in the Istanbulcode and E2ereport directories, freeing up space for subsequent injections and generation of the report.
Instrument task: Copy the necessary files that are not injected, and inject the copied JS files that are being tested. Note that this is injected to use the Istanbul ({coveragevariable: ' __coverage__ '}) method, in order to set the coverage variable name for later use.
varIstanbul = require (' Gulp-istanbul '));varGulp = require (' Gulp '));varClean = require (' Gulp-clean '); Gulp.task (' Clean ',function() {GULP.SRC (' istanbulcode/* ', {read:false}). Pipe (Clean ()); GULP.SRC (' e2ereport/* ', {read:false}). Pipe (Clean ());}); Gulp.task (' Instrument ',function() {GULP.SRC (' html/* '). Pipe (Gulp.dest (' Istanbulcode/html ')); GULP.SRC (' Node_modules/angular/angular.min.js '). Pipe (Gulp.dest (' istanbulcode/node_modules/angular/')); GULP.SRC (' Node_modules/angular-mocks/angular-mocks.js '). Pipe (Gulp.dest (' istanbulcode/node_modules/angular-mocks/')); GULP.SRC (' Js/*.js '). Pipe (Istanbul ({coveragevariable:' __coverage__ '}). Pipe (Gulp.dest (' Istanbulcode/js ') }); Gulp.task (' Test ',function() {Console.log (' Test ')});
The above configuration is complete, the overall directory structure is as follows:
e2edemo|-E2ereport |-coverage//Storage Coverage Report |-e2e//Store E2E test report *.json//Coverage Information JSON file |-e2etest | HTML |-index.html|-istanbulcode//used to store the project code after being injected |-js |-index.js|-Node_ Modulesgulpfile.jspackage.jsonprotractor.conf.js
Execute the following command to obtain a result report:
NPM TESTNPM Run Report
The final result
The \e2edemo\e2ereport\coverage\lcov-report directory has a index.html report: You can modify the index-e2etest.js to see if coverage is insufficient.
The test report for E2E itself is in \e2edemo\e2ereport\e2e, as follows: The test report here intentionally fail in the test script
Angularjs e2e test Report/coveragereport-Using gulp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
