Skip to main content
Introducing the Automate SDK! Get your entire test suite running on BrowserStack in minutes! Learn More.

Integrate Your Test Suite

Integrate BrowserStack into your test suite using the BrowserStack WebdriverIO Service

The BrowserStack WDIO service ensures a plug-and-play integration. It passes test context and configures other BrowserStack features under the hood without requiring any code changes.

Prerequisites

  • Node v12+, Selenium v2.5+ (W3C/JSON Wire)
  • An existing WebdriverIO based web automation test suite.

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 icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

Install BrowserStack WDIO service

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

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.

Set platforms to test on

Set the browsers/devices you want to test within the capabilities array. Our config follows W3C formatted capabilities.

Parallel thread #1
Parallel thread #2
Parallel thread #3

Enable BrowserStack Local

Test localhost/internal servers in your network

True
False
Test localhost/staging websites that are not publicly accessible

BrowserStack’s Local Testing feature connects with test suites pointing to your localhost URL

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.

BrowserStack Reporting

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

Build Name

Set build name as the name of the job/test suite being run. Accepted characters: A-Z, a-z, 0-9, ., :, -, [], /, @, &, , _. All other characters are ignored.
Character limit: 255

buildIdentifier Description Generated build name on dashboard
${BUILD_NUMBER} (Default) If build is triggered locally, an incremental counter is appended.

If build is triggered with CI tools, CI generated build number is appended.
bstack-demo 1


bstack-demo CI 1395
${DATE_TIME} The timestamp of run time is appended to the build. bstack-demo 29-Nov-20:44
Advanced use cases for Build name

Custom formatting of build name

Prefix buildIdentifier with desired characters, for example, # or : in your webdriverio.conf.js file.

commonCapabilities: {
  'bstack:options': {
    buildName: 'bstack-demo 123',
  }
}

Re-run tests in a build

You can re-run selected tests from a build using any of the following options:

Option 1: Set the build name as a combination of buildName and buildIdentifier, as seen on the dashboard in your webdriverio.conf.js file:

exports.config = {
  //..
  services: [
      ['browserstack', {
          buildIdentifier: '#${BUILD_NUMBER}',
          // ..
      }]
  ],
  //...
  commonCapabilities: {
    'bstack:options': {
      buildName: 'bstack-demo',
    }
  }
};

Option 2: Set the buildIdentifier as the build number or time of the required build as seen on the dashboard:

exports.config = {
  //..
  services: [
      ['browserstack', {
          buildIdentifier: '#${BUILD_NUMBER}',
          // ..
      }]
  ],
  //...
  commonCapabilities: {
    'bstack:options': {
      buildName: 'bstack-demo',
    }
  }
};


Project Name

Set a project name for your project.

sessionName is the name of your test sessions and is automatically picked from your test class/spec name. It doesn’t need to be set manually when using the BrowserStack SDK.

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:

Test Observability

Enables Test Observability, an advanced test reporting and debugging tool that helps you analyze test failures dramatically faster. If enabled, Test Observability collects test data using the SDK. This capability is enabled (set to true) by default.

True
False
Network logs

Enables network capture for the session in HAR format. Reduces session performance slightly

True
False

Use Percy Visual Testing

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.

Percy Visual Testing

Enable visual testing to automatically identify and highlight visual UI changes.

Note: Using Percy to perform Visual testing affects the performance of your Automate tests.

True
False

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.

Update configuration file with selected capabilities

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

webdriverio.conf.js
Copy icon Copy snippet

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.

Advanced features and use cases

Here’s a list of features and capabilities that you might find useful:

Accept insecure certificates

The acceptInsecureCerts capability suppresses browser popups 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.
webdriverio.conf.js

Change desktop resolution

The resolution capability changes the default desktop screen resolution for your tests on BrowserStack.

Capability Description Expected values
resolution Set the resolution of your VM before beginning your test A string. Default resolution is 1024x768

Supported resolutions:
Windows (XP, 7): 800x600, 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, and 2048x1536

Windows (8, 8.1, 10): 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080, and 2048x1536

OS X (Sonoma, Ventura, Monterey, Big Sur, Catalina, Mojave, and High Sierra): 1024x768, 1280x960, 1280x1024, 1600x1200, 1920x1080, 2560x1440, 2560x1600, and 3840x2160

OS X (All other versions): 1024x768, 1280x960, 1280x1024, 1600x1200, and 1920x1080
webdriverio.conf.js

Other use cases

Use the following additional links to documentation pages that might help with your test scenarios:

Next steps

After you have successfully run your first test on BrowserStack, you might want to do one of the following:

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






Thank you for your valuable feedback

Is this page helping you?

Yes
No

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






Thank you for your valuable feedback!

Talk to an Expert
Download Copy