How to execute Polymer 3.x tests in a headless browser environment?

Other Questions Headless Browser
1

I’m trying to run my Polymer 3.x tests without opening a browser window. I set up my configuration in wct.config.json like this:

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

However, when I run polymer test, I receive the following error:

Could not find WCT plugin named “headless”

My package.json file lists these dev dependencies:

{
  "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"
  }
}

What do I need to change in my wct.conf.json to correctly run tests in a headless browser?

2

I encountered a similar issue before. The root of the problem is in how the headless configuration is being specified. Instead of using a distinct ‘headless’ plugin, you should integrate the configuration under the ‘local’ plugin. By doing so, you instruct the test runner to initiate local browsers in headless mode.

Below is the modified configuration:

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

Ensure that you are using the latest versions of wct-browser-legacy and web-component-tester. If issues persist, consider running ‘polymer test’ with the ‘–verbose’ flag for additional insights.

3

I’ve been working with Polymer for a while now, and I’ve found that running tests in headless mode can be a bit tricky. One thing that helped me was making sure I had the correct dependencies installed. In your case, I noticed you’re using ‘wct-headless’, but that’s actually not necessary for Polymer 3.x.

Instead, try removing ‘wct-headless’ from your devDependencies and make sure you have the latest version of ‘web-component-tester’. Then, in your wct.conf.json, you can simplify your configuration by using the ‘local’ plugin with browserOptions set for headless mode.

Here’s what worked for me:

{
  "plugins": {
    "local": {
      "browsers": ["chrome", "firefox"],
      "browserOptions": {
        "chrome": ["headless", "disable-gpu", "no-sandbox"],
        "firefox": ["--headless"]
      }
    }
  }
}

After making these changes, run ‘npm install’ to update your dependencies, then try ‘polymer test’ again. This approach has consistently worked for me across different projects.

4

hey josephk, i had similar issues. try replacing ‘headless’ with ‘local’ in ur wct.config.json. like this:

"local": {
  "browsers": ["chrome", "firefox"],
  "browserOptions": {
    "chrome": ["headless", "disable-gpu", "no-sandbox"],
    "firefox": ["--headless"]
  }
}

this worked for me. hope it helps!