Web Component Tester (WCT) is a browser-based test runner and toolkit for Web Components. It combines Selenium for browser automation, Mocha for test suites and lifecycle hooks, and Chai for assertions. section 13.2
WCT supports a small, component-focused testing workflow:
- Install WCT as a development dependency and add an npm script that runs matching HTML test fixtures. section 13.2
- Load WCT’s browser entry point, import the component under test, place an element fixture in the document, and add Mocha tests. section 13.2
- Assert public properties, attributes, and rendered shadow-root state, including edge cases such as values above a maximum or below a minimum. section 13.2
Testing a slider component
A fixture renders <wcia-slider value="50"></wcia-slider>. A suite checks that the value property and attribute equal 50 and that the shadow-root thumb is positioned correctly. Further tests set the value through JavaScript, then verify clamping to 100 and 0 for out-of-range inputs. section 13.2
Listing 13.2. WCT test file setup
<html>
<head>
<script src="../../../../node_modules/web-component-tester/browser.js">
</script> #1
<script #2
type="module"
src="../src/slider.js">
</script>
<style>
wcia-slider {
width: 500px; #3
}
</style>
</head>
<body>
<wcia-slider value="50"></wcia-slider> #4
<script>
// tests go here #5
</script>
</body>
</html>
Inspect the minimal HTML fixture showing WCT’s browser loader, component module, styled test element, and test script location. section 13.2
WCT includes Web Component polyfills when needed, waits for WebComponentsReady, and provides template-test support. It is deliberately simple but remains a work in progress; Karma offers an alternative with more configuration and plugins. section 13.3
