Your First Protractor Test in Visual Studio 2015

Introduction

In this article we'll see how we can create our first project in Visual Studio 2015 that uses Protractor to test an angularJS application.
What is 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."
The official site is this: http://angular.github.io/protractor/#/. 

Why to use Protractor

The main reason for using Protractor is that will recognize specific AngularJS identifiers, like model, repeater, etc.

Another important reason for using it is that when running tests you don't need to wait until the response will return.

Requirements

In order to be able to run Protractor tests we need first to have
- java sdk installed: http://www.oracle.com/technetwork/java/javase/downloads/index.html
- node.js installed: https://nodejs.org/en/download/
- NodeJS Tools for Visual Studio 2015: https://www.visualstudio.com/en-us/features/node-js-vs.aspx

Installation

After node.js was installed on your computer you can use npm to install Protractor globally with:

This will install 2 commands, protractor and webdriver-manager. To verify if protractor was installed run this command in your cmd: protractor --version. Protractor is installed globally under: c:\Users\yourUser\AppData\Roaming\npm\. Webdriver-manager is the tool that will instanciate a Selenium Server. In order ro use it and to start it we need to:

This needs to remain opened while you are running your tests. It will start up the Selenium Server and will output logs. Protractor tests will send requests to this server to control a local browser. 
Below you can see in mode details what Protractor's doing:

Writing your first test

Open Visual Studio 2015 and create a new project of type Blank Node.js Console Application. 

Delete app.js, because you'll don't need it. You'll notice that in your npm references, protractor will be available as a global one.

Protractor needs 2 files to run, a spec.js file that contains the tests and a conf.js file that will tell what specifications will be run and where to talk to Selenium Server (seleniumAddress).

Add the conf.js and spec.js files to your project.

Spec.js should have the structure below, where describe and it represents Jasmine framework syntax. Browser is used by Protractor to navigate in the browser.

If webdriver-manager is already started, now you can run your test in the command line where your conf.js file is by using this command:

A Chrome browser window will be opened. In your cmd you should see the test result.

Using IntelliSense

If you want your jasmine, protractor syntax to be recognized in Visual Studio you need to do additional steps:
- open a cmd and run these commands npm tsd -g 
- then go to the location of your project (in our case c:\temp\Protractor\MyFirstProtractorExample\MyFirstProtractorExample\) and run the following commands 
tds install jasmine
tsd install angular-protractor
tsd install selenium-webdriver
These commands will install the necessary typings for your project

- then you need to add the typing reference to your spec file

More about AngularJS Testing you can find in this book: AngularJS Test-driven Development

Happy testing and... make it green, becomes a dream :).