Integrate BrowserStack Automate with Travis CI

A guide to help you integrate Travis CI with the BrowserStack device cloud for running all your tests.

Introduction

Travis CI is a hosted, distributed continuous integration service used to build and test software projects. Use our Travis CI add-on to integrate BrowserStack with ease.

Features

This add-on automatically sets up BrowserStack Local Testing which allows you to test your private servers, alongside public URLs, using the BrowserStack cloud. To do this it uses the BrowserStackLocal binary for your build platform.

BrowserStack Local Testing establishes a secure connection between your Travis build container / VM and BrowserStack servers. Local Testing also has support for firewalls, proxies and Active Directory. Once the secure connection is setup, all URLs work out of the box, including your webserver, local folders, as well as URLs with HTTPS.

Setting up BrowserStack

Please sign up for a BrowserStack account if you haven’t already; it’s free for open source projects. Once you have signed up get your Username and Access Key from the account settings page. Your Username and Access Key are required to configure the .travis.yml file of your project.

Choose whether you want to store your Access Key as plain text or in a secure/encrypted form. For open source projects we recommend storing the Access Key in a secure form so that pull requests cannot use the keys stored in your .travis.yml. For more information see the pull requests page on Travis CI.

travis encrypt <your_browserstack_access_key>

addons:
  browserstack:
    username: "Your BrowserStack Username"
    access_key:
      secure: "The secure string output of travis encrypt"

addons:
  browserstack:
    username: "Your BrowserStack Username"
    access_key: "Your BrowserStack Access Key"

Local identifier

A Local Identifier is a unique identifier for each Local connection when multiple Local connections are connected. The add-on will always create a Local Identifier for each local connection that is created. If you are using the Selenium testing framework, the Local Identifier must be added to the Selenium capabilities.

The Local Identifier is exposed as an environment variable BROWSERSTACK_LOCAL_IDENTIFIER. You can use it to set the Selenium capability. See the following example:

String URL = "https://" + "YOUR_USERNAME" + ":" + "YOUR_ACCESS_KEY" + "@hub-cloud.browserstack.com/wd/hub";

// Input capabilities
MutableCapabilities capabilities = new MutableCapabilities();
HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
browserstackOptions.put("local", "true");
browserstackOptions.put("localIdentifier", localIdentifier)
// Add other capabilities like browser name, version and os name, version
...

WebDriver driver = new RemoteWebDriver(new URL(URL), caps);

local = process.env.BROWSERSTACK_LOCAL
localIdentifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER

// Input capabilities
var capabilities = {
  'bstack:options' : {
    "local" : local,
    "localIdentifier" : localIdentifier,
  },
}

// Add other capabilities like browser name, version and os name, version

var driver = new webdriver.Builder().
  usingServer("https://hub-cloud.browserstack.com/wd/hub").
  withCapabilities(capabilities).
  build();

String localIdentifier = Environment.GetEnvironmentVariable("BROWSERSTACK_LOCAL_IDENTIFIER");

// Input capabilities
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("local", "true");
browserstackOptions.Add("localIdentifier", localIdentifier);
capabilities.AddAdditionalOption("bstack:options", browserstackOptions);
// Add other capabilities like browser name, version and os name, version
 ...

driver = new RemoteWebDriver(new URL("https://" + "YOUR_USERNAME" + ":" + "YOUR_ACCESS_KEY" + "@hub.browserstack.com/wd/hub"), caps);

$localIdentifier = getenv('BROWSERSTACK_LOCAL_IDENTIFIER');

# Input capabilities
$caps = array(
'bstack:options' => array(
    "local" => "true",
    "browserstack.localIdentifier" => "".$localIdentifier,
),
);
$web_driver = RemoteWebDriver::create(
  "https://".$username.":".$accessKey."@hub.browserstack.com/wd/hub",
  $caps
);

localIdentifier = os.environ.get('BROWSERSTACK_LOCAL_IDENTIFIER')

# Input capabilities
desired_cap = {
    'bstack:options' : {
        "local" : "true",
        "localIdentifier": localIdentifier,
        },
    }
 # Add other capabilities like browser name, version and os name, version

options.set_capability('bstack:options', bstack_options)
driver = webdriver.Remote(
    command_executor="https://hub.browserstack.com/wd/hub",
    options=options)

require 'rubygems'
require 'selenium-webdriver'

# Input capabilities
capabilities = {
  'bstack:options' => {
    "local" => "true",
    "localIdentifier" = localIdentifier,
  },
}
# Add other capabilities like browser name, version and os name, version

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

String URL = "https://" + "YOUR_USERNAME" + ":" + "YOUR_ACCESS_KEY" + "@hub-cloud.browserstack.com/wd/hub";

// Input capabilities
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browserstack.local", "true");
caps.setCapability("browserstack.localIdentifier", System.getenv("BROWSERSTACK_LOCAL_IDENTIFIER"));
// Add other capabilities like browser name, version and os name, version
...

WebDriver driver = new RemoteWebDriver(new URL(URL), caps);

var browserstackLocal = process.env.BROWSERSTACK_LOCAL;
var browserstackLocalIdentifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER;

// Input capabilities
var capabilities = {
 "browserstack.local" : "true",
 "browserstack.localIdentifier" : browserstackLocalIdentifier

 // Add other capabilities like browser name, version and os name, version
 ...
};

var driver = new webdriver.Builder().
  usingServer("https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub").
  withCapabilities(capabilities).
  build();

browserstackLocalIdentifier = Environment.GetEnvironmentVariable("BROWSERSTACK_LOCAL_IDENTIFIER");

// Input capabilities
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browserstack.local", "true");
caps.setCapability("browserstack.localIdentifier", browserstackLocalIdentifier);
// Add other capabilities like browser name, version and os name, version
 ...

driver = new RemoteWebDriver(new URL("https://" + "YOUR_USERNAME" + ":" + "YOUR_ACCESS_KEY" + "@hub.browserstack.com/wd/hub"), caps);

$browserstackLocalIdentifier = getenv("BROWSERSTACK_LOCAL_IDENTIFIER");

# Input capabilities
$caps = array(
  "browserstack.local" => "true",
  "browserstack.localIdentifier" => $browserstackLocalIdentifier
  # Add other capabilities like browser name, version and os name, version
  ...
);

$web_driver = RemoteWebDriver::create(
  "https://" . $username . ":" . $accessKey . "@hub-cloud.browserstack.com/wd/hub",
  $caps
);

browserstack_local_identifier = os.getenv("BROWSERSTACK_LOCAL_IDENTIFIER")

# Input capabilities
caps = {
 'browserstack.local': 'true',
 'browserstack.localIdentifier': browserstack_local_identifier
 # Add other capabilities like browser name, version and os name, version
  ...
}

driver = webdriver.Remote(
    command_executor='https://' + 'YOUR_USERNAME' + ":" + 'YOUR_ACCESS_KEY' + '@hub-cloud.browserstack.com/wd/hub',
    desired_capabilities=caps)

require 'rubygems'
require 'selenium-webdriver'

# Input capabilities
caps = Selenium::WebDriver::Remote::Capabilities.new
caps['browserstack.local'] = true
caps['browserstack.localIdentifier'] = ENV['BROWSERSTACK_LOCAL_IDENTIFIER']
# Add other capabilities like browser name, version and os name, version
...

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

Local identifiers are essential for matrix builds. Since matrix builds in Travis can be run on the same VM, we need to add the Local Identifier when starting the connection to ensure that the correct local tunnel gets the right requests.

Additional options

Proxy

Local Testing also allows you to set the proxy host, port, username and password through which all URLs will be resolved:

addons:
  browserstack:
    username: "Your BrowserStack Username"
    access_key:
      secure: "The secure string output of `travis encrypt`"
    proxyHost: "Proxy server host"
    proxyPort: "Proxy server port"
    proxyUser: "User to use when accessing proxy server"
    proxyPass: "Password to use when accessing proxy server"

More options

Some other options that are supported by the add on -

• forcelocal: If this is set to true then all URLs will be resolved via the Travis container that your build is running in.
• only: Restricts Local Testing access to the specified local servers and/or folders.

Sample usage:

addons:
  browserstack:
    username: "Your BrowserStack Username"
    access_key:
      secure: "The secure string output of `travis encrypt`"
    forcelocal: true
    only: dev.example.com,80,0,*.example.org,80,0

The format for the only flag is, “Host pattern”, “Host Port”, “Flag for SSL True(1)/False(0)” and repeat.

Additional Resources

BrowserStack Documentation on Travis Docs