protractor Getting started with protractor Protractor: E2E Testing for Enterprise Angular Applications

Example

Protractor Installation and Setup

Step 1: Download and install NodeJS from here. Make sure you have latest version of node. Here, I am using node v7.8.0. You will need to have the Java Development Kit(JDK) installed to run selenium.

Step 2: Open your terminal and type in the following command to install protractor globally.

npm install -g protractor

This will install two tools such as protractor and webdriver manager. You can verify your Protractor Installation by following command:protractor –version. If Protractor is installed successfully then the system will display the installed version.(i.e. Version 5.1.1).Otherwise you will have to recheck the installation. Step 3: Update the webdriver manager to download the necessary binaries.

webdriver-manager update

Step 4: Following command will start up a Selenium Server. This step will run the web driver manager in the background and will listen to any tests which runs via protractor.

webdriver-manager start You can see information about the status of the server at http://localhost:4444/wd/hub/static/resource/hub.html.

Writing First Test case using Protractor:

Before jump into the writing the test case, we have to prepare two files that is configuration file and spec file.

In configuration file :

//In conf.js
exports.config = {
    baseUrl: ‘http://localhost:8800/adminapp’,
    seleniumAddress: ‘http://localhost:4444/wd/hub',
    specs: [‘product/product_test.js’],
    directConnect : true,
    capabilities :{
        browserName: ‘chrome’
    }
}

Basic Understanding of the Terminologies used in configuration file:

baseUrl – A base URL for your application under test.

seleniumAddress – To connect to a Selenium Server which is already running.

specs – Location of your spec file

directConnect : true – To connect directly to the browser Drivers.

capabilities – If you are testing on a single browser, use the capabilities option. If you are testing on multiple browsers, use the multiCapabilities array.

You can find more configuration option from here. They have described all possible terminology with its definition.

In Spec file :

//In product_test.js

    describe(‘Angular Enterprise Boilerplate’, function() {
      it('should have a title', function() {
        browser.get('http://localhost:8800/adminapp’);
        expect(browser.getTitle()).toEqual(‘Angular Enterprise Boilerplate’);
      });
    });

Basic Understanding of the Terminologies used in spec file:

By default,Protractor uses the jasmine framework for its testing interface. ‘describe’ and ‘it’ syntax is from jasmine framework. You can learn more from here. Running First Test case:

Before run the test case make sure that your webdriver manager and your application running in different tabs of your terminal.

Now, Run the test with :

Protractor app/conf.js

You should see the chrome browser opens up with your application url and close itself. The test output should be 1 tests, 1 assertion, 0 failures.

Bravo! You successfully run your first test case.