Tuesday, October 24Be an Automation Engineer

Execute protractor tests on headless chrome browser

Before moving to the main content, we should know what is headless term.

What is headless browser?

Headless browser is like a normal web browser. But it does not have a GUI(Graphical User Interface). Means, you can not see browser on the screen. But it runs in the background. Other than that the headless behaves the same as the traditional browsers like (Chrome, Firefox, MS-edge etc..).

There are many headless drivers are available in the market. I have listed few of them below.

  1. HtmlUnit
  2. PhontomJS
  3. Ghost

Now, the browser giant chrome has taken a place in this list.

Why we need headless browser?

Headless browsers are very much useful for automation testing. Particularly, when the automation tests are running in a cloud/server environment, there is no need of UI(user interface).

Also, headless browsers are a bit faster when compared with other regular browsers. 

Before going to see an example. We need to know fully supported versions of chrome for headless. 

  1. MAC/LINUX – Chrome v59
  2. Windows – Chrome v60

If you want to know more about headless chrome. Go Here.

Now, lets see how it goes with protractor. 

If we want to run chrome in headless state, we need to pass few command line arguments to the driver as part of chrome options.

The command line arguments are like below.

capabilities: {
    ...,
    chromeOptions: {
        args: ["--headless", "--disable-gpu", "--window-size=800x600"]
    }
}

--headless – Argument to run chrome in headless mode

--disable-gpu – It is required only when you are using chrome 58 or below.

Problem with headless chrome:
With headless chrome, we can not change the browser size at run time. So we need to set the size of the browser while initiating the driver itself. 
--window-size=800x600 – Setting the browser size to 800X600

Your complete config file will look like below:

exports.config = {
    capabilities: {
        'directConnect': true,
        'browserName': 'chrome',
        chromeOptions: {
            args: ["--headless", "--disable-gpu", "--window-size=800x600"]
        }
    },
    framework: 'jasmine',
    specs: ['./specs/**/*.js'],//path to you spec files
    jasmineNodeOpts: {
        defaultTimeoutInterval: 90000
    },
    onPrepare: function () {
        browser.manage().timeouts().implicitlyWait(20000);
    }
};

Execute the below program. The program opens browser in headless state and navigates to angularjs.org and takes a screenshot. 

var fs = require('fs');
describe('Headless chrome', () => {
    it('Take screenshot', () => {
        browser.get('http://angularjs.org');
        browser.takeScreenshot().then(function (png) {
            var stream = fs.createWriteStream('./screenshot.png');
            stream.write(new Buffer(png, 'base64'));
            stream.end();
        })

    })
})
How to Run:
protractor config.js

After triggering the above command, you would a see chrome app launched in your task bar but you don’t see any chrome browser on your screen. 

After completion of execution, you could see the below screenshot in your project folder where config.js file is located. 

%d bloggers like this: