headless-browser-protractor

Headless Browser automation in protractor

A headless browser is a browser simulation program that does not have a user interface (UI less).

Headless browser programs operate like any other browser but do not display any UI. Protractor executes it's tests in the background.

While there are several such headless browsers available in the market, the following are the most popular ones:

  • Chrome
  • Firefox
  • HTMLUnit driver
  • PhantomJS (Developer stopped supporting it as he felt google came with it's own
  • SlimerJS
  • TrifleJS

What is headless testing ?

Executing the web applications' UI tests without opening a browser’s user interface is called headless browser testing. The Headless browser acts similar to a normal web browser.

Testers have full control over the web pages loaded into the headless browsers. The only difference is you will not see a graphical user interface.

When to use headless browser testing ?

We can use headless testing once the cross-browser testing is completed and want to run regression test cases in subsequent releases and with continuous integration.

You have no option other than using headless testing when your machine does not have a GUI, for instance, if you want to run your tests in unix

It is recommended to use the headless browser when tests are executed in parallel as User Interface based browsers consume a lot of Memory / resources. So headless browsers can be used for server-side performance testing too.

When developers push new functionality code into QA, we should be able to test the smoke tests as quickly as possible because if any Show stopper is there, then we can revert the development code.

Selenium vs Protractor

Headless Chrome with Protractor

Headless Chrome is supported by Chrome 59+ versions, Chrome 59+ version combines the all the latest features available in Chromium and Blink rendering engine.

With protractor we can achieve headless chrome browser by using args: [ "--headless", "--disable-gpu", "--window-size=800,600" ] tags.

Headless Chrome mode has been available on Mac and Linux since Chrome 59, Windows support came in Chrome 60.

Below is the code that you need to change in the conf file of the project, other than this you do not have to make changes anywhere


								capabilities: {
								  browserName: 'chrome',

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

Headless Firefox with Protractor

We can also make the Firefox as headless browser in protractor, For firefox also we have use args: [ "--headless" ] tag under firefoxoptions to make the Firefox as headless.


								capabilities: {
								  browserName: 'firefox',
								  
								  'moz:firefoxOptions': {
									 args: [ "--headless" ]
								   }
								}
								

Disadvantages of headless browser testing

Headless browsers are a bad idea. They get you some testing, but nothing like what a real user will see, and they mask lots of problems that only real browsers encounter.

You're infinitely better off using a "headed" browser (i.e., anything but HTMLUnit) on a headless environment (e.g., Windows, or Linux with XVFB).

Hard to debug inconsistent failures on locating elements due to page loading too fast

In Real browser as functions are performing in front of the user and he can interact with it so he can easily detect where the tests go fail. And can easily debug if anything goes wrong.

Unintended interactions (losing the benefit of automated UI testing vs integration or unit testing) due to speed/headless state of browser

Code for non-headless drivers will not always work when the driver is switched to htmlunit. I.e. switching between ChromeDriver and FirefoxDriver is usually pretty consistent in success rate with the same code, but switching to HtmlUnit might fail the test cases

Headless browsers aren’t representing real users, as no user uses your application without UI. Because it does not have UI, it may not report errors related to images.

Headless browsers aren’t too faster than real browsers, because most of the time that it takes to load a page is depends on the actual network speed, html, JavaScript, images, and CSS, it just doesn’t have to color your screen.

Managing to take a screenshot is very difficult in UIless browser

ngWebdriver vs Protractor

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions