Executing Polymer 3.x tests in a headless environment

Other Questions Headless Browser
1

I’m trying to run my Polymer 3.x tests without the browser popping up. I installed the wct-headless package and configured my wct.config.json file. However, when I execute polymer test, I encounter an error that says the headless plugin could not be found.

Here’s the configuration I have:

{
  "plugins": {
    "local": {
      "disabled": true
    },
    "headless": {
      "browsers": ["chrome", "firefox"],
      "browsersOptions": {
        "chrome": ["headless", "disable-gpu", "no-sandbox"],
        "firefox": ["--headless"]
      }
    },
    "sauce": false,
    "xunit-reporter": {
      "output": "results.xml"
    }
  }
}

Additionally, my package.json lists these dependencies:

{
  "dependencies": {
    "@polymer/polymer": "^3.0.0"
  },
  "devDependencies": {
    "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "wct-browser-legacy": "^1.0.0",
    "wct-headless": "^2.2.2",
    "web-component-tester": "^6.8.0",
    "wct-xunit-reporter": "1.0.2"
  }
}

Can anyone help me understand what might be wrong with my wct.config.json setup and how to resolve this error?

2

I’ve encountered similar issues when setting up headless testing for Polymer projects. One thing that often gets overlooked is ensuring that the wct-headless package is properly installed and recognized by your project.

First, try running npm install wct-headless --save-dev to make sure it’s correctly installed. Then, check if your wct.conf.js file (not wct.config.json) is in the root directory of your project. The configuration should be in JavaScript format, not JSON.

Here’s a sample wct.conf.js that worked for me:

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

Also, make sure you’re using the latest version of web-component-tester. Sometimes, outdated versions can cause compatibility issues with headless testing.

If you’re still encountering problems, try running polymer test with the --verbose flag to get more detailed error messages. This can often provide clues about what’s going wrong in the test setup process.

3

I’ve had success running Polymer 3.x tests in a headless environment by using a slightly different approach. Instead of relying on the wct-headless package, I’ve found it more reliable to use Puppeteer directly with web-component-tester.

First, ensure you have Puppeteer installed: npm install puppeteer --save-dev. Then, modify your wct.conf.js (note: .js, not .json) like this:

const puppeteer = require('puppeteer');

module.exports = {
  plugins: {
    local: {
      browsers: ['chrome'],
      browserOptions: {
        chrome: async () => puppeteer.launch({args: ['--no-sandbox']})
      }
    }
  }
};

This setup lets you run tests with polymer test without browser windows popping up. It’s been more stable in my experience and works well with CI/CD pipelines. Remember to update your package.json scripts if needed to use this configuration.