Protractor - Analyze Browser Console Logs with protractor-screenshoter-plugin

Have you ever wondered if there is any possibility to capture browser errors when you run protractor tests? 
There is. One solution is to use protractor-screenshoter-plugin that works for jasmine2.
After the entire .spec run, a folder e2e will be generated that will include an index.html. Open it and you will get your browser logs.

This plugin has 2 reporting parts:
- screenshot parts
- console reports
The first one will take screenshots for each jasmine2 expect success/failure, run time, failure reason, and what is important, the browser's logs.

The second one is an overview for all browser console logs.

How to install

Usage

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

Protractor Test Run Results - Jasmine2-html-reporter

One way to see protractor test run results, is to use an existing package, called jasmine2-html-reporter that will help you see a reporter in html format for Jasmine and Protractor. The big advantage of this is that it's able to generate a screenshot every time a test test fails.

In order to use it you need to npm install it and to add it in your protractor config.js file, in onprepare function

$ npm install protractor-jasmine2-html-reporter

var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');

exports.config = {
   // ...
   onPrepare: function() {
      jasmine.getEnv().addReporter(
        new Jasmine2HtmlReporter({
          savePath: './protractor/reports/logs/htmlReports',

          takeScreenshots: true,
          takeScreenshotsOnlyOnFailures: true
        })
      );
   }
}

There are other options that you can use, like FixedScreenshotName, CleanDestination, showPassed, etc.

The test results will show
- 'passed' for every 'expect' inside a spec ('it' statement)
- if there is no 'expect' inside 'it', it will be marked with 'skipped'
- if an error occurs, it will show an error + a screenshot

Later, you can use test results files in a CI system, like Jenkins and attach the screenshots for failed tests as artifacts.

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

Protractor - Show test run time in your logs

In this short article we will see how can we show the test run duration in a log file, displayed in hours, minutes, seconds.

There are some moments when we can add data in a log file: 
- jasmine started, meaning that we will add info in a log file when we started to run tests
- suite started; inside a .spec file we can have different suites (describe); we can add logs for each describe
- spec started; inside a suite we can have multiple specifications (it); we can add logs for each it
- spec done
- suite done
- jasmine done

To add the elapsed time, we need to capture start time in jasmine started and end time in jasmine done.

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

Protractor - Getting non-angular iframe inside an angular application

If you have an Angular App that loads another Non-Angular App inside an iframe, getting objects inside iframe may be difficult.



Here is the solution I used:

describe('Inside non-angular iframe', function () {
        it('you can access iframe objects.', function () {
             ...
            _form.goToIFrame();
            //work with iframe objects
            _form.goToDefault();
});

where _form.goToIFrame(); and _form.goToDefault(); means:

    goToIFrame: function () {
        browser.switchTo().frame(browser.driver.findElement(by.tagName('iframe')));
        browser.ignoreSynchronization = true;
    },

    goToDefault: function () {
        browser.driver.switchTo().defaultContent();
        browser.ignoreSynchronization = false;
        browser.waitForAngular();
    }

That's all.


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

Protractor - Accepting browser alerts

In this short article we will see how can we accept alerts by using Protractor.

Because browser alerts represents non-angular code, we have to ignore angular synchronization first. Here is the code for accepting the alert. This was tested with Chromedriver.

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

Protractor - Double click on row based on cell text and column name

Working with Protractor promises can be, sometimes difficult. The same is true in the case we want to work with grids.
After searching for a while a solution for double clicking on a grid row, base on the cell text and the column name, I found one. Here is the code for it.

In this example you can double click or click a row based on the cell text and column name.
headers() is a separate function that identifies all column headers in the grid.

readGridData() is a separate function that takes all records from the grid and maps all cells in records.

row() and rows(), will get the records and the record texts in the grid

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

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