Integrate BrowserStack Automate with GitLab CI/CD

Learn how to integrate GitLab CI/CD with the BrowserStack device cloud for running all your Playwright tests.

Introduction

GitLab CI/CD is a continuous integration tool that integrates your test suites to allow for continuous testing, build, and deployment of iterative code changes. The use of CI/CD tools helps detect and mitigate failures before they reach the production stage.

In this guide, you will learn how to:

• Integrate Gitlab with existing Playwright test suite
• Integrate Gitlab to test locally hosted websites

Integrate an existing Playwright test suite

Integrating BrowserStack with existing test cases involves the following steps:

• Setting up BrowserStack credentials as environment variables.
• Adding the required configurations to integrate with BrowserStack.

Prerequisites

Before you start integrating existing tests, ensure the following tasks are completed:

1. GitLab account and the relevant project is accessible
2. .gitlab-ci.yml file exists for your project
3. You are a maintainer or owner of the project
4. Access to the BrowserStack account credentials, namely Access Key and Username

The .gitlab-ci.yml includes BrowserStack specific configurations to authenticate and run the test cases. 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.

Set up BrowserStack Access Key and Username

variables:
  BROWSERSTACK_USERNAME: "YOUR_USERNAME"
  BROWSERSTACK_ACCESS_KEY: "YOUR_ACCESS_KEY"
  # 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"

Adding Configurations to integrate with BrowserStack

Configurations to integrate with browserstack involves:

• Adding browserstack credentials BrowserStack Username & Access Key.
• Passing custom capabilities: Using Playwright with BrowserStack also requires passing the custom capabilities in an object, and passing this object to the Playwright URL endpoint on BrowserStack.

Gitlab Project Setup:

Perform the following steps to set up a project in Gitlab:

• Sign in to Gitlab
• Click Create a New project
• Select Import Project (This documentation is based on migrating your data from an external source like GitHub, Bitbucket, or another instance of GitLab. You can choose other project options as well)
• (Github is chosen in this setup) Import your preferred repository and Go to Project
• Select Set up CI/CD from the options

• Configure pipeline as a new .gitlab-ci.yaml file.

Refer to the following image for a sample .gitlab-ci.yml file setup:

• After your pipeline has completed successfully, navigate to the CI/CD section of your project in Gitlab. You will notice that the build has passed.
• You can view the executed test results on the BrowserStack Automate Dashboard.

You should be able to run your existing Playwright tests on BrowserStack Automate after completing the configurations.

Test your locally hosted websites

BrowserStack enables you to run automated tests on your internal development environments, on localhost, and from behind a corporate firewall. This feature is called Local Testing.

Local Testing establishes a secure connection between your machine and the BrowserStack cloud. Once you set up Local Testing, all URLs work out of the box, including HTTPS URLs and those behind a proxy or firewall.

Local Testing can be enabled through two methods, and both of these have been detailed as follows:

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:
    - 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:
    #Download the browserstack binary file .
    - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-win32.zip"
    - powershell.exe D:\BrowserStackLocal.exe

test:
     script:
         - <your_test_command>
         - ./BrowserStackLocal --key $BROWSERSTACK_ACCESS_KEY --daemon stop

Add the browserstack.local capability to test scripts

Add the browserstack.local capability to yout 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.

capabilitiesObject.addProperty("browserstack.local", "true");

'browserstack.local': 'true'

browserstackOptions.Add("browserstack.local", "true");

'browserstack.local': 'true'

For detailed code reference checkout Test Locally hosted websites section of BrowserStack Playwright documentation and choose your preferred language.

You should be able to run run Playwright tests on your locally hosted websites on BrowserStack Automate after these configurations.