Overview
WebdriverIO is a progressive automation framework built to automate modern web and mobile applications. It simplifies the interaction with your app and provides a set of plugins that help you create a scalable, robust and stable test suite.
Testing with WebdriverIO has the following advantages:
- Cross Browser Support: WebdriverIO is designed to support all platforms, either on desktop or mobile. You can run tests on actual browser your users are using, including covering different versions of them.
- Real User Interaction: Interaction with elements in WebdriverIO through the WebDriver protocol is much closer to native user-triggered interactions than what can be achieved with emulated DOM environments (such as JSDom or Stencil's own Mock-Doc).
- Web Platform Support: Running tests in actual browser allows you to tap into the latest Web Platform features for testing your components, often not available when using virtual DOM environments.
Set Up
To get started with WebdriverIO, all you need to do is to run their project starter:
npm init wdio@latest .
This will initiate WebdriverIOs configuration wizard that walks you through the setup. Make sure you select the following options when walking through it:
- What type of testing would you like to do?: select either
Component or Unit Testing - in the browserif you are interested adding unit tests for your components orE2E Testing - of Web or Mobile Applicationsif you like to test your whole application (you can always add either of them later on) - Which framework do you use for building components?: if you select Component or Unit Testing make sure to select
StencilJSas preset so WebdriverIO knows how to compile your components properly
The following questions can be answered as desired. Once setup the wizard has created a wdio.conf.ts file and a wdio script to run your tests. You should be able to run your first test on the auto-generated test file via:
npm run wdio
More information on setting up WebdriverIO can be found in their documentation.