PROTRACTOR

Whenever we want to learn something new, we should always have answer for basic questions i.e what that thing this is ?, why do i need that ?, etc.

So, what is Protractor ???

Protractor is a Node.js framework that sits on top of the Selenium/Webdriver APIs. It acts as an abstraction layer to make it easier to write and run end to end tests against AngularJS web applications
It contains every feature that is available in the Selenium Webdriver. Additionally, Protractor provides some new locator strategies and function which are very helpful to automate the AngularJS application. Protractor is designed to automate and test AngularJS web application, but that doesn’t mean that we can’t automate non-AngularJS web application. We will automate both of them in a few minutes

Features that makes Protractor a powerful library:

• Allows access to all selenium Webdriver methods with additional locator strategies.
• Allows running tests targeting remote addresses
• Can take advantages of selenium to run multiple browsers at once
• Integrated with powerful tools such as NodeJS, Selenium, WebDriver, Jasmine, Cucumber and Mocha
• Less sync issues, it also speeds up your testing as it avoids the need of lot of “sleeps” and “waits” in your tests.
• Runs on real browsers and headless(Phantom JS) browsers

So this article is divided into several parts in order to cover everything about Protractor

Lets start….. Oops!! but before that, you need to have some pre-requisite which are as follows:

Setup

• Install Java/JDK
• Install Node.js
• Install NPM
• Install IDE or text editor of your choice

Additional Installation for windows

• Install Python
• Install Microsoft Visual Studio C++ 2012 Express version
• Install node-gyp

Setup for Protractor

npm install -g protractor

Then update your webdriver-manager, which is used to start the instance of the standalone server before running the tests

webdriver-manager update

and to start the server.

webdriver-manager start

You can see information about the status of the server at http://localhost:4444/wd/hub

Now, lets dive into the technical aspect of protractor that basically consist of these two files:

Configuration

Conf.js

Conf.js is also know as configuration file, heart of your protractor tests, and it will have various configuration such as which test to run, which browser, locates your selenium server, etc.

A sample code is already present as an example at:

/usr/local/lib/node_modules/protractor/example/

And the content of the file looks something like this: conf.js

directConnect → starts the server automatically

browserName →which browser to run the tests on

specs → which spec to run which contains the tests, you can use multiple specs to run multiple tests across application

defaultTimeoutInterval → time given to execute the test, if taking more time then it will timeout

Write A test

and example_spec.js

describe and it syntax is from jasmine framework.

browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get

Run the test

Now run the test with:

protractor conf.js

Your Chrome browser window will open up and navigate to the todo list in the AngularJS page, then close itself (it will be very fast!). The test will output in 1 spec, 0 failures. Congratulations, you've run your first Protractor test!

Github link: https://github.com/thenishant/Protractor-JavaScript

We will learn more about Jasmine in future posts.