Protractor - Configuring the protractor in webstorm ide and running the protractor script.

Prerequisite: 
Protractor is already installed.
Protractor installation steps http://automation-home.blogspot.com/2015/11/protractor-installation.html

WebStorm IDE is already installed.
WebStorm ide can be installed from https://www.jetbrains.com/webstorm/download/

Create new project.

Enter Project Name.

Click on down arrow.

Click 'Edit Configuration'.

Press '+' button on top left corner.

Select 'Node.js'.

Enter name, i have entered 'Nodejs-Protractor'.

Locate the location of 'cli.js' file.

When protractor is installed globally(i.e. using command 'npm install -g protractor'),
by default protractor cli.js file is present at
C:\Users\<user>\AppData\Roaming\npm\node_modules\protractor\lib\cli.js

Note down the path of protracor 'cli.js' file.

'AppData' folder is hidden by default in windows operating system.
'AppData' folder may present in different location in different versions of windows operating system.

In 'JavaScript file' field enter the 'cli.js' file location.

Note:
Project location should not contain the folder names with spaces.
In the above presentation, project location contains spaces
C:\Users\<<USER_NAME>>\Desktop\Protractor\Protractor Proj\Protractor Demo Proj\conf.js

Change the folder name(i.e. removing the spaces in the folder names)
C:\Users\<<USER_NAME>>\Desktop\Protractor\Protractor_Proj\Protractor_Demo_Proj\conf.js

Click 'Apply' and 'OK' buttons.

Add the protractor scripts(i.e. test script, configuration file) to the project.

Now the time to execute the script.

Copy the path of configuration file location, in my project configuration file name is 'conf.js'
(select the configuration file and right click to copy the configuration file location).

Edit Configuration.

Paste the configuration file location in 'Application Parameters' field.

Click 'Apply' and 'OK' buttons.

Click on execute button to run the script.

Note:Make sure selenium server is started before runing the protractor script,
otherwise start the selenium server with the command 'webdriver-manager start'.

Watch Demo

Protractor

Protractor is an end-to-end test framework for testing the AngularJS applications.
Protractor is developed on top of the WebdriverJS.
Automating the scripts using protractor you need not worry about adding the waits or sleeps in the test scripts, protractor will automatically executes the next step after the web pages loads the pending tasks.

1. Installing Node.js and NPM on Windows
    http://automation-home.blogspot.in/2015/05/installing-nodejs-and-npm-on-windows.html

2. Protractor - Installation

    http://automation-home.blogspot.com/2015/11/protractor-installation.html

3. Protractor Installation and demo script.
    http://automation-home.blogspot.in/2015/11/protractor-demo-script.html#demo-script

4. Protractor  - Jasmine
    http://automation-home.blogspot.com/2015/11/protractor-jasmine.html

5. Configuring 'Protractor' in 'WebStorm IDE'.
    Running the 'Protractor' script in 'WebStorm'.
    http://automation-home.blogspot.com/2015/11/configuring-protractor-in-webstorm.html

6. Execute protractor script on real android device using Appium.
    http://automation-home.blogspot.com/2015/12/execute-protractor-script-on-real-using-appium.html

Protractor - Jasmine

Prerequisites:

Node.js and NPM are installed.

http://automation-home.blogspot.in/2015/05/installing-nodejs-and-npm-on-windows.html

Protractor is installed

http://automation-home.blogspot.com/2015/06/protractor-installation.html

Jasmine is installed by default when 'protractor' is installed(protractor can be installed by using the command 'npm install -g protractor').

Jasmine is a BDD(Behavior Driven Development) framework for testing the JavaScript code.

Suites: 'describe' your tests,

'describe' jasmine function has two parameters 

- string : Describes the spec suite 'name' or 'title' 

- function : Function contains code for implementing the suite.

Specs: Specs are defined by using the jasmine function 'it', 

'it' jasmine function has two parameters

- string : specifies the 'title' of the spec.

- function : Function is the actual test.

'describe' and 'it' both contains the necessary code block to execute and implement the test,

Ex:

describe("Suite Name/Suite Description", function() {

  it("Spec Title/Spec Description", function() {

    expect(true).toBe(true);

  });

});

Variables declared in 'describe' block are available to any 'it' block.

Ex:

describe("Suite Name/Suite Description", function() {

  var flag;

  it("Spec Title/Spec Description", function() {

    flag = true;

    expect(flag).toBe(true);

  });

});

Expectations:

'expect' function takes the 'actual' value, chained with 'matcher' function(matcher function takes 'expected' value).

Matchers:

Performs the boolean comparison between 'actual' and 'expected' values, jasmine will 'pass' or 'fail' spec based on the matcher comparison.

Below are some of the Jasmine Matchers:

- not                    - toBeTruly

- toBe                  - toBeFalsy

- toEqual              - toContain

- toMatch               - toBeLessThan

- toBeDefined       - toBeGreaterThan

- toBeUndefined   - toBeCloseTo

- toBeNull              - toThrow

Below are some of the Jasmine functions:
- describe          - it
- beforeEach     - afterEach
- beforeAll         - afterAll
- xdescribe        - xit
- spyOn

Reference:

http://jasmine.github.io/2.0/introduction.html

http://www.slideshare.net/cebartling/javascript-38057372

Protractor - Installation

Prerequisites:
Node.js and NPM is already installed.
http://automation-home.blogspot.in/2015/05/installing-nodejs-and-npm-on-windows.html

Java JDK installation:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Set the Path for Java JDK
https://docs.oracle.com/javase/tutorial/essential/environment/paths.html
http://www.javatpoint.com/how-to-set-path-in-java

Below steps demonstrates installing and setting up protractor 

Open command prompt and type 'npm install -g protractor'  

Above command(i.e npm install -g protractor) will install two things 

- Protractor and

- webdriver-manager 

Verify 'protractor' is installed properly.

run the command 'protractor --version'

'webdriver-manager' is a helper tool used for downloading the necessary selenium server binaries.

Try to start selenium server with out downloading the 'selenium server' binaries.

Download the selenium server binaries using the command 'webdriver-manager update'.

Start the selelnium server using command 'webdriver-manager start'.

Watch the protractor installation and demo script video at url

http://automation-home.blogspot.in/2015/11/protractor-demo-script.html#demo-script

Protractor demo script

Prerequisites:
Node.js and NPM is already installed.
http://automation-home.blogspot.in/2015/05/installing-nodejs-and-npm-on-windows.html

Java JDK installation:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Set the Path for Java JDK
https://docs.oracle.com/javase/tutorial/essential/environment/paths.html
http://www.javatpoint.com/how-to-set-path-in-java

Watch the below demo video for installing the 'Protractor' and running the demo script.

Watch Demo

Reference:

https://angular.github.io/protractor/#/

TestComplete - Run webdriver tests from testcomplete

Now you can integrate your selenium tests with TestComplete also, this helps in automation tests re-usability:

Selenium WebDriver tests created with following unit testing frameworks are supported with TestComplete.
- Junit
- TestNG
- Nunit
- PyUnit
- Ruby Test :: Unit
- PHPUnit

Reference: https://support.smartbear.com/viewarticle/72389/

Procedure for TestComplete integerating with Selenium Tests
Reference: https://support.smartbear.com/viewarticle/71670/

Preparing Jenkins for Running TestComplete Tests (Installing TestComplete Jenkins Plugin)
Reference: https://support.smartbear.com/viewarticle/70333/

How to run Selenium from TestComplete in 6 Simple Steps
Reference: http://blog.smartbear.com/how-to/how-to-run-selenium-from-testcomplete-in-6-simple-steps/