Integrate BrowserStack App-Automate with GitLab CI/CD
Integrate BrowserStack App Automate with GitLab CI/CD and the BrowserStack real device cloud on App Automate.
GitLab CI/CD is a continuous integration tool used to integrate your test suites, enabling continuous testing, building applications, and deploying iterative code changes.
The information in this section applies to GitLab CI/CD implemented as part of GitLab SaaS offering and requires some knowledge of GitLab. Check out GitLab documentation before configuring BrowserStack.
The .gitlab-ci.yml file 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, such as BrowserStack credentials, Local settings, and so on. For your existing repositories hosted in GitLab, integrating BrowserStack requires minimal changes to your environment.
-
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.
The following sections guide you through setting up BrowserStack to test your websites or locally hosted staging environments:
Prerequisites
Before you can start the integration, ensure that the following tasks are complete.
- GitLab account and the relevant project is accessible
- The
.gitlab-ci.ymlfile exists for your project - You are a maintainer or owner of the project
-
Access to the BrowserStack account credentials, namely Access Key and Username
- The
app_idof 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"
},
{...}
]
Integrate existing test cases
With existing test cases, integrating BrowserStack involves:
- Setting up BrowserStack credentials as environment variables on GitLab project.
- Editing your test cases to add BrowserStack capabilities.
Set up BrowserStack Credentials
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:
- Log in to GitLab CI.
- Click Settings > CI/CD.
- In the Variables row, click Expand to add variables.
- 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. -
Add BrowserStack username as a variable.
a. Click Add Variable.
b. Set the variable name as BROWSERSTACK_USERNAME.
c. Enter your BrowserStack Username. - Add
app_idof the application to test as a variable.
a. Click Add Variable.
b. Set the variable name as BROWSERSTACK_APP_ID.
c. Enter theapp_idvalue of your application.
Add BrowserStack capabilities
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 OS to windows and the browser to Chrome.
Set capabilities using the following code snippet:
If you are using BrowserStack SDK, set the following capabilities in the browserstack.yml configuration file:
userName: YOUR_USERNAME
accessKey: YOUR_ACCESS_KEY
app: BROWSERSTACK_APP_ID
platforms:
- os: Windows
osVersion: 10
browserName: Chrome
browserVersion: 100.0
buildName: BStack Build Name
sessionName: BStack Session Name
seleniumVersion: 4.0.0Push the code to GitLab repository
Use Git commands to push the code into GitLab repository.
- Update the .gitlab-ci.yml file with run commands
image: maven:latest
variables:
BROWSERSTACK_USERNAME: '$BROWSERSTACK_USERNAME'
BROWSERSTACK_ACCESS_KEY: '$BROWSERSTACK_ACCESS_KEY'
stages:
- build
- test
- package
- deploy
test_job:
stage: test
tags:
- docker
script:
- <Run command>
- Run the GitLab pipeline
- Ensure the build is generated in App-Automate dashboard and verify your test execution
Integrate test cases for locally hosted websites
If you are testing websites hosted locally as part of your testing or development environment, configure your .gitlab-ci.yml file to use the BrowserStack Local binary and route your tests through the local server. Apart from setting up a Local connection, you must also add the local capability in your test scripts.
Before you configure the .gitlab-ci.yml file, set up BrowserStack Access Key and Username
Enable Local Testing in GitLab
If you are BrowserStack SDK user then you can skip adding local binary commands in .gitlab-ci.yml file as it will be handled by SDK itself.
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
# install zip unzip bash file
- apt-get install zip unzip
# 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 the binary after the test run is complete.
test:
script:
- <your_test_command>
- ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon stop
Apart from these configurations, you can establish and configure tests to run on local testing connection. Check out Local Testing with App Automate for more information.
Add the local capability to test scripts
Add the local 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.
browserstackLocal: trueRun Pipeline in GitLab
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.
Also, you will be able to check the triggered build in App Automate dashboard as well.
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
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!