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.
Looking for a starter project? Get started with our WebdriverIO sample project.
Integration steps
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.
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.
Set number of parallel threads per platform
The parallelsPerPlatform property determines the number of parallel threads to be executed. BrowserStack’s SDK runner will select the best strategy based on the configured value.
Example 1: If you have configured 3 platforms and set parallelsPerPlatform as 2: a total of 6 (3 x 2) parallel threads will be used on BrowserStack.
Example 2: If you have configured 1 platform and set parallelsPerPlatform as 15: a total of 15 (1 x 15) parallel threads will be used on BrowserStack.
Do you want to perform cross-browser testing without test level parallelization?
Remove the parallelsPerPlatform capability from the configuration file.
Do you want to test parallelization without performing cross-browser testing?
Remove or comment out the platform capability while keeping the parallelsPerPlatform capability intact in the configuration file.
Do you want to skip cross-browser testing as well as parallelization?
Remove or comment out the platform and parallelsPerPlatform capabilities from the configuration file.
Enable BrowserStack Local
Test localhost/internal servers in your network
BrowserStack’s Local Testing feature connects with test suites pointing to your localhost URL
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:
Set a name to your build (usually the same as the build ID that’s on your CI/CD platform).
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',
}
}
};
Set a project name for your project.
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
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 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.
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.
Use our Capability Generator to select from a comprehensive set of options you can use to customize your tests.
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 Automate dashboard to view your test results.
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. |
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 (Sequoia, 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
|
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:
- 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, BitBucket, TravisCI, GitHub Actions
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
- RESOURCES
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!