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: Interacting with elements in WebdriverIO through the WebDriver protocol is the closes you can get to reality compared to emulated interaction in virtual DOM environments.
• 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 browser if you are interested adding unit tests for your components or E2E Testing - of Web or Mobile Applications if 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 StencilJS as 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.