Integrate BrowserStack Automate with Google Cloud Build

A guide to help you integrate Google Cloud Build with the BrowserStack device cloud for running all your tests.

Introduction

Google Cloud Build is a service that executes your builds on the Google Cloud Platform (GCP). Cloud Build can import source code from Google Cloud Storage, Cloud Source Repositories, GitHub, or Bitbucket, to continuously build, test, and deploy projects. It helps catch failures ahead of the production stage and mitigate them as they occur.

In this guide, you’ll learn how to:

Set up a pipeline in Google Cloud Build
Integrate existing test cases
Integrate test cases for privately hosted websites

Prerequisites

Before you can start integration, ensure that the following tasks are complete.

Ensure that you have a valid Google Cloud Build account.
A GitHub repository or any other source code repository is set up for your automation code.
You have access to the BrowserStack account credentials, namely Access Key and Username.
You are the maintainer or owner of the project.

Set up a pipeline in Google Cloud Build

To create a pipeline and perform execution in Google Cloud Build, complete the following steps:

Log in to your Google Cloud Build account.
On the dashboard, click the project drop-down and then click New Project.
In your project, click the navigation menu, and select Cloud Build.
On the Cloud Build dashboard, click the Triggers tab.
Click Connect Repository to link your GitHub repository with build and select the source code repository.
Click Create A Trigger to connect the repository to build and add the trigger name, region, and description.
Under the Event section, select the type of trigger.
Under the Source section, select your repository and branch.
Under the Configuration section, select the relevant configuration method ( .yaml or .json) that you want to use.
The following sample YAML file includes the arguments and environment details required to trigger a test case.

build.yaml
```
steps:
- name: 'bash'
  args: ['ls']
- name: 'maven'
  entrypoint: 'mvn'
  args: ['test', '-P', 'single']
  env:
  - 'BROWSERSTACK_USERNAME=${_BROWSERSTACK_USERNAME}'
  - 'BROWSERSTACK_ACCESS_KEY=${_BROWSERSTACK_ACCESS_KEY}'
```
Under the Advanced Configuration area, add your BrowserStack Username, BROWSERSTACK_USERNAME, and Access key, BROWSERSTACK_ACCESS_KEY, as variables.
On the Cloud Build dashboard page, click Run to run your test for the repository. Based on the selected trigger method, a new build will be triggered when that action occurs.

Integrate existing test cases

With existing test cases, integrating BrowserStack involves editing your test cases to add BrowserStack capabilities, credentials, and, remote URL.

Though your existing test scripts include capabilities, BrowserStack also provides specific capabilities that help determine how tests are run. The following example code snippet sets the build name, declares Access Key and Username as environment variables, and creates a remote driver connection.

Appending the default BUILD_ID environment variable to the BrowserStack build name helps generate a unique build name for every test run. To learn more about this environment variable, check out the Google Cloud Build pipeline labeling guide.

Set capabilities using the following code snippet:

Copy snippet

      Java
    

      Node.js
    

      C#
    

      PHP
    

      Python
    

      Ruby
    

      Perl
    
String username = System.getenv("BROWSERSTACK_USERNAME");
String accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");
String BUILD_ID = System.getenv("BUILD_ID");
String buildName="googlecloudbuild-"+BUILD_ID

MutableCapabilities capabilities = new MutableCapabilities();
HashMap<String, Object> browserstackOptions = new HashMap<String, Object>();
browserstackOptions.put("buildName", "BStack Build Number: " + buildName);
browserstackOptions.put("sessionName", "BStack-[Java] Sample Test");
browserstackOptions.put("seleniumVersion", "4.0.0");

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
buildID = "googlecloudbuild--" + process.env['BUILD_ID']
buildName="googlecloudbuild--" +buildID

var capabilities = {
  'bstack:options' : {
    "userName" : username,
    "accessKey" : accessKey,
    "buildName" : "BStack Build Number: " + buildName,
    "sessionName" : "BStack-[Nodejs] Sample Test",
    "seleniumVersion" : "4.0.0",
  },
}

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

ChromeOptions capabilities = new ChromeOptions();
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("buildName", "googlecloudbuild--" + BUILD_ID);
browserstackOptions.Add("sessionName", "BStack-[C_sharp] Sample Test");
browserstackOptions.Add("userName", username);
browserstackOptions.Add("accessKey", accessKey);
browserstackOptions.Add("seleniumVersion", "4.0.0");

capabilities.AddAdditionalOption("bstack:options", browserstackOptions);
driver = new RemoteWebDriver(new Uri("https://hub.browserstack.com/wd/hub/"), capabilities);
$username = getenv('BROWSERSTACK_USERNAME');
$accessKey = getenv('BROWSERSTACK_ACCESS_KEY');
$BUILDID = getenv('BUILD_ID');

$buildName = "googlecloudbuild--" + $BUILDID;

$caps = array(
	'bstack:options' => array(
		"buildName" => "BStack Build Number:".$buildName,
		"sessionName" => "BStack-[PHP] Sample Test",
		"seleniumVersion" => "4.0.0",
	),
);

$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')
BUILDID = os.environ.get('BUILD_ID')

buildName = 'googlecloudbuild--' + BUILDID

bstack_options = {
    "buildName" : "BStack Build Number: " + buildName,
    "sessionName" : "BStack-[Python] Sample Test",
    "seleniumVersion" : "4.0.0",
    "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']
BUILDID = ENV['BUILD_ID']
buildName = "googlecloudbuild--"+ BUILDID

# to run on Chrome
options = Selenium::WebDriver::Options.chrome
capabilities = {
  'bstack:options' => {
    "buildName" => 'BStack Build Number: ' + buildName,
    "sessionName" => "BStack-[Ruby] Sample Test",
    "seleniumVersion" => "4.0.0",
  },
}

options.add_option('bstack:options', bstack_options)
driver = Selenium::WebDriver.for(:remote,
  :url => "https://"+username+":"+accessKey+"@hub.browserstack.com/wd/hub",
  :capabilities => options)
my $username = $ENV{"BROWSERSTACK_USERNAME"};
my $accessKey = $ENV{"BROWSERSTACK_ACCESS_KEY"};
my $BUILDID= $ENV{"BUILD_ID"};

my $buildName =  "googlecloudbuild--" + $BUILDID;

my $caps = {
  'bstack:options' => {
    "buildName" => "BStack Build Number:".$buildName,
    "sessionName" => "BStack-[Perl] Sample Test",
    "seleniumVersion" => "4.0.0",
    },
  }

my $host = "$username:$accessKey\@hub.browserstack.com";

my $driver = new Selenium::Remote::Driver('remote_server_addr' => $host,
  'port' => '80', 'extra_capabilities' => $caps);

      Java
    

      Node.js
    

      C#
    

      PHP
    

      Python
    

      Ruby
    

      Perl
    
String username = System.getenv("BROWSERSTACK_USERNAME");
String accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");
String BUILD_ID = System.getenv("BUILD_ID");
String buildName="googlecloudbuild-"+BUILD_ID

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setCapability("build", "BStack Build Number: " + buildName);
capabilities.setCapability("name", "BStack-[Java] Sample Test");
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
buildId = process.env.BUILD_ID
buildName="googlecloudbuild-" +buildId

var capabilities = {
 "browserstack.user" : username,
 "browserstack.key" : accessKey,
 "build" : "BStack Build Number: " + buildName,
 "name" : "BStack-[Nodejs] Sample Test",

}

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 BUILD_ID= Environment.GetEnvironmentVariable("BUILD_ID")
String buildName = "googlecloudbuild-"+BUILD_ID;

OpenQA.Selenium.Chrome.ChromeOptions capability = new OpenQA.Selenium.Chrome.ChromeOptions();
capability.AddAdditionalCapability("build", "BStack Build Number: " + buildName, true); // CI/CD job or build name
capability.AddAdditionalCapability("name", "BStack-[C_sharp] Sample Test", true); // test name
capability.AddAdditionalCapability("browserstack.user", username, true);
capability.AddAdditionalCapability("browserstack.key", accessKey, true);

driver = new RemoteWebDriver(
  new Uri("https://hub-cloud.browserstack.com/wd/hub/"), capability
);
$username = getenv('BROWSERSTACK_USERNAME');
$accessKey = getenv('BROWSERSTACK_ACCESS_KEY');
$buildId = getenv('BUILD_ID');
$buildName = "googlecloudbuild-"+$buildId;

$caps = array(
  "build" => "BStack Build Number: ".$buildName, // CI/CD job or build name
  "name" => "BStack-[PHP] Sample Test",

);
$web_driver = RemoteWebDriver::create(
  "https://".$username.":".$accessKey."@hub-cloud.browserstack.com/wd/hub",
  $caps
);
username = os.environ.get('BROWSERSTACK_USERNAME')
accessKey = os.environ.get('BROWSERSTACK_ACCESS_KEY')
buildId = os.environ.get('BUILD_ID')
buildName="googlecloudbuild-"+buildId

desired_cap = {
 'build': "BStack Build Number: " + buildName, # CI/CD job or build name
 'name' : 'BStack-[Python] Sample Test',
 'browserstack.user': username,
 'browserstack.key': accessKey,
}
driver = webdriver.Remote(
    command_executor='https://hub-cloud.browserstack.com/wd/hub',
    desired_capabilities=desired_cap)
username = ENV['BROWSERSTACK_USERNAME']
accessKey = ENV['BROWSERSTACK_ACCESS_KEY']
buildId = ENV['BUILD_ID']
buildName="googlecloudbuild-"+buildId

caps = Selenium::WebDriver::Remote::Capabilities.new
caps['build'] = 'BStack Build Number: ' + buildName # CI/CD job or build name
caps["name"] = "BStack-[Ruby] Sample Test"


driver = Selenium::WebDriver.for(:remote,
  :url => "https://"+username+":"+accessKey+"@hub-cloud.browserstack.com/wd/hub",
  :desired_capabilities => caps)
my $username = $ENV{"BROWSERSTACK_USERNAME"};
my $accessKey = $ENV{"BROWSERSTACK_ACCESS_KEY"};
my $buildId = $ENV{"BUILD_ID"};
my $builName = "googlecloudbuild-"+$buildId ;

my $caps = {
  "build" => "BStack Build Number:".$buildName,
  "name" => "BStack-[Perl] Sample Test",

};

my $host = "$username:$accessKey\@hub-cloud.browserstack.com";

my $driver = new Selenium::Remote::Driver('remote_server_addr' => $host,
  'port' => '80', 'extra_capabilities' => $caps);

Integrate test cases for privately hosted websites

If you are testing websites hosted locally as part of your testing or development environment, you need to configure your Google Cloud Build pipeline to use the Local testing.

Using the Local testing feature of BrowserStack, remote browsers at the BrowserStack cloud can access websites hosted on your private or internal networks. To learn more about how Local testing works, check out the Local testing guide.

Apart from setting up a Local connection, you must also add the local or browserstack.local capability in your test scripts.

This section guides how to:

Enable Local testing
Add the local or browserstack.local capability to test scripts

Enable Local Testing

You can enable Local testing using the ways, as shown in the following tab:

BrowserStack Local binary
Language bindings

Edit your .yaml file to use the BrowserStack Local docker image and run your local tests on BrowserStack.

build.yaml

    steps:
    - name: gcr.io/cloud-builders/docker
      args: ['run' , '-d', '--name=bs', '--network=cloudbuild', 'browserstack/local', '--user', '${_BROWSERSTACK_USERNAME}', '--key', '${_BROWSERSTACK_ACCESS_KEY}', '--tunnelName', 'GCloud', '--infoAPIPort', '15000','--load-balanced']
    - name: 'ubuntu'
     args: ['sleep', '20']
    - name: 'bash'
      args: ['ls']
    - name: 'maven'
      entrypoint: 'mvn'
      args: ['test', '-P', 'local']
      env:
        - 'BROWSERSTACK_USERNAME=${_BROWSERSTACK_USERNAME}'
        - 'BROWSERSTACK_ACCESS_KEY=${_BROWSERSTACK_ACCESS_KEY}'

If you prefer to manage the Local connection through your test scripts, you can use the language bindings.

Check out the enabling Local testing using language bindings guide to edit your test scripts.

Note: Ensure to complete the steps mentioned in the set up Google Cloud Build pipeline section to create your pipeline.

Apart from these configurations, you can set other Local options, such as, testing behind a proxy, folder testing, or using multiple local instances. Check out Introduction to Local Testing for more information.

Add local capability to test scripts

Add the local (W3C protocol) or browserstack.local (JSON Wire protocol) capability to test scripts using the following code snippets. When you set this capability to true, BrowserStack resolves the request via the Local agent running in your network.

Copy snippet

      Java
    

      Node.js
    

      C#
    

      PHP
    

      Python
    

      Ruby
    

      Perl
    
browserstackOptions.put("local", "true");
'bstack:options' : {
	"local" : "true",
},
browserstackOptions.Add("local", "true");
'bstack:options' => array(
	"local" => "true",
),
'bstack:options' : {
	"local" : "true",
},
'bstack:options' => {
	"local" => "true",
},
'bstack:options' : {
	"local" : "true",
},

      Java
    
      Node.js
    
      C#
    
      PHP
    
      Python
    
      Ruby
    
      Perl
    
capabilities.setCapability("browserstack.local", "true");
"browserstack.local" : "true",
capability.AddAdditionalCapability("browserstack.local", "true", true);
"browserstack.local" => "true",
"browserstack.local" : "true",
caps["browserstack.local"] = "true",
"browserstack.local" => "true",

After configuring Local, run your test cases from the Google Cloud Build console by following the steps mentioned in the Set up a Google Cloud pipeline section.

Go to your Automate dashboard to view the test results.

You can also view test results in the Google Cloud Console. configuring steps in Google Cloud