Skip to main content
Experience faster, smarter testing with BrowserStack AI Agents. See what your workflow’s been missing. Explore now!
No Result Found
Get your setup working faster. Join our Discord for optimisation tips from elite testers. Join our DiscordJoin our Discord

Integrate GitHub Actions with BrowserStack

A step-by-step guide to help you integrate GitHub Actions with the BrowserStack device cloud for running all your Selenium tests on BrowserStack Automate.

You can find the BrowserStack GitHub Actions in the GitHub Marketplace. The two Actions are used to set up the required environment variables in the runner environment and set up BrowserStack Local tunnel connection which will be used to route all browser traffic from BrowserStack’s device cloud to the runner environment which hosts your web application.

In this guide, we will cover the following sections:

Set up GitHub secrets in your repository

You need to have username and access-key from BrowserStack to be able to run tests on the BrowserStack infrastructure. This section shows how to set them as Secrets in your GitHub repository. You can sign-up for free trial if you do not have an existing account.

If you want to test your open source project on BrowserStack, then sign-up here for lifetime free access to all our products.

Go to Settings in your repository and click on Secrets option in the left-hand pane

As the picture above suggests, go to Settings in your repository and there you will find the Secrets option in the left-hand pane. Go to Secrets and add new secrets as shown below:

GitHub Actions Setting New Secrets

Add YOUR_USERNAME as the BROWSERSTACK_USERNAME secret and similarly, add YOUR_ACCESS_KEY as the BROWSERSTACK_ACCESS_KEY secret. After these two steps, the secrets page should contain entries like this:

GitHub Actions Setting Secrets View

Set up a GitHub workflow to run BrowserStack tests

You must do the following to run BrowserStack tests from GitHub Actions (see the sample GitHub workflow):

  1. Create the workflow file(s) <filename>.yml in the .github/workflows directory in your repository. (Read more about creating GitHub Workflow files)
  2. The starting of the workflow specifies on what events the workflow must run. We recommend you to run on both push and pull_request so that you have a 1:1 build mapping against every commit
  3. You can run on any GitHub Actions runner e.g. ubuntu-latest (You can also host your own runners)
  4. In the initial workflow steps, you must build your web application and start the web server on the runner
  5. Thereafter, invoke setup-env BrowserStack Action to set up environment variables in the runner
  6. Invoke setup-local BrowserStack Action to set up a tunnel connection between the GitHub Actions runner environment and the BrowserStack device cloud so that the application server on the runner environment can be accessed by the browsers in BrowserStack’s device cloud
  7. Run the test scripts from the workflow. (You can visit the Sample Test section to see how you can use the environment variables in your test script to set BrowserStack capabilities)
  8. Invoke setup-local BrowserStack Action again to terminate the tunnel connection

You can see the sample GitHub workflow to run a BrowserStack test. The next section explains the purpose and usage of the BrowserStack GitHub Actions in your workflow.

Use BrowserStack GitHub Actions in your workflow

You can find the BrowserStack GitHub Actions in the GitHub Marketplace. The following two Actions are used to set up the required environment variables in the runner environment and set up BrowserStack Local tunnel connection which will be used to route all browser traffic from BrowserStack’s device cloud to the runner environment which hosts your web application.

You can find the Action’s GitHub repository. This Action should be invoked from the runner environment before any other BrowserStack Action is invoked. This Action sets up the following environment variables in the runner environment which will later be used by other BrowserStack Actions and also in your test scripts to set BrowserStack specific capabilities:

  • BROWSERSTACK_BUILD_NAME: By default, this variable will be populated with a name for your build consisting of workflow run specific data. For e.g.
    On pull_request β†’ [<Branch-Name>] PR <PR#>: <PR-title> [Workflow: Workflow#] will be set
  • BROWSERSTACK_PROJECT_NAME: By default, the repository name will be set
  • BROWSERSTACK_USERNAME: Input of username will be set, to be used in test scripts.
  • BROWSERSTACK_ACCESS_KEY: Input of access-key will be set, to be used in test scripts.

Inputs

  1. username: (Mandatory) Your BrowserStack username to be passed ideally as a GitHub Secret
  2. access-key: (Mandatory) Your BrowserStack access-key to be ideally passed as a GitHub Secret
  3. build-name: (Optional) Sets the environment variable BROWSERSTACK_BUILD_NAME
    • Default is BUILD_INFO which will be replaced with meaningful workflow related information
    • You can pass any string. E.g. build-name: 'my-string'
    • You can also use a string along with the keyword BUILD_INFO in the input
      E.g. build-name: 'string1 - BUILD_INFO - string2'
  4. project-name: (Optional) Sets the environment variable BROWSERSTACK_PROJECT_NAME
    • Default is REPO_NAME which will be replaced with the repository name
    • You can pass any string that you want to set as the BROWSERSTACK_PROJECT_NAME
      E.g. project-name: 'My Project Name Goes Here'

Usage

      - name: 'BrowserStack Env Setup'
        uses: 'browserstack/github-actions/setup-env@master'
        with:
          username:  ${{ secrets.BROWSERSTACK_USERNAME }}
          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
          build-name: 'BUILD_INFO'
          project-name: 'REPO_NAME'

Or, pass the required arguments only:

      - name: 'BrowserStack Env Setup'
        uses: 'browserstack/github-actions/setup-env@master'
        with:
          username:  ${{ secrets.BROWSERSTACK_USERNAME }}
          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
  • The setup-env Action is a pre-requisite for any other BrowserStack related Actions.
  • This action should be invoked prior to the execution of tests on BrowserStack to be able to utilise the environment variables in your tests.
  • You have to use the environment variables set in this Action in your test script (Sample test script).

The console logs of GitHub Workflow, on running this Action is shown below:

Env Action Console Screenshot

Sample test script

The following sample test script (in the language of your choice) assumes that there is a HTTP web-server running on the runner environment’s port 8099. This script is just for showing the use of environment variables in capabilities. See the complete list of capabilities

To be able to run these test scripts in the GitHub Actions runner environment, you have to add a step(s) in the workflow to install the required Selenium bindings for the language of your choice.

browserstack.yml
Copy icon Copy

Sample GitHub workflow showing a BrowserStack test

name: 'BrowserStack Test'
on: [push, pull_request]
jobs:
  ubuntu-job:
    name: 'BrowserStack Test on Ubuntu'
    runs-on: ubuntu-latest  # Can be self-hosted runner also
    steps:

      - name: 'BrowserStack Env Setup'  # Invokes the setup-env action
        uses: browserstack/github-actions/setup-env@master
        with:
          username:  ${{ secrets.BROWSERSTACK_USERNAME }}
          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}

      - name: 'BrowserStack Local Tunnel Setup'  # Invokes the setup-local action
        uses: browserstack/github-actions/setup-local@master
        with:
          local-testing: start
          local-identifier: random

# The next 3 steps are for building the web application to be tested and starting the web server on the runner environment

      - name: 'Checkout the repository'
        uses: actions/checkout@v2

      - name: 'Building web application to be tested'
        run: npm install

      - name: 'Running application under test'
        run: ./node_modules/.bin/http-server -p 8099 &

      - name: 'Running test on BrowserStack'  # Invokes the actual test script that would run on BrowserStack browsers
        run: node index.js  # See sample test script above

      - name: 'BrowserStackLocal Stop'  # Terminating the BrowserStackLocal tunnel connection
        uses: browserstack/github-actions/setup-local@master
        with:
          local-testing: stop



If you are building and running your web application in a separate workflow job and the tests on a different job, then (this is NOT the recommended way of integrating GitHub Actions with the BrowserStack cloud):

  • You need to invoke the browserstack/github-actions/setup-env@master and browserstack/github-actions/setup-local@master GitHub Actions in the job where your application is being built and run
  • You need to invoke the browserstack/github-actions/setup-env@master GitHub Action also in the job where test scripts will run because this Action sets up the environment variables BROWSERSTACK_USERNAME, BROWSERSTACK_ACCESS_KEY, BROWSERSTACK_BUILD_NAME and BROWSERSTACK_PROJECT_NAME, which are to be used in your test scripts
  • Additionally, you must ensure that you use the same local-identifier while invoking the setup-local action and also inside your test script. As these activities are not happening in the same job, you have to take care of this manually and you cannot simply use BROWSERSTACK_LOCAL_IDENTIFIER in your test scripts to set the localIdentifier capability

Additional References

Below are some quick links for your ready reference:

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 Check Circle