headless.md

What?

Testing Polymer 2 web components against headless browsers: Chrome and Firefox.

• Headless Chrome was shipped in Chrome 59.
• Headless Firefox works on Firefox 55+ on Linux, and 56+ on Windows and Mac
• Support for both was recently shipped in web-component-tester 6.5.0 release

Why ?

Great for automated testing, GUI like xvfb no longer needed for these browsers.

How?

1. Update web-component-tester dependency to 6.5.0:

rm -rf node_modules && npm i web-component-tester@^6.5.0 --save-dev

2. Add the following plugins section to wct.conf.js config file:

module.exports = {
  plugins: {
    local: {
      browserOptions: {
        chrome: [
          'headless',
          'disable-gpu'
        ],
        firefox: [
          '-headless'
        ]
      }
    }
  }
}

3. Run tests like you usually do: npm test, wct, polymer test etc.

Summary

• Big test suites with hundreds of tests run faster with headless browsers
• Headless Firefox takes a couple of more seconds to start and run tests than headless Chrome
• Use carefully: hacky stuff like focus monkey-patching cause headless Chrome to fail

See also

• Travis CI docs
• web-component-tester Changelog