Running WebdriverIO browser tests on BrowserStack

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.

You can use WebdriverIO to automate the following:

• 🌐 modern web applications that are written in React, Vue, Angular, Svelte or other frontend frameworks.
• 📱 hybrid or native mobile applications running in an emulator/simulator or on a real device.
• 💻 native desktop applications (e.g. written with Electron.js)
• 📦 unit or component testing of web components in the browser.

In this article, we will explore how to run our WebDriverIO browser-based automated tests in Browserstack using the npm wdio browserstack-service available. Let’s get started!!

Step 1: Setup Node js and Visual Studio Code

In order to set up WebdriverIO, we need to ensure that we have the following software installed in our system.

Node js: you can visit their download page and install the appropriate version of Node based on your OS and machine architecture.

Visual Studio Code: Check out the download page to install the Visual Studio Code editor on your machine.

Step 2: Install WebdriverIO using npm

· Firstly, we can create a new empty folder in any of our drive locations available which will be used to set up our project code and the required dependencies.

· Next, open up VS Code and go to the File menu and then select the option: Open Folder, browse, and select the newly created folder to open up the same in VS Code.

· Once the folder is opened, we need to go to the Terminal menu option and then select the option: New Terminal which will open up the terminal.

Execute the below command to install WebdriverIO

npm init wdio@latest ./

It might take a couple of minutes to download the relevant dependencies, post which you will the installation Success message will be seen as below.

Next, we will need to configure and complete the applicable Webdriverio configuration as per the various options displayed. I have selected the below-mentioned options as per my needs for demo purposes.

Finally, when you specify “Yes” to run an npm install it will install all the relevant packages selected.

You can check the installed packages/dev-dependencies in the package.json file available under the project root directory.

As we had specified, “Yes” for the configuration option: “Do you want WebdriverIO to autogenerate some test files”. So, WebdriverIO went ahead and configured a basic sample boilerplate login test case snippet based on the user login scenario that will be available under our test/specs folder.

Step 3: Run sample tests in our local environment

We can just run the below command to execute the sample configured tests in our local environment.

npm run wdio

In my case, the sample test has run on a Chrome browser v110.0 in a Windows 10 environment.

Step 4: Execute tests on different browsers, OS on BrowserStack

WebdriverIO has BrowserStack support out of the box, using which we can easily configure our WebdriverIO tests to be run on BrowserStack.

To do so, we will need to perform the following steps as mentioned below.

Install the npm wdio/browserstack-service using the below command

npm install @wdio/browserstack-service --save-dev

Next, we will need to configure the BrowserStack service details in our wdio.conf.js file under the services section.

I have specified the testObservability as true, read more about it here, and added a sample projectName and buildName details.

Next, I will log in to my browser account and will navigate to the Automate section available on the home page, and select WebdriverIO under Node JS.

This will open up the Integration guide page which will help us with the details and configuration required to complete the setup process.

Under “Configure the test script” section, we can select the applicable machine, browser, and version details which will generate an appropriate code snippet with config details which we will need to specify in our capabilities section available in the wdio.conf.js file.

I will select the below details to cover Chrome, Firefox, and Safari browsers in Windows and MacOS operating systems, and add the specific browser and version details under the capabilities section in the wdio.conf.js file.

Also, don't forget to add your BrowserStack user and key details

Finally as before just run the“npm run wdio” command now our browser tests will get executed in BrowserStack based on the capabilities specified.

You can view the full run details along with command logs, network logs, and video recordings for each test run which helps during debugging to analyze test failures or other issues.

Video recordings for a few test runs executed in BrowserStack environment.

Finally, do check out the Test Observeability page by BrowserStack to get a more detailed analysis of all your test runs, failures, and metrics based on builds, test suites, etc.

Hope you found this article to be useful and thanks for reading!!