Browser automation launches test browsers from the terminal, loads the HTML, JavaScript, and CSS under test, and reports results back to the terminal. In Web Component Tester, Selenium handles this browser-control layer. section 13.2
A browser-testing setup separates three responsibilities:
- Selenium launches and controls the browsers running the tests. section 13.2
- Mocha organizes suites and tests, with setup and teardown hooks. section 13.2
- Chai supplies assertions that compare actual values with expected results. section 13.2
Testing a slider component
A WCT test page loads the component, creates <wcia-slider value="50"></wcia-slider>, and checks its JavaScript property, HTML attribute, and rendered thumb position. Additional tests set values above and below the allowed range to expose missing maximum and minimum handling. 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 test-page setup, including the WCT browser script, module under test, component fixture, and test location. section 13.2
