There are many ways to test our application but having a testing with end user feel is the always the important one. The protractor is JS framework built up Selenium JS web driver.  It provides ease of End to End (E2E) browser testing with protractor angular and non angular applications. It provides a JS wrapper around Selenium commands. The framework contains many intuitive functions which really speed up writing test cases.

** Protractor doesn’t require your site to be on the Angular framework, You can use it all kind of sites.

In this blog, we are going to cover following points.

What is Protractor and why you need it? Setting up and running Protractor project. Running protractor headless in non-UI Linux kind of environment. Perks- Taking the screenshot.

What is Protractor and why you need it?

The protractor is an end to end browser test automation tool.  It emulates user like actions on browsers and is supported by many browsers (chrome, IE, firefox etc). It is a wrapper around selenium web driver commands and much more. Provides automatic wait capabilities for the resource to load and render. Here some points which make Protractor a great framework.

Setting up and running Protractor project.

Let’s jump into technicals. We are going to install and run one sample Protractor test case.

Download and install Node JS and npm from the following URL.

https://nodejs.org/en/download/

Install Protractor using npm, Open shall/command prompt.

npm install -g protractor

With above command, you must have web driver-manger command available to your console, Update web driver-managerwebdriver-manager

update

Start web driver-manager in the separate console.

webdriver-manager start This required when you run you test case. Create a file conf.js for Protractor configurations.

exports.config = {
	seleniumAddress: 'http://localhost:4444/wd/hub',
	specs: ['First-test.js'],
	allScriptsTimeout: 30000,

	// Options to be passed to Jasmine-node.
	jasmineNodeOpts: {
		showColors: true,
		defaultTimeoutInterval: 100000,
		isVerbose: true
	},
	capabilities: {
		'browserName': 'chrome',
		'chromeOptions': {
			args: [ "--headless", "--disable-gpu", "--window-size=1920x1080" ] 
		}
	}// remove headless if you want to see the action
};

Create First-test.js in the same location.

This is your actual test steps. For now, you can copy paste below code. This script will open google.com and search for ‘abyte.stream’

describe('First automated tests', function() {

  beforeEach(function() {
      return browser.ignoreSynchronization = true; // Important for non angular applications
    });

  it('First test', function() {
	//debugger;	 enable if you want to debug the code in chrome
	browser.driver.get('https://www.google.com');
	browser.driver.manage().window().maximize();
	browser.driver.findElement(by.id('lst-ib')).sendKeys('abyte.stream');
	browser.driver.findElement(by.name('btnK')).click();
        //expect(completedAmount.count()).toEqual(2);*/ Test any condition here which expect in the output.
  });
});

Run the protractor using the following command and see the protractor driving browser magic.

protractor conf.js

Running protractor headless in non UI Linux kind of environment.

Till this point, we have successfully achieved running test on the real browser. There are places when we do not have GUI, we just have a black screen server, In this situation, we need to go headless.

Headless browser doesn’t require a graphics driver at all, They just get commands and execute them directly in memory. To achieve this you need to specify headless in cong.js under capabilities.

 capabilities: { 'browserName': 'chrome', 'chromeOptions': { args: [ "--headless", "--disable-gpu", "--window-size=1920x1080" ] } }

Taking screenshot

<code class="lang-javascript">
browser.takeScreenshot().then(function(png) {
  var stream = fs.createWriteStream("/tmp/screenshot.png");
  stream.write(new Buffer(png, 'base64'));
  stream.end();
});