Hands on with headless chrome and firefox testing in 5 mins

Irfan Ahmad
Technology at upGrad
5 min readOct 18, 2017

--

At UpGrad, we continuously run UI functional tests for our web platforms on real browsers such as Chrome, Firefox and over desktop’s and mobile devices with selenium .This helps us make sure that our users are getting a flawless online learning experience.

But running these real browser based UI functional tests with selenium web-driver adds few challenges

  • We cannot directly run these tests on any remote unix/linux servers since these tests always need a display for execution.
  • Real browsers include a GUI and often many other features that enrich the browsing experience but actually are not always required for functional testing.
  • The GUI and additional features make real browsers heavier, more resource intensive, and slower to execute automated commands.
  • It’s difficult and complex to scale large number of real browser tests execution on Continuous Integration environment with existing solutions like using xvfb or selenium-grid or docker-selenium etc.

Now what if you want to run your tests on any system even where there is no display output for the browser to launch ? The easiest answer is to use a headless browser.

What is Headless Testing

A headless browser is a web browser without a graphical user interface. Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface.

The most useful way to use headless browser is to run automated tests with it, It is suitable for general command-line based testing, within a pre-commit hook, and as part of a continuous integration system.

Why Headless Tests

  • Just like a regular browser, a headless browser understands HTML and CSS. It can execute JavaScript like AJAX requests but the real browser does the heavy lifting of combining all the HTML, CSS, and JavaScript into something useful and, since there are no images to be displayed, testing is faster in a headless environment.
  • Sometimes we need to run very quick browser-based sanity tests which can, and should be, executed on any headless machine (like remote linux server) to get quick testing feedback.
  • Although headless browsers aren’t much faster than real browsers, but since they don’t have to render pixels to a screen and have fewer dependencies unlike the real browsers which need a display or xvfb support they are faster and easier to set up and execute anywhere.

Before Google Chrome 59 and Firefox 56 the headless execution was done by 3party headless browsers like PhantomJS, SlimerJS, TrifleJS, Nightmare and HTMLUnit.You can find a complete list of headless browsers here.

Within UpGrad we were also using headless testing earlier but on PhantomJS browser with poltergeist and Capybara.

Problems with PhantomJS

  • In general these 3rd party headless browsers emulates some engines, but not V8 (Chrome engine) or Gecko (Firefox engine) and since most of the our users in uses either Google Chrome and firefox, it’s necessary simulate the real engine.
  • Now although PhantomJs is a fully functional headless browser, it’s not a real browser which our actual users use. So, a bug found using a headless browser like PhantomJS may actually not be a bug.
  • Not to forget, it has thousands of open issues most of which do not appear in any other real browsers.

Why Headless Chrome and Firefox

  • Chrome and Firefox added support for a headless flag so it could be started without any GUI. Headless Chrome was shipped in Chrome 59 and Headless Firefox was shipped in Firefox 56.
  • Following this announcement, the creator of PhantomJS even announced that he would be stepping down as a maintainer.
  • Running smaller tests under the headless version of Chrome means that our features specs can be tested in the same environment that most of our users are browsing in, in lesser time. This is also supposed to improve memory usage.
  • This test can be executed for quicker feedback before starting the larger test suites with selenium web-driver over real browsers, as visible in the pipeline below. We will also share our experiences on using Jenkins pipeline with UI tests in our upcoming posts.
Jenkins Pipeline with quick headless sanity test executed before larger real browser tests

Hands On with Headless Chrome

Below are the simple steps to use headless chrome to run your UI tests with Ruby, Selenium Web-driver and Capybara.

  1. Make sure that you have Chrome 59 or higher versions installed
  2. You may verify by running the below Chrome headless with command line
chrome --headless --disable-gpu --remote-debugging-port=9222 \ https://www.upgrad.com

Set alias to chrome in case it’s not set already, for example in Mac.

alias chrome="/Applications/Google\Chrome.app/Contents/MacOS/Google\ Chrome"

If you’re interested in performing live debugging, open localhost:9222 on Chrome, and you will see something like what you see below.

3. Install Chromedriver with brew on Mac

brew install chromedriver

4. Add below ruby gems to your project if not already added

gem 'selenium-webdriver'
gem 'capybara'
gem 'chromedriver-helper'

5. Configure Capybara to work with Headless Chrome

Capybara.register_driver(:headless_chrome) do |app|
capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
chromeOptions: { args: %w[headless disable-gpu] }
)

Capybara::Selenium::Driver.new(
app,
browser: :chrome,
desired_capabilities: capabilities
)
end

That’s it! You should be now able to run your existing selenium web-driver tests on headless Chrome.

Hands On with Headless Firefox

Below are the simple steps to use headless Firefox to run your UI tests with Ruby, Selenium Web-driver and Capybara.

  1. Make sure that you have Firefox 56 or higher versions installed
  2. You may verify by running the below Firefox headless with command line by including the -headless flag
firefox --headless https://www.upgrad.com

Set alias to firefox in case it’s not set already, for example in Mac.

alias firefox="/Applications/Firefox.app/Contents/MacOS/firefox"

If you’re interested in checking weather its really working or not, you may take a screenshot too by running.

firefox --headless https://www.upgrad.com -screenshot upgrad.jpg

3. Install Geckodriver on your system by running below commands

wget https://github.com/mozilla/geckodriver/releases/download/v0.19.0/geckodriver-v0.19.0-linux64.tar.gztar -xvzf geckodriver*
chmod +x geckodriver
sudo mv geckodriver /usr/local/bin/

4. Add below ruby gems to your project if not already added

gem 'selenium-webdriver','>=3.6.0'
gem 'capybara'

5. Configure Capybara to work with Headless Firefox

Capybara.register_driver :headless_firefox do |app|
browser_options = Selenium::WebDriver::Firefox::Options.new()
browser_options.args << '--headless'
Capybara::Selenium::Driver.new(
app,
browser: :firefox,
options: browser_options
)
end

Working Example

We are sharing a small working example for getting started with headless Chrome and Firefox tests, you can clone and try this on your own within 10 mins from here.

Although headless Chrome and Firefox are similar to existing tools like PhantomJS and both can be used for automated testing in a headless environment. However, we highly recommend using a real browser in headless mode to test and uncover realistic application issues.

Want to work with the amazing Tech team at UpGrad? Check out or Careers page.

--

--