Get your setup working faster. Join our Discord for optimisation tips from elite testers.

Integrate BrowserStack Automate with CircleCI

A step-by-step guide to help you integrate CircleCI with the BrowserStack device cloud for running all your Selenium tests on BrowserStack Automate.

CircleCI uses .circleci/config.yml for configuration (read more about CircleCI), and it can be used to integrate your tests with BrowserStack. There are some variables you need to set: grid config, username, access key etc. For more detailed information on setting environment variables in CircleCI, please refer to their documentation.

Setting the variables

BrowserStack recommends you encrypt variables like username and access key. CircleCI enables the user to secure environment variables via their web interface. This functionality allows you to keep the contents of the secure variable private.

The key-value pairs are set in the project settings, which can be found under Tweaks, in the Environment variables section. Public environment variables can be set directly via circle.yml in machine section, under environment.

Shown below is a sample configuration for the circle.yml file:

machine:
  environment:
    BROWSERSTACK_USERNAME: "YOUR_USERNAME"
    BROWSERSTACK_ACCESS_KEY: "YOUR_ACCESS_KEY"
    BROWSERSTACK_LOCAL: false
    BROWSERSTACK_LOCAL_IDENTIFIER: "identifier"

The example demonstrates how to read CircleCI environment variables in your code. For example:

Copy

```js
// wdio.conf.js
export const config = {
  user: "YOUR_USERNAME",
  key: "YOUR_ACCESS_KEY",

  services: [
    [
      'browserstack',
      {
        browserstackLocal: true,
        browserstackLocalOptions: {
          // Uniquely identifies this tunnel instance
          localIdentifier: "browserstack_local_identifier",
          forcelocal: true
        },
        testObservability: true,
      },
    ],
  ],

  commonCapabilities: {
    "bstack:options": {
      // Metadata for the Automate Dashboard
      buildName: "BStack Build Name",
      projectName: "BrowserStack Sample",
      seleniumVersion: "4.0.0",
      // Local Tunnel settings
      local: true,
      localIdentifier: "browserstack_local_identifier",
      debug: true,
      networkLogs: true,
      video: true
    }
  },

  capabilities: [
    {
      browserName: 'Chrome',
      browserVersion: '100.0',
      'bstack:options': {
        os: 'Windows',
        osVersion: '10',
        sessionName: "BStack Session Name"
      }
    }
  ]
};

exports.config.capabilities.forEach(function (caps) {
  for (let i in exports.config.commonCapabilities)
    caps[i] = { ...caps[i], ...exports.config.commonCapabilities[i]};
});


// nightwatch.conf.js
module.exports = {
  // ... (plugins)

  '@nightwatch/browserstack': {
    browserstackLocal: true,
    browserstackLocalOptions: {
      localIdentifier: 'browserstack_local_identifier',
      forcelocal: 'true'
    }
  },

  test_settings: {
    'browserstack.windows10_chrome100': {
      webdriver: { start_process: false, keep_alive: true },
      selenium: { host: 'hub.browserstack.com', port: 443 },
      desiredCapabilities: {
        browserName: 'Chrome',
        browserVersion: '100.0',
        'bstack:options': {
          userName: 'YOUR_USERNAME',
          accessKey: 'YOUR_ACCESS_KEY',
          os: 'Windows',
          osVersion: '10',
          buildName: 'BStack Build Name',
          sessionName: 'BStack Session Name',
          seleniumVersion: '4.0.0',
          local: true,
          localIdentifier: 'browserstack_local_identifier'
        }
      }
    }
  }
};
```

Copy

      Java
    

      Node.js
    

      C#
    

      PHP
    

      Python
    

      Ruby
    
String username = System.getenv("BROWSERSTACK_USERNAME");
String accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");
String local = System.getenv("BROWSERSTACK_LOCAL");
String Localidentifier = System.getenv("BROWSERSTACK_LOCAL_IDENTIFIER");

MutableCapabilities capabilities = new MutableCapabilities();
capabilities.setCapability("browserName", "Chrome");
HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
browserstackOptions.put("os", "Windows");
browserstackOptions.put("local", local);
browserstackOptions.put("localIdentifier", localIdentifier);
capabilities.setCapability("bstack:options", browserstackOptions);

WebDriver driver = new RemoteWebDriver(new URL("https://" + username + ":" + accessKey + "@hub.browserstack.com/wd/hub"), capabilities);
username = process.env.BROWSERSTACK_USERNAME
accessKey = process.env.BROWSERSTACK_ACCESS_KEY
local = process.env.BROWSERSTACK_LOCAL
localIdentifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER

var capabilities = {
  'bstack:options' : {
    "os" : "Windows",
    "local" : local,
    "localIdentifier" : localIdentifier,
    "userName" : username,
    "accessKey" : accessKey,
  },
    "browserName" : "Chrome",
}

var driver = new webdriver.Builder().
  usingServer("https://hub-cloud.browserstack.com/wd/hub").
  withCapabilities(capabilities).
  build();
String username = Environment.GetEnvironmentVariable("BROWSERSTACK_USERNAME");
String accessKey = Environment.GetEnvironmentVariable("BROWSERSTACK_ACCESS_KEY");
String local = Environment.GetEnvironmentVariable("BROWSERSTACK_LOCAL");
String localIdentifier = Environment.GetEnvironmentVariable("BROWSERSTACK_LOCAL_IDENTIFIER");

ChromeOptions capabilities = new ChromeOptions();
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("os", "Windows");
browserstackOptions.Add("local", local);
browserstackOptions.Add("localIdentifier", localIdentifier);
capabilities.AddAdditionalOption("bstack:options", browserstackOptions);

driver = new RemoteWebDriver(new URL("https://" + username + ":" + accessKey + "@hub.browserstack.com/wd/hub"), capabilities);
$username = getenv('BROWSERSTACK_USERNAME');
$accessKey = getenv('BROWSERSTACK_ACCESS_KEY');
$local = getenv('BROWSERSTACK_LOCAL');
$localIdentifier = getenv('BROWSERSTACK_LOCAL_IDENTIFIER');

$caps = array(
'bstack:options' => array(
    "os" => "Windows",
    "browserstack.local" => "".$local,
    "browserstack.localIdentifier" => "".$localIdentifier,
),
  "browserName" => "Chrome",
);
$web_driver = RemoteWebDriver::create(
  "https://".$username.":".$accessKey."@hub.browserstack.com/wd/hub",
  $caps
);
username = os.environ.get('BROWSERSTACK_USERNAME')
accessKey = os.environ.get('BROWSERSTACK_ACCESS_KEY')
local = os.environ.get('BROWSERSTACK_LOCAL')
localIdentifier = os.environ.get('BROWSERSTACK_LOCAL_IDENTIFIER')

bstack_options = {
    "os" : "Windows",
    "local": local,
    "localIdentifier": localIdentifier,
    "userName": username,
    "accessKey": accessKey,
}
options = ChromeOptions()
options.set_capability('bstack:options', bstack_options)
driver = webdriver.Remote(
    command_executor="https://hub.browserstack.com/wd/hub",
    options=options)
username = ENV['BROWSERSTACK_USERNAME']
accessKey = ENV['BROWSERSTACK_ACCESS_KEY']
local = ENV['BROWSERSTACK_LOCAL']
localIdentifier = ENV['BROWSERSTACK_LOCAL_IDENTIFIER']

# to run on Chrome
options = Selenium::WebDriver::Options.chrome
capabilities = {
  'bstack:options' => {
    "os" => "Windows",
    "local" = local,
    "localIdentifier" = localIdentifier,
  },
  "browserName" => "Chrome",
}

options.add_option('bstack:options', bstack_options)
driver = Selenium::WebDriver.for(:remote,
  :url => "https://"+username+":"+accessKey+"@hub.browserstack.com/wd/hub",
  :capabilities => options)

      Java
    

      Node.js
    

      C#
    

      PHP
    

      Python
    

      Ruby
    
String username = System.getenv("BROWSERSTACK_USERNAME");
String accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");
String browserstackLocal = System.getenv("BROWSERSTACK_LOCAL");
String browserstackLocalIdentifier = System.getenv("BROWSERSTACK_LOCAL_IDENTIFIER");

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("os", "Windows");
capabilities.setCapability("browser", "chrome");
capabilities.setCapability("browserstack.local", browserstackLocal);
capabilities.setCapability("browserstack.localIdentifier", browserstackLocalIdentifier);
driver = new RemoteWebDriver(new URL("https://" + username + ":" + accessKey + "@hub.browserstack.com/wd/hub"), capabilities);
username = process.env.BROWSERSTACK_USERNAME
accessKey = process.env.BROWSERSTACK_ACCESS_KEY
browserstackLocal = process.env.BROWSERSTACK_LOCAL
browserstackLocalIdentifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER

var capabilities = {
 "os" : "Windows",
 "browser" : "chrome",
 "browserstack.local" : browserstackLocal,
 "browserstack.localIdentifier" : browserstackLocalIdentifier,
 "browserstack.user" : username,
 "browserstack.key" : accessKey
}

var driver = new webdriver.Builder().
  usingServer("https://hub-cloud.browserstack.com/wd/hub").
  withCapabilities(capabilities).
  build();
String username = System.getenv("BROWSERSTACK_USERNAME");
String accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");
String browserstackLocal = System.getenv("BROWSERSTACK_LOCAL");
String browserstackLocalIdentifier = System.getenv("BROWSERSTACK_LOCAL_IDENTIFIER");

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("os", "Windows");
capabilities.setCapability("browser", "chrome");
capabilities.setCapability("browserstack.local", browserstackLocal);
capabilities.setCapability("browserstack.localIdentifier", browserstackLocalIdentifier);
driver = new RemoteWebDriver(new URL("https://" + username + ":" + accessKey + "@hub.browserstack.com/wd/hub"), capabilities);
$username = getenv("BROWSERSTACK_USERNAME");
$accessKey = getenv("BROWSERSTACK_ACCESS_KEY");
$browserstackLocal = getenv("BROWSERSTACK_LOCAL");
$browserstackLocalIdentifier = getenv("BROWSERSTACK_LOCAL_IDENTIFIER");

$caps = array(
  "os" => "Windows",
  "browser" => "chrome",
  "browserstack.local" => $browserstackLocal,
  "browserstack.localIdentifier" => $browserstackLocalIdentifier
);

$web_driver = RemoteWebDriver::create(
  "https://" . $username . ":" . $accessKey . "@hub-cloud.browserstack.com/wd/hub",
  $caps
);
username = os.getenv("BROWSERSTACK_USERNAME")
access_key = os.getenv("BROWSERSTACK_ACCESS_KEY")
browserstack_local = os.getenv("BROWSERSTACK_LOCAL")
browserstack_local_identifier = os.getenv("BROWSERSTACK_LOCAL_IDENTIFIER")

caps = {
 'os': 'Windows',
 'browser': 'chrome',
 'browserstack.local': browserstack_local,
 'browserstack.localIdentifier': browserstack_local_identifier,
 'browserstack.user': username,
 'browserstack.key': access_key
}

driver = webdriver.Remote(
    command_executor='https://hub-cloud.browserstack.com/wd/hub',
    desired_capabilities=caps)
username = ENV["BROWSERSTACK_USERNAME"]
access_key = ENV["BROWSERSTACK_ACCESS_KEY"]
browserstack_local = ENV["BROWSERSTACK_LOCAL"]
browserstack_local_identifier = ENV["BROWSERSTACK_LOCAL_IDENTIFIER"]
caps = Selenium::WebDriver::Remote::Capabilities.new
caps["os"] = "Windows"
caps["browser"] = "chrome"
caps["browserstack.local"] = browserstack_local
caps["browserstack.localIdentifier"] = browserstack_local_identifier
caps["browserstack.user"] = username
caps["browserstack.key"] = YOUR_ACCESS_KEY

driver = Selenium::WebDriver.for(:remote,
  :url => "https://hub-cloud.browserstack.com/wd/hub",
  :desired_capabilities => caps)

Running local tests

While testing on development or staging environments, you can do the following:

Configure CircleCI to automatically download the latest version of the BrowserStack Local binary.
Instantiate the binary before your test starts.
Enable Local Testing by setting the local capability to true in your test script.

Refer to the sample code below:

machine:
  environment:
    BROWSERSTACK_USERNAME: "YOUR_USERNAME"
    BROWSERSTACK_ACCESS_KEY: "YOUR_ACCESS_KEY"
    BROWSERSTACK_LOCAL: true

test:
    pre:
    # Download the browserstack binary file
    - wget "https://local-downloads.browserstack.com/BrowserStackLocal-linux-x64.zip"
    # Unzip the BrowserStack Local binary file
    - unzip BrowserStackLocal-linux-x64.zip
    # Run the file with your access key
    - ./BrowserStackLocal $BROWSERSTACK_ACCESS_KEY:
        background: true

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!