Skip to main content
Transform your testing process with: Real Device Features, Company-wide Licences, & App Percy

Integrate BrowserStack App Automate with GitLab CI/CD

GitLab CI/CD is a continuous integration tool used to integrate your test suites such that it enables continuous testing, build, and deploy of iterative code changes. Use of CI/CD tools helps catch failures ahead of the production stage and mitigate them as they occur.

Note: The information in this section applies to GitLab CI/CD implemented as part of GitLab SaaS offering.

The .gitlab-ci.yml includes configurations that BrowserStack uses to authenticate and run the test cases. You can use the information in this section to edit the .yml file and add configurations of BrowserStack credentials, app_id of the app to test, and Local settings.

Important:
  • This guide requires some knowledge of GitLab. Check out GitLab documentation before configuring BrowserStack.
  • If you are new to BrowserStack, take some time to check out the getting started guides to learn about integrating BrowserStack with your existing test scripts.

Prerequisites

  • GitLab account and the relevant project is accessible.
  • .gitlab-ci.yml file exists for your project.
  • You are a maintainer or owner of the project.
  • Access to the BrowserStack account credentials (Browserstack Username and AccessKey).
  • app_id of the uploaded application to BrowserStack App Automate.

Retrieve app_id of the application uploaded to BrowserStack

You can retrieve the app_id of the application from the list of recently uploaded apps using BrowserStack REST API requests.

Use the following command to request the list of recently uploaded apps.

curl -u "YOUR_USERNAME:YOUR_ACCESS_KEY" -X GET "https://api-cloud.browserstack.com/app-automate/recent_apps"

The list of recently uploaded apps with the respective app_id are displayed. By default, you can retrieve the list of the last 10 apps uploaded to the BrowserStack App Automate server.

[
    {
        "app_name": "app-debug.apk",
        "app_version": "1.2.0",
        "app_url": "bs://c8ddcb5649a8280ca800075bfd8f151115bba6b3",
        "app_id": "c8ddcb5649a8280ca800075bfd8f151115bba6b3",
        "uploaded_at": "2020-05-05 14:52:54 UTC",
        "custom_id": "SampleApp",
        "shareable_id": "steve/SampleApp"
    },
    {...}
]

Set up Gitlab with BrowserStack

There are two ways to integrate GitLab with BrowserStack.

Set up your BrowserStack Access key, Username, and the app_id of your application as variables in the GitLab CI/CD settings, using the following steps:

  1. Log in to GitLab CI.
  2. Click Settings > CI/CD.
  3. In the Variables row, click Expand to add variables.
  4. Add BrowserStack Access Key as a variable.
    a. Click Add Variable.
    b. Set the variable name as BROWSERSTACK_ACCESS_KEY.
    c. Enter your Browserstack Access Key value.
  5. Add BrowserStack Username as a variable.
    a. Click Add Variable.
    b. Set the variable name as BROWSERSTACK_USERNAME.
    c. Enter your Browserstack Username.
  6. Add app_id of the application to test as a variable.
    a. Click Add Variable.
    b. Set the variable name as BROWSERSTACK_APP_ID.
    c. Enter the app_id value of you application.
Note:
  • The variables name here are used in the test scripts to integrate with BrowserStack.
  • You can find your BrowserStack Access Key and Username in the BrowserStack App Automate dashboard.

Set variables in GitLab CI/CD settings

You can pass the app_id of the app, BrowserStack Access key, and Browserstack Username as variables in the .gitlab-ci.yml file of each project or repository that you want to test.

variables:
  BROWSERSTACK_USERNAME: "YOUR_USERNAME"
  BROWSERSTACK_ACCESS_KEY: "YOUR_ACCESS_KEY"
  # Add the app_id of your application to test
  BROWSERSTACK_APP_ID: "<hash_id_of_application>"
  # Set to true when using Local.
  BROWSERSTACK_LOCAL: "false"
  # Set when using multiple Local instances.
  BROWSERSTACK_LOCAL_IDENTIFIER: "IDENTIFIER_NAME"
  # Set an appropriate build name as a best practice. This helps group tests under the same name for better visibility in the Automate dashboard.
  BROWSERSTACK_BUILD_NAME: "BUILD_NAME"

Edit your Test Scripts

Add environment variables to your existing test scripts with the required capabilities.

String userName = System.getenv("BROWSERSTACK_USERNAME");
String accessKey = System.getenv("BROWSERSTACK_ACCESS_KEY");
String browserstackLocal = System.getenv("BROWSERSTACK_LOCAL");
String buildName = System.getenv("BROWSERSTACK_BUILD_NAME");
String browserstackLocalIdentifier = System.getenv("BROWSERSTACK_LOCAL_IDENTIFIER");
String app = System.getenv("BROWSERSTACK_APP_ID");

public static void main(String args[]) throws MalformedURLException, InterruptedException {
    DesiredCapabilities caps = new DesiredCapabilities();
    caps.setCapability("app", app);
    caps.setCapability("device", "Samsung Galaxy S8");
    caps.setCapability("build", buildName);
    caps.setCapability("browserstack.local", browserstackLocal);
    caps.setCapability("browserstack.localIdentifier", browserstackLocalIdentifier);
}

driver = new AndroidDriver(new URL("https://"+userName+":"+accessKey+"@hub-cloud.browserstack.com/wd/hub", caps);`
userName = process.env.BROWSERSTACK_USERNAME
accessKey = process.env.BROWSERSTACK_ACCESS_KEY
browserstackLocal = process.env.BROWSERSTACK_LOCAL
buildName = process.env.BROWSERSTACK_BUILD_NAME;
browserstackLocalIdentifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER
app = process.env.BROWSERSTACK_APP_ID

var capabilities = {
    "browserstack.user" : userName,
    "browserstack.key" : accessKey,
    "app" : app,
    "build" : buildName,
    "device" : "Samsung Galaxy S8",
    "browserstack.local" : browserstackLocal,
    "browserstack.localIdentifier" : browserstackLocalIdentifier
}

driver = wd.promiseRemote("https://hub-cloud.browserstack.com/wd/hub");

driver
  .init(capabilities)
  //Write your code here
  .fin(function() { return driver.quit(); })
  .done();
userName = Environment.GetEnvironmentVariable("BROWSERSTACK_USERNAME");
accessKey = Environment.GetEnvironmentVariable("BROWSERSTACK_ACCESS_KEY");
buildName = Environment.GetEnvironmentVariable("BROWSERSTACK_BUILD_NAME");
browserstackLocal = Environment.GetEnvironmentVariable("BROWSERSTACK_LOCAL");
browserstackLocalIdentifier = Environment.GetEnvironmentVariable("BROWSERSTACK_LOCAL_IDENTIFIER");
app = Environment.GetEnvironmentVariable("BROWSERSTACK_APP_ID");

DesiredCapabilities caps = new DesiredCapabilities();
caps.SetCapability("browserstack.user", userName);
caps.SetCapability("browserstack.key", accessKey);
caps.SetCapability("app", app);
caps.SetCapability("device", "Samsung Galaxy S8");
caps.SetCapability("build", buildName);
caps.SetCapability("browserstack.local", browserstackLocal);
caps.SetCapability("browserstack.localIdentifier", browserstackLocalIdentifier);

AndroidDriver driver = new AndroidDriver(new Uri("https://hub-cloud.browserstack.com/wd/hub"), caps);
$user_name = getenv("BROWSERSTACK_USERNAME")
$access_key = getenv("BROWSERSTACK_ACCESS_KEY")
$browserstack_local = getenv("BROWSERSTACK_LOCAL")
$buildName = getenv("BROWSERSTACK_BUILD_NAME")
$browserstack_local_identifier = getenv("BROWSERSTACK_LOCAL_IDENTIFIER")
$app = getenv("BROWSERSTACK_APP_ID")


$capabilities = new DesiredCapabilities();
$capabilities->setCapability("app", app);
$capabilities->setCapability("device", 'Samsung Galaxy S8');
$capabilities->setCapability("build", buildName);
$capabilities->setCapability("browserstack.local", browserstack_local);
$capabilities->setCapability("browserstack.localIdentifier", browserstack_local_identifier);


$driver = RemoteWebDriver::create("https://"+user_name+":"+access_key+"@hub-cloud.browserstack.com/wd/hub", $capabilities);
user_name = os.getenv("BROWSERSTACK_USERNAME")
access_key = os.getenv("BROWSERSTACK_ACCESS_KEY")
browserstack_local = os.getenv("BROWSERSTACK_LOCAL")
build_name = os.getenv("BROWSERSTACK_BUILD_NAME")
browserstack_local_identifier = os.getenv("BROWSERSTACK_LOCAL_IDENTIFIER")
app = os.getenv("BROWSERSTACK_APP_ID")

desired_cap = {
    'app': app,
    'device': 'Samsung Galaxy S8',
    'browserstack.local': browserstack_local,
    'build': build_name,
    'browserstack.localIdentifier': browserstack_local_identifier
}

driver = webdriver.Remote("https://"+user_name+":"+access_key+"@hub-cloud.browserstack.com/wd/hub", desired_cap)
user_name = ENV["BROWSERSTACK_USERNAME"]
access_key = ENV["BROWSERSTACK_ACCESS_KEY"]
browserstack_local = ENV["BROWSERSTACK_LOCAL"]
build_name = ENV["BROWSERSTACK_BUILD_NAME"]
browserstack_local_identifier = ENV["BROWSERSTACK_LOCAL_IDENTIFIER"]
app = ENV["BROWSERSTACK_APP_ID"]

desired_caps = {
    'app': app,
    'device': 'Samsung Galaxy S8',
    'build': build_name,
    'browserstack.local': browserstack_local,
    'browserstack.localIdentifier': browserstack_local_identifier
}


appium_driver = Appium::Driver.new({
    'caps' => desired_caps,
    'appium_lib' => {
        :server_url => "https://#{user_name}:#{access_key}@hub-cloud.browserstack.com/wd/hub"
    }}, true)

Enable Local Testing

If you chose to use BrowserStack Local binary as a way to establish a local connection, in the .gitlab-ci.yml file you must configure the before_script keyword to automatically download and start the binary.

Edit your existing .gitlab-ci.yml file to include the code in the following snippets.

before_script:
      # Download the browserstack binary file
      - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
      #For OS X systems, use the following command
      #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
      # Unzip the BrowserStack Local binary file
      - unzip BrowserStackLocal-linux-x64.zip
      # Run the file with your access key
      - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start

before_script:
   #Download the browserstack binary file
   - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
   #For OS X systems, use the following command
   #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
   #Unzip the BrowserStack Local binary file
   - unzip BrowserStackLocal-linux-x64.zip
   #Run the file with your access key
   - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start
before_script:
    - 'dotnet restore --packages $NUGET_PACKAGES_DIRECTORY'
    - apt-get update
    - apt-get install zip unzip
    #Download the browserstack binary file .
    - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
    #For OS X systems, use the following command
    #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
    #Unzip the BrowserStack Local binary file
    - unzip BrowserStackLocal-linux-x64.zip
    #Run the file with your access key
    - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start
before_script:
  - apt-get update
  - apt-get install zip unzip
  - apt-get install wget
  - apt-get update -yqq
  - apt-get install -yqq git libpq-dev libcurl4-gnutls-dev libicu-dev libvpx-dev libjpeg-dev libpng-dev libxpm-dev zlib1g-dev libfreetype6-dev libxml2-dev libexpat1-dev libbz2-dev libgmp3-dev libldap2-dev unixodbc-dev libsqlite3-dev libaspell-dev libsnmp-dev libpcre3-dev libtidy-dev libonig-dev libzip-dev
  # Install PHP extensions
  - docker-php-ext-install mbstring pdo_pgsql curl intl gd xml zip bz2 opcache
  # Install & enable Xdebug for code coverage reports
  - pecl install xdebug
  - docker-php-ext-enable xdebug
  # Install and run Composer
  - curl -sS https://getcomposer.org/installer | php
  - php composer.phar install
  # Download the browserstack binary file
  - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
  #For OS X systems, use the following command
  #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
  # Unzip the BrowserStack Local binary file
  - unzip BrowserStackLocal-linux-x64.zip
  # Run the file with your access key
  - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start
before_script:
    - python -V  # Print out python version for debugging
    - pip install virtualenv
    - virtualenv venv
    - source venv/bin/activate
    - pip install selenium
    # Download the browserstack binary file
    - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip" 
    #For OS X systems, use the following command
    #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
    # Unzip the BrowserStack Local binary file
    - unzip BrowserStackLocal-linux-x64.zip
    # Run the file with your access key
    - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start
before_script:
  - ruby -v  # Print out ruby version for debugging
  # Uncomment next line if your rails app needs a JS runtime:
  # - apt-get update -q && apt-get install nodejs -yqq
  - bundle config set --local path 'vendor'  # Install dependencies into ./vendor/ruby
  - gem install selenium-webdriver
  # Download the browserstack binary file
  - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
  #For OS X systems, use the following command
  #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
  # Unzip the BrowserStack Local binary file
  - unzip BrowserStackLocal-linux-x64.zip
  # Run the file with your access key
  - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start
before_script:
  - perl -v  # Print out perl version for debugging
  - cpanm Selenium::Remote::Driver
  # Download the browserstack binary file
  - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
  #For OS X systems, use the following command
  #- wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-darwin-x64.zip"
  # Unzip the BrowserStack Local binary file
  - unzip BrowserStackLocal-linux-x64.zip
  # Run the file with your access key
  - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon start

If you are using a Windows image, then add the following lines to download and run the BrowserStack Local executable file.

before_script:
    #Download the browserstack binary file .
    - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-win32.zip"
    - powershell.exe D:\BrowserStackLocal.exe
Note: Ensure that you also configure the script keyword using the following command to stop the binary after the test run is complete.
test:
     script:
         - <your_test_command>
         - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon stop

If you prefer to manage the Local connection through your test scripts, you can use the language bindings. This is the recommended method to establish a local testing connection.

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

Important: Apart from these configurations, you can set establish and configure tests to run on local testing connection. Check out Local Testing with App Automate for more information.

Add local capability to test scripts

Add the local capability for W3C protocol and browserstack.local capability for JSON protocol to your test scripts. When you set the capability to "true", BrowserStack resolves the request via the Local agent running in your network.

browserstackOptions.put("local", "true");
'bstack:options' : {
  	"local" : "true",
  },
browserstackOptions.Add("local", "true");
desired_cap = {
    "bstack:options": {
        #Set the local capability as true
        "local" : "true"
    }
}
'bstack:options' => {
  	"local" => "true",
  },
DesiredCapabilities desiredCapabilities = new DesiredCapabilities();
desiredCapabilities.setCapability("browserstack.local", "true");
"browserstack.local" : "true",
capability.AddAdditionalCapability("browserstack.local", "true");
"browserstack.local" : "true"
caps["browserstack.local"] = "true"

Post these configurations, when you commit any code change, GitLab CI/CD automatically runs the test scripts as configured in the .gitlab-ci.yml file, which includes BrowserStack configurations.

You can verify if the test passed or failed by clicking CI/CD > Pipelines in your repository as shown in the following image. Check build status

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

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy