Integrate Your Test Suite with BrowserStack

Install BrowserStack Node SDK

Install the BrowserStack SDK using npm for your NodeJS based test suite for plug-and-play integration with BrowserStack.

The npx setup command generates a browserstack.yml file at the root location of your project with your access credentials already configured. It also adds new command(s) in your package.json file to run tests on BrowserStack.

npm i -D browserstack-node-sdk@latest
npx setup --username YOUR_USERNAME --key YOUR_ACCESS_KEY

Configure your browserstack.yml file

The auto-generated browserstack.yml file situated in the root location of your project holds all the required settings to run tests on BrowserStack.

Set platforms to test on

Set the browsers and devices you want to test under the platforms object. Our config follows W3C formatted capabilities.

Parallel thread #1

Windows 10

Chrome 120

Parallel thread #2

OS X Monterey

Safari 15.6

Parallel thread #3

iOS 15

iPhone 13

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 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

If your staging environment is behind a proxy or firewall, you need to set additional arguments, such as proxy username, proxy password, etc. Check out Local Binary parameters to learn about additional arguments or Contact Support for assistance.

BrowserStack Reporting (part 1/2)

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

Build Name

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

Project Name

Set a project name for your project.

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 Observability 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 (:), and hyphens (-). Any other character will be replaced with a space.

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:

Visual logs

Enables screenshots for every selenium command ran

True

False

Network logs

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

True

False

Console logs

Set the remote Browser’s console log levels. Currently supported only on Chrome browsers (Desktop and Android)

Info

Disable

Verbose

Info

Warnings

Errors

Update BrowserStack Config file

Copy the given config into your browserstack.yml file.

userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
platforms:
  - os: Windows
    osVersion: 10
    browserName: Chrome
    browserVersion: 120.0
  - os: OS X
    osVersion: Monterey
    browserName: Safari
    browserVersion: 15.6
  - deviceName: iPhone 13
    osVersion: 15
    browserName: Chromium
    deviceOrientation: portrait
browserstackLocal: true
buildName: bstack-demo
projectName: BrowserStack Sample
CUSTOM_TAG_1: "You can set a custom Build Tag here"
# Use CUSTOM_TAG_<N> and set more build tags as you need.
debug: true
networkLogs: true
consoleLogs: info

BrowserStack Reporting (part 2/2)

Test assertions are specific to selected language frameworks. BrowserStack requires explicit instruction to determine whether your tests have passed or failed based on the assertions in your test script.

const executorConfig = {
      "action": "setSessionName",
      "arguments": {
        "name": "<test-name>"
      }
    };
    await driver.executeScript('browserstack_executor: ' + JSON.stringify(executorConfig), []);

const executorConfig = {
      "action": "setSessionStatus",
      "arguments": {
        "status": "<passed/failed>",
        "reason": "<reason>"
      }
    };
    await driver.executeScript('browserstack_executor: ' + JSON.stringify(executorConfig), []);

Run your test suite on BrowserStack

Your test suite is now ready to run on BrowserStack! Run the commands added under the scripts property section in the package.json file. Here is an example command:

npm run [your-test-script-name]-browserstack

If you don’t see any new commands, make sure you ran npx setup correctly or contact support for assistance.