Connect & Get help from 6000+ developers on our Discord community.

Integrate your WebdriverIO test suites with BrowserStack

Learn how to integrate your WebDriverIO automated tests with BrowserStack. Run tests on BrowserStack’s real device cloud of 3000+ devices and browsers.

BrowserStack supports out of the box integration with WebdriverIO. All you need is a few changes in your existing WebdriverIO config file and you’re good to go!

Ready to integrate your existing WebdriverIO Appium test suite with BrowserStack? This document walks you through the simple steps to connect your tests to our cloud infrastructure and start running them on real devices. You’ll learn how to configure your environment, upload your app, and execute tests seamlessly on BrowserStack’s device cloud.

Looking for a starter project? Get started with our WebdriverIO sample project.

Prerequisites

Node.js 8.11.2+ installed on your system.
An existing WebdriverIO based automation test suite.

BrowserStack currently supports WebdriverIO versions 7, 8, and 9.

Integration steps

Set BrowserStack credentials

Saving your BrowserStack credentials as environment variables makes it easier to run your test suite from your local or CI environment.

Copy

Upload app

Upload your Android (.apk) or iOS (.ipa) apps to BrowserStack servers using one of the following ways:

Upload app using the App Automate dashboard

On the App Automate dashboard, click the Upload button on the top-right corner. Select the app you want to upload from your filesystem.

Screenshot showing the Upload button in the top-right corner of the App Automate Dashboard

Upload app using App Management UI

To upload an app using the App Management UI, follow the steps below:

Navigate to App Automate dashboard, on the sidebar, click App Management.
On the App Management UI, click Upload App.
Select the app you want to upload from your filesystem. If you are uploading the app using a public URL, paste the URL of your app in the or upload from URL box.
After selecting the app, choose the App Automate framework you want to use for testing. You can optionally add flags and a custom ID.
Click Upload. The app is uploaded to the BrowserStack servers. You’ll receive an App ID, which you can use to run tests.

Upload apps from the filesystem using App Management UI

To manage your apps, refer to the documentation on managing apps using App Management UI.

Upload app using REST API

To upload an app using filesystem/public URL via the REST API, use the cURL example:

Copy

Install BrowserStack WDIO service

Use either of the following ways to install BrowserStack WDIO service to your project:

      
            NPM
          
            Packagejson
          
          Copy
        
npm install @wdio/browserstack-service --save-dev
"devDependencies": {
  "@wdio/browserstack-service": "^7",
}

Update your WebdriverIO config file

Update your configuration file with the following parameters to run tests on BrowserStack.
At the end of this step, you will have a sample configuration file with BrowserStack capabilities to use in your project.

Add BrowserStack service

Add browserstack to the services list in your configuration file. if you’re using our sample repo, the test.conf.js configuration file in your preferred project folder(android/iOS) has to be changed.

Set app to be tested

The app property determines the app to be tested. You can upload an Android app (.apk, .aab, or .xapk file) or an iOS app (.ipa file) from your local filesystem.

Supported method	Description
path(Recommended)	SDK uploads the app using the specified relative or absolute path. Eg: `app: ./SampleApp.apk`.

Note: Check out how to create IPA files for iOS app testing on BrowserStack.

Other acceptable app property values

You can use BrowserStack REST API to upload your app.

Following is a sample response that is generated when you upload an app using any of the mentioned methods:

 {
    "app_url":"bs://f7c874f21852ba57957a3fdc33f47514288c4ba4", 
    "custom_id":"SampleApp",
    "shareable_id":"exampleuser/SampleApp"
 }

The following table explains the other acceptable app property values:

Supported method	Description
app_url	Uploaded app’s `app_url` is a valid value for `app` property. Eg: `app: bs://45e1c1473b17b7643aed1761f51cb5cdf3d3e334`
custom_id	If you’ve defined a `custom_id` while uploading your app, the same value can be used as `app` property value. Eg: `app: CalculatorApp`
shareable_id	If you wish to test an app uploaded by someone else from your organization, a `shareable_id` can be used as the `app` property value. Eg: `app: exampleuser/CalculatorApp`

Check out how to specify the application under test to understand the above options better.

Select Android or iOS devices from a list of 150+ available combinations

Use one of our sample apps to run your first Appium test on BrowserStack App Automate. Choose from the options below:

Do you want to dynamically configure platforms?

To dynamically configure platforms across different tests, you can comment out the platforms capability while still passing platform-specific capabilities.

Configure maxInstances to set the number of parallels

You can create multiple threads for parallel execution by adding maxInstances capability. The maxInstances number represents the maximum number of devices that should be created in parallel in BrowserStack.
Example: maxInstances: 4

BrowserStack Reporting

You can leverage BrowserStack’s extensive reporting features using the capabilities:

The projectName and buildName config must be static and not change across different runs of the same build. This is a deviation in approach as specified by BrowserStack Automate or App Automate as Test Reporting & Analytics will automatically identify different build runs.

Restrict the characters in your projectName and buildName to alphanumeric characters (A-Z, a-z, 0-9), underscores (_), colons (:), square brackets ([, ]), and hyphens (-). Any other character will be replaced with an underscore (_).

Do you want to enable/disable auto-marking of test status and session?

The sessionName and sessionStatus are the names of your test sessions and status of your test sessions respectively. They are automatically picked from your test class/spec names and statuses. They do not need to be set manually when using the BrowserStack SDK. To override the sessionName and sessionStatus capabilities, use the following in your browserstack.yml file:

You can configure local testing to start without initializing the BrowserStack binary, or even with an existing binary using a local identifier

testContextOptions:
    skipSessionName: true
    skipSessionStatus: true

Enable Local Testing and debugging features

To enhance your testing experience on BrowserStack, you can enable additional features such as Local Testing and debugging features by adding the respective capabilities in your config file.

Enable BrowserStack Local

Test apps with local/staging API servers

True

False

Test apps locally with local/staging API servers

BrowserStack’s Local Testing feature connects with locally hosted API servers to run your apps

Learn more

BrowserStack Local supports all advanced use cases and restricted networks. Contact our support team for assistance in configuring BrowserStack Local for your enterprise.

Enable debugging features

Use additional debugging features

By default, BrowserStack provides prettified session logs, screenshots on every failed selenium command, and a video of the entire test. Additionally, you can enable the following features:

Use App Percy Visual Testing

App Percy is an all-in-one visual testing and review platform enabling teams to automate visual tests, detect visual bugs, and provide valuable insights into UI changes.

Note: percyCaptureMode takes effect only if you set percy to true. If you set the capture mode to manual, ensure you use the Percy Screenshot function in your test script.

Use App Accessibility Testing

App Accessibility evaluates and reports app accessibility issues through comprehensive testing and reporting on real devices, ensuring compliance and reaching a wider audience.

Update configuration file with selected capabilities

Copy the following code snippet and add it to your configuration file of your test suite.

For a complete list of capabilities, refer to the WebDriverIO BrowserStack service on App Automate documentation.

Copy

Use our Capability Generator to select from a comprehensive set of options you can use to customize your tests.

You can also pass regular expressions (regex) in deviceName and platformVersion capabilities if your device selection is more flexible. Check out how to use regular expressions to specify device attributes.

Run your test suite

Your test suite is now ready to run on BrowserStack. Use the commands defined in your package.json file to run the tests.

To find out the location of the BrowserStack SDK log files, refer to BrowserStack SDK Log Files. If you are looking for more information, see FAQ documentation.

After you run your test, visit the App Automate dashboard to view your test results.
If you want to toggle between BrowserStack and your Local device grid when using BrowserStack SDK, refer to the commands here.

Facing issues with your project? Try running a sample build here.

Advanced features and use cases

Here’s a list of features and capabilities you may find useful.

Accept insecure certificates

The acceptInsecureCerts capability suppresses warning about self-signed certificates usually found in staging environments.

Capability	Expected values
`acceptInsecureCerts`	A boolean. Default is `False`. `True` if you want to accept all SSL certificates.

Change device orientation

The deviceOrientation capability changes the default mobile screen orientation for your tests on BrowserStack infra.

If the parameter is set at the root level, its applicable to all the devices in the test.
If you wish to apply it to a specific device, set it at the platform level which has the device details.

Capability	Description	Expected values
`deviceOrientation`	Set the orientation of your app before beginning your test	A string. Default orientation is `portrait`. Supported orientations: `portrait` and `landscape`.

Simulate IP geolocation

The geoLocation capability lets you test your app across different countries.

Note that this capability is supported on the Enterprise plan only. You can contact sales to get an Enterprise plan for your account.

Capability	Description	Expected values
`geoLocation`	Set the country code you want your test to detect	A string. An ISO 2 country code `FR` for France, `CN` for China Check out the complete list of 45+ countries we support.

Simulate network conditions

The networkProfile capability lets you test your app under different network conditions.

Capability	Description	Expected values
`networkProfile`	Set the network profile to start the test with	A string. `2g-gprs-good`, `4g-lte-advanced-lossy` Check out the complete list of all pre-defined network profiles under `device features` section.

Others

Following are a few additional links to documentation pages that might help with your test scenarios:

Troubleshooting

Here’s a list of troubleshooting options you may find useful.

Errors faced during app upload

When you upload your app to BrowserStack, make sure that the app file and its path or URL are valid. If you see an error during app upload, first check the following:

The file path is correct and the app file exists on your machine.
The app URL is publicly accessible and not behind a firewall or authentication.
The app file type is supported by BrowserStack. You can upload your app from the App Automate dashboard, App Management UI, or by using the REST API. For detailed information on uploading and managing apps, refer to Uploading and managing apps.

Invalid device OS combination errors

If you face errors related to invalid device OS combinations, ensure that the device and OS version combinations you are trying to run your tests on are supported on BrowserStack.

For detailed information on selecting devices, refer to the Select devices documentation.
To use regular expressions to specify device attributes, refer to the Using regex to select devices documentation.
To check the list of supported OS versions for devices on BrowserStack, refer to the App Automate supported devices documentation.

Resigned Apps and Third-Party Library Integration Issues

Uploading an unsigned version of an Android app will require us to sign it with our certificates before installing it on our devices. In the same manner, any uploaded .aab files will be converted into a universal APK and signed with our certificates.
If BrowserStack resigns the apps, third-party library integrations such as Google Firebase services, Google Maps SDK, Facebook SDK, etc., may not function properly if the use of API keys is restricted based on the SHA-1 certificate fingerprint of the app’s signing key.
To prevent this issue, it’s recommended to sign the APK with your own certificates before uploading it to BrowserStack.

Disabling Re-Signing for iOS Apps

If you upload an iOS app, we will re-sign the app with our own provisioning profile to be able to install your app on our devices during test execution.
However, if your app is signed using the Apple Developer Enterprise Program, you can disable this behavior to test features such as push notifications on BrowserStack devices.

Capability	Expected values
`resignApp`	A boolean. To disable re-signing, set the `browserstack.resignApp` capability to `false` in your Appium test scripts.

Next steps

Once you have successfully integrated your test suite with BrowserStack, you might want to check the following:

Generate a list of capabilities that you want to use in tests
Find information about your Projects, Builds and Sessions using our REST APIs
Set up your CI/CD: Jenkins, Bamboo, TeamCity, Azure, CircleCI, TravisCI.

Did this page help you?

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!