AngularJS - Test application using protractor

Test your application using protractor

Please read the previous post to configure Protractor
How to configure Protractor?

Once the setup is done, you are ready to write and run e2e scripts. When we start testing with Protractor, we set up our tests to work through Jasmine.

That is, we simply start writing our tests like we do when we write our Karma tests. A simple Protractor test setup might look like the below structure :

Protractor Global Variables

The browser variable is a wrapper around the Web Driver instance. We use the browser variable for any navigation or for grabbing any information off the page. We can use the browser variable to navigate to a page using the get() function

·        browser: browser.get()

·        element and by: element(by.model('yourName'))

·        protractor: protractor.Key

Searching for elements on the page

Ø  element() vs element.all()

o   element() - Single element selection

o   element.all() - Collection of elements

Ø  Multiple ways to select elements for making assertions:

o   by.binding

§  element( by.binding('myModel') );

o   by.model

§  element( by.model('myModel') );

o   by.repeater

§  element( by.repeater('user in users').row(0).column('name') );

o   by.css

§  element( by.css('[ng-click="submitRefill()"]') );

List of Protractor API methods - http://www.protractortest.org/#/api

Searching elements best practices

1,  Take the advantage of AngularJS attributes using by.model, by.repeater, by.binding etc.,

2,  Avoid using potential CSS attributes, mainly IDs and Classes.

Executing events

Ø  click  - To simulate the click of the button, select the element and call click method

element( by.css('[ng-click="submitRefill()"]') ).click();

Ø  sendKeys – To simulate the values to be entered in the textbox

element( by.model('commentText') ).sendKeys("Hi!", protractor.Key.ENTER);

Control Flow

WebDriverJS maintains a queue of pending promises, called the control flow, to keep execution organized.

In the example above, the control flow would execute the queue following the sequence we see in the comments. Basically method by.binding would only run oncebrowser.get promise is resolved, and so on.

Example

Reporter – Test Case Results

Next you need a report of failed and passed test cases along with screenshots. protractor-html-screenshot-reporter, an npm module, provides you with an Html report of the test cases along with screenshots

Using onPrepare - Export HTML results of your automated Suites.

Executing Tests with GRUNT

To run your E2E tests with Grunt, you will need to have Grunt installed. Also install the grunt-protractor-runner plugin.

Configure this plugin in your Gruntfile.js. I set up two targets. One target called e2e will stop the build if a test fails. Another called continuous will be used with grunt-watch to keep the build alive and re-run tests when changes are made.