Executing polymer-3.x tests in a headless environment

I’m looking to execute my tests without any graphical browser launch. I’ve installed the headless web component testing package and set up the configuration file as below:

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

When I run the command to test the polymer application, I encounter an error message that states:

Error: WCT plugin named “headless” not found.

Additionally, this is the relevant portion of my package.json:

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

What changes are needed in my wct.conf.json configuration?

The issue you’re experiencing seems to indicate that the Web Component Tester (WCT) is not recognizing the headless plugin as expected. Here are a few steps to resolve this:

  1. Check Plugin Installation: Ensure that wct-headless is properly installed in your node modules. You can verify it by running the command:

    npm list wct-headless
    

    If it’s not listed, you may need to add it explicitly to your devDependencies and run npm install again.

  2. Correct Plugin Reference: The error message you’re receiving suggests that wct isn’t recognizing the “headless” browser configurations as it’s looking for a plugin with that exact name. You may instead need to invoke headless options directly under WCT configuration settings as it might not directly accept a plugin named “headless”.

  3. Replicate headless options directly in browsers settings: Consider configuring the headless browsers directly in your command line or investigate if there’s a WCT option file adding the headless configuration internally under browsers. For example, you can try the following:

    {
      "browserOptions": {
         "chrome": [
            "--headless",
            "--disable-gpu",
            "--no-sandbox"
         ],
         "firefox": [
            "--headless"
         ]
      }
    }
    
  4. Verify WCT version compatibility: Ensure that your current setup is compatible with the versions of Polymer, WCT, and the wct-headless. Compatibility issues can sometimes cause plugins or configurations to go unrecognized.

  5. Run Tests Directly via CLI: Attempt to execute your tests directly via CLI bypassing configurations to check the behavior:

    wct --browsers chrome,firefox --plugin headless
    

These steps should help you resolve the “plugin not found” error by ensuring the correct setup and compatibility of your testing environment. For further assistance, ensure your package versions are aligned with the requirements of all your dependencies.