Skip to main content
Blog General

Headless Browser Automation Testing For E Commerce Sites

Prasanna Venkatesh
June 20, 2017 |

A fully functional, high performing website is critical for eCommerce business. Errors in the website put brand, revenue, and customer loyalty at risk. With many pages, devices, browsers, and daily changes, automating the testing of eCommerce sites are necessary to ensure quality.

Automation testing of an eCommerce website is critical in terms of time, quality of the project delivery in an agile environment.There are many ways to automate testing of eCommerce sites, one of the ways is Headless Bowser Automation. In this blog, we will see in detail about how to implement Headless Browser automation testing with Chrome.

What is a Headless Browser?

From the name itself, it can be clearly understood that the scripts that are executed can’t be visualized. So. when running the automated tests, the users may not see any direct interaction with the browsers ( Chrome, Firefox, IE, Safari).

The automated tests run on the backend and it will show the final results to the users. (i.e) there is no Graphical User Interface (GUI).

PhantomJS was very popular for running the headless testing but the support for it has been stopped recently. From Chrome 59 version onwards, the Headless Browser is supported directly.

Here we will see the implementation of Headless Browser testing with Chrome browser.

Why should we go for Headless Browser testing?

  • It is easy to implement.
  • Reduces time and effort in the automation scripts execution.

Since the execution is faster it will save a lot of time and effort when running the regression suite of an eCommerce website.

Pre-requisites

  • Chrome Browser should be updated on the local machine.
  • Chrome Canary needs to be installed on the local machine. Download the chrome canary browser here.
  • Chrome Driver needs to be installed on the local machine and the path should be configured in the environment variable. Download the chromedriver here
  • Selenium Standalone Server. You can use the current version or the previous versions.
  • WebDriver IO needs to be installed on your local machine. Please find the installation steps here

Chrome 59 execution

In order to use the Chrome 59 in Webdriver IO scripts, we need to make the following changes in the configuration file wdio.conf.js.

In the capabilities make the below changes. Specify the browser name as Chrome since we are running the tests on the Chrome browser.

The args should be passed in the chrome options. The terms

— headless        – Denotes the script should run in the headless mode

— disable-gpu  –  It is a temporary requirement and it deals with the known bugs

–window-size  –  Sets the dimensions of the headless browsers when it is executed

Configure the path location of the Chrome Canary browser in the ‘binary’ option i.e. Binary should point to the Chrome binary that supports headless mode. The path to the Chrome Canary will differ from platform to platform. But generally, the Chrome Canary should be located in the canary locations

If you are running the scripts in Remote Webdriver you will get “the path to the chromedriver executable must be set by the webdriver.chrome.driver system” property error message. In order to overcome that we need to do the following action

  • The selenium server should be started with -Dwebdriver.chrome.driver = C:Path to the chromedriver.exe.

So the selenium standalone command looks like

— java-jar selenium-server-standalone-x.xx.x.jar-Dwebdriver.chrome.driver=D:selenium-standalonechromedriver.exe

Else you can use the normal selenium command to start the selenium server

— java -jar selenium-server-standalone-x.xx.x.jar

Place the Webdriver IO scripts in test/specs folder

Go to the Command prompt and to the folder where selenium standalone server is placed. Then run the following command to start the selenium server

— java -jar selenium-server-standalone-x.xx.x.jar

Then again open a new window in the command prompt and go to the folder where webdriver IO script has been placed. Then run the following command to execute the webdriver IO Script

        — wdio wdio.conf.js

The scripts will be executed and the results will be displayed in the command prompt.

Thus the automation script is executed using the Chrome 59 browser in headless mode.

Hope this was useful. Please do not hesitate to contact us if you have any queries or comments.

References

Prasanna Venkatesh

Prasanna Venkatesh – a Quality Analyst in DCKAP, has experience in successfully delivering Quality Products and Services. He is passionate about everything in QA and takes ownership of every task. Loves to play cricket and chess.

More posts by Prasanna Venkatesh