What is a good headless browser to run with protractor?

17
votes

New User here.

After hours of building my smoke and regression tests, I found out after reading many cases online that phantomjs is known to be a trouble to run with protractor. Jenkins has been running phantomjs for all the tasks it has been given so far.

They need these tests to run as part of ci which does not have a windowing system installed.

So I would appreciate it if there is a recommendation for completely headless browser or a headless chrome(that would be most beneficial) and a step by step to set it up. I already have a conf.js and a e2e.conf.js file. My code works perfectly fine with chrome.

I am on a iMac and selenium webdriver, I believe.

Edit: Problem = protractor doesn't work with phantomjs. What I have done = use different web elements and googled if anyone has faced a similar situation. Also googled for headless browsers that worked for protractor, unable to find a suitable solution.

5
javascriptseleniumjenkinsprotractorheadless-browser
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Do you have a specific problem with your current setup? If so, describe the problem and what has been done so far to solve it. – honk

5 Answers

9
votes

Your best bet is to continue with Chrome. With a bit of work you can get it to work via a CI and in a headless manner - we do this using Jenkins and Docker Ubuntu servers which are headless.

You will need to configure Chrome to run headless using XVFB. You can start off by following the gist here https://gist.github.com/addyosmani/5336747

You state you are on a Mac so you can either run the headless tests via Docker on your machine or you could set up a second config for the CI tests.

Another resource http://tobyho.com/2015/01/09/headless-browser-testing-xvfb/

17
votes

If anyone reached here - the answers are outdated. Chromium (on next release) now supports headless mode. no need to work hard.

You can read more here:

https://developers.google.com/web/updates/2017/04/headless-chrome

Here is an example from command line

chrome \
 --headless \                   # Runs Chrome in headless mode.
 --disable-gpu \                # Temporarily needed for now.
 --remote-debugging-port=9222 \
 https://www.chromestatus.com   # URL to open. Defaults to about:blank.

And you can simply trigger protractor with capabilities for chrome:

Activating chrome language flags when activating from protractor (selenium)

Here is the configuraiton I am using

 capabilities: {
    'browserName': browserName,
    chromeOptions: {
      binary: '/Users/guymograbi/Downloads/chrome-mac/Chromium.app/Contents/MacOS/Chromium',
      args: ['--headless','--disable-gpu']
    }
  },

Update - new versions of chrome doesn't require binary property

In my environments I found I can remove the binary property as new version of chrome is available on stable branches

My protractor configuration is 

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

  },

And it works smoothly for weeks now. highly recommended.

Update - how to do this in karma is super easy

Using headless chrome in karma is super easy: 

 browsers: 'ChromeHeadless'

it should work with the chrome loader and everything. more info

1
votes

I would continue testing in normal browsers with a head, but would use a remote selenium server as a service - Sauce Labs or BrowserStack, see:

1
votes

You could run your Protractor tests against CodeShip or Drone.io, both of which offer Chrome and/or Firefox running headless for free. No really...

0
votes

If you've got Chrome 59+ installed, start Chrome with the following flag:

--headless

please let me know if you need more help, will write the config for you :) enjoy