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 :).

SpecFlow - Using Hooks in your Tests

Introduction

In a previous article we talked about how we can create tests with Selenium and SpecFlow.This article explains how we can use Hooks to run our tests.

What are Hooks

Hooks = event bindings and can be used to perform additional automation logic on specific events, like, for example, the execution of a scenario. To make an analogy, think about Setup and Teardown attributes from nunit framework.

Types of Hooks

The names are intuitive

- Beforetestrun and aftertestrun represents the code that will be executed before and after all tests

- Beforefeature and afterfeature represents the code that will be executed before and after every feature

- Beforescenario and afterscenarion represents the code that will be executed before and after every scenario inside a feature

- Beforescenarioblock and afterscnearioblock represents the code that will be executed before and after every scenario block

To be more precise, below you can see an example of a scenario with 3 blocks. The test will be executed before and after Given/When/Then blocks

- Beforescenariostep and afterscneariostep represents the code that will be executed before and after every scenario step

Creating Hooks File

After you added the Spec Flow extension to your visual studio project, you are able to create a new item of type Hooks.

A default class is created:

Modify this class and add all hooks you need.

Restrict Hook Execution with Tag Filtering

Another specflow feature is to restrict hook execution based on the tags you set to your scenarios. If you didn't know for a scenario you can add a tab. Based on this you group your tests when running them. In the image below, the scenario tags are @Login and @forgotPassword

The code below from you hook file will be executed for those scenarios tagged with @Login and @forgotPassword (when we are in if)

Want to lean more about BDD? Have a look on this book: BDD in Action: Behavior-driven development for the whole software lifecycle

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