Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Basic ProtractorJS Setup Along With Report Generation Using jasmine

DZone's Guide to

Basic ProtractorJS Setup Along With Report Generation Using jasmine

Protractor is an open-source E2E testing tool for Angular based applications. Read on to learn how to install it, and use it report generation functionality.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Basic Setup for ProtractorJS

In order to install the protractor suite (in any Linux distribution as well as Mac) type the following commands on your terminal:

  1. Make sure you have your npm installed on your machine. If it's not installed us the  sudo apt-get install npm command and install the nvm for package management (version management).

  2.  npm install karma 

  3.  npm install karma-chrome-launcher  (Chrome specific).

  4.  npm install karma-jasmine  (Make sure you install the latest version).

  5.  npm install protractor-jasmine2-screenshot-reporte  (For Reports). 

Next, you will need to update the web-driver manager because it's the back-end server wherein the request passes through the Selenium driver. For that, type the following commands.

./node_modules/protractor/bin/webdriver-manager update.  

Once you've done this, type protractor conf.js from your base directory where conf.js is present.

Configuration Settings to Run Protractor

The following is the basic pattern for conf.js

// Require protractor-jasmine2-screenshot-reporter to generate reports.
var HtmlReporter = require('protractor-jasmine2-screenshot-reporter');

// Provide destination and filename where protractor-reports will be stored.
var reporter = new HtmlReporter({
    dest: 'protractor-reports',
    filename: 'protractor-report.html'
});


// Connecting directing to the conf file
exports.config = {
    directConnect: true,

    // Capabilities to be passed to the webdriver instance.
    capabilities: {
        'browserName': 'chrome',
        //'phantomjs.binary.path': './node_modules/phantomjs/bin/phantomjs'
    },

    // Framework to use. Jasmine is recommended.
    framework: 'jasmine2',

    // Spec patterns are relative to the current working directory when protractor is called.
    specs: ['checklist/checklist-spec.js'],

    // Options to be passed to Jasmine.
    jasmineNodeOpts: {
        defaultTimeoutInterval: 170000
    },

    //Before launch function to run initial configurations before start running the test
    beforeLaunch: function() {
        return new Promise(function(resolve) {
            reporter.beforeLaunch(resolve);
        });
    },

    // on initial environment is set where reports are added.
    onPrepare: function() {
        jasmine.getEnv().addReporter(reporter);
    },

    // Timeout can be adjusted according to your suitability by default it's 10 seconds.
    allScriptsTimeout: 500
};



Reports Screenshot for a Single Page 

The below screenshots are generated by a screenshot generator. When we run the script we can configure it with a screenshot reporter.

1) The initial top view generated by the ProtractorJS screen reporter.

Image title

2) Auto filling the field using the values assigned in using 'sendKeys'.Image title

3) The final report generated by the screenshot generator with specs which are failed and passed.

Image title


For More Info

For more info and codebase related stuff, please visit my GitHub repo

Feel free to raise a PR and contribute for the same, PR's are welcome!

Please comment for queries below, will be talking about cool stuff more as well.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
protractor ,web dev ,angular ,testing

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}