Installing and using Protractor for AngularJS application in Visual Studio

Standard

GitHub Repository:  GitHub Link

Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.Integrating Protractor for AngualrJS application in Visual Studio needs some configuration, Follow below steps to integrate it in your project.

Step 1: Install Node.js

2015-11-06_16-47-46

Install any of the version, I have tested both.

After installation confirm its successful completion, by opening up window CMD (type cmd on run dialogue box)

Command:
node –version

2015-11-06_16-50-10

Step 2: Install Node.js Tools for VS

2015-11-06_16-52-54

This will add node.js template in VS, add intellisense for node project, activate npm integration

Step 3: Install Web Essentials

2015-11-06_16-55-51

This will add cool features in your project like JSHint, minification, Source Maps, Find references, Intellisense, Bundling, ZenCoding, validation etc

Step 4: Install Java Development Kit

2015-11-06_17-03-19

Chose any version, I have tested using both 8u66 and 8u65 ( should be greater then >8)

After installation confirm its successful completion, by opening up window CMD (type cmd on run dialogue box)

Command:
java -version

2015-11-06_17-05-54

Step 5: Setup Node.js Console Application

  • Add New Project in main solution file

2015-11-06_17-11-22

  • Search for Nodejs console application template and name it.2015-11-06_17-13-45

Step 6: Install Protractor (Globally or Locally)

        • Right click on project and choose Open Command prompt here (we can do this in CMD too, but for a moment lets stick to VS environment)
        • If you want to install protractor globally, execute the below command
          npm install -g protractor
          
        • If you want to install protractor locally, execute the below command
          npm install protractor --save-dev
          2015-11-06_17-25-33

          After installation confirm its successful completion, by opening up window CMD (type cmd on run dialogue box)

          Command:
          protractor –version

          2015-11-06_17-28-33

Please note:

There might be some error while installing protractor like dependencies missing for instance python is missing, for that follow my blog post

Error: Protractor 2.0 errors during npm install due to dependencies – cant find the python executable

Step 7: Update selenium standalone server

        • Right click on project and choose Open Command prompt here (we can do this in CMD too, but for a moment lets stick to VS environment)
  • Update selenium driver, execute the below command
    webdriver-manager update

2015-11-06_17-34-36

Step 8: Start selenium standalone server

  • Right click on project and choose Open Command prompt here (we can do this in CMD too, but for a moment lets stick to VS environment)
  • start selenium driver, execute the below command
    webdriver-manager start

2015-11-06_17-37-35

Please Note:

Don’t close this CMD window until you are done with testing under protractor umbrella

Once the driver manager starts, open any browser and check if the listener is up by typing the URL http://localhost:4444/wd/hub in the browser.

2015-11-06_17-40-11

Step 9: Add conf.js file for protractor configuration

  • For sample just add below code in file named as ‘conf.js’
// An example configuration file. 
exports.config = {
    // The address of a running selenium server. 
    seleniumAddress: 'http://localhost:4444/wd/hub', 
    
    // Capabilities to be passed to the webdriver instance. 
    capabilities: {
        'browserName': 'chrome'
    }, 
    
    // Spec patterns are relative to the current working directly when 
    // protractor is called. 
    specs: ['example_spec.js'], 
    
    // Options to be passed to Jasmine-node. 
    jasmineNodeOpts: {
        showColors: true, 
        defaultTimeoutInterval: 30000
    }
};

2015-11-06_17-43-01

Please Note:

Protractor supports Internet Explorer, Chrome, FireFox, etc. to test Angular js pages. And the following way you can specify which browser to launch automatically by the protractor when it runs. To setup, follow the config below.

    // conf.js
    exports.config = {
      capabilities: {
             'browserName': 'firefox'
      }
    }

By specifying 'browserName': 'firefox', you can tell the protractor to use FireFox instead of default chrome browser

Step 9: Build Project and get URL of project

Step 10: Add test spec file for e2e testing

  • For sample just add below code in file named as ‘example_spec.js’
describe('angularjs homepage title check', function () {
    it('should have a title', function () {
        console.log('Step 1');
        browser.get('http://localhost:3472/#/');
        expect(browser.getTitle()).toEqual('My Todolist Page');
    });
});

Test in this file compare title of web page with ‘My Todolist Page’

2015-11-06_17-53-33

  • Copy URL from step 9 to browser.get statement in example_spec.js file
  • Name of file should be similar to what you have defined in conf.js under specs node
// An example configuration file. 
exports.config = {
    // Spec patterns are relative to the current working directly when 
    // protractor is called. 
    specs: ['example_spec.js'], 
};

Step 11: Run Test Specs

  • Right click on project and choose Open Command prompt here (we can do this in CMD too, but for a moment lets stick to VS environment)
  • run protractor for example_spec file, execute the below command
    protractor conf.js

2015-11-06_17-59-10

Browser behind CMD is opened by selenium web driver and execute our test and output is generated in CMD as below:

2015-11-06_18-02-51

It has failed because values of title of webpage doesnt match with test case value. ( ‘TAC Sample Angular Utility’ != ‘My Todolist Page’ )

  • In order to pass the test, change value from ‘My Todolist Page’ to ‘TAC Sample Angular Utility’ in example_spec.js

2015-11-06_18-25-20

  • execute the below command again
protractor conf.js

2015-11-06_18-23-40

Test has been passed.

—————————————————————————————————————————————

Hope above article helps you guys, I have spent number of hours to figure out all dependencies and resolving issues. Hopefully this will assist you. Happy Coding.

 

 

 

Advertisements

One thought on “Installing and using Protractor for AngularJS application in Visual Studio

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s