Basic ProtractorJS Setup Along With Report Generation Using jasmine

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.

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

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

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.