web-component-tester makes testing your web components a breeze!

You get a browser-based testing environment, configured out of the box with:

• Mocha as a test framework.
• Chai assertions.

Additionally, web-component-tester provides integration with selenium via gulp or grunt, so that you can easily run your test suites across multiple browsers.

Writing Tests

All tests are driven by .html files. At the top of each test file, you will need to load browser.js:

<script src="../../web-component-tester/browser.js"></script>

Then, you just need to write your Mocha tests normally (either TDD or BDD).

<script>
  suite('<awesome-element>', function() {
    test('is awesome', function() {
      assert.isTrue(document.createElement('awesome-element').awesome);
    });
  });
</script>

You can use either the TDD or BDD interfaces.

By default, web-component-tester will run test/index.html. You can use this as your root test, which then loads all your suites:

Suites of Suites

To run multiple test files together, you can use the WCT.loadSuites helper to load and concurrently run all your tests:

<script>
  WCT.loadSuites([
    'awesome-element.html',
    'awesomesauce.js',
  ]);
</script>

Test Helpers

The browser environment is also set up with some helpful additions:

• Async.js is made available. Use it!
• platform.js specific helpers.

Command Line Interface

Gulp

gulpfile.js:

var gulp = require('gulp');
require('web-component-tester').gulp.init(gulp);

gulp test:local

Aliased to gulp test for convenience.

Runs tests locally against all configured browsers.

Flags:

--browsers BROWSER,BROWSER: Override the browsers that will be run.

--persistent: Doesn't close the browsers after their first run. Refresh the browser windows to re-run tests.

--expanded: Lists each test as it passes/fails/pends.

gulp test:remote

Runs tests remotely against configured browsers. Requires that SAUCE_USERNAME and SAUCE_ACCESS_KEY are set in your environment.

gulp wct:sauce-tunnel

Starts a Sauce Connect tunnel, and keeps it open.

Grunt

gruntfile.js:

grunt.initConfig({
  'wct-test': {
    local: {
      options: {remote: false},
    },
    remote: {
      options: {remote: true},
    },
  },
});

grunt.loadNpmTasks('web-component-tester');

Gives you two grunt tasks: wct-test:local and wct-test:remote which will use the default browsers for their runs.

The options you can use are specified in runner/config.js.

wct-sauce-tunnel

Starts a Sauce Connect tunnel, and keeps it open.