No Result Found

Integrate BrowserStack Automate with Azure Pipelines

Learn how to integrate your Cypress tests with Azure Pipelines.

Azure Pipelines is a continuous integration and delivery platform that automates the development, testing, and deployment of code projects. It supports a wide range of languages and tools, and provides pre-defined tasks and the ability to create custom tasks and integrations. It is part of the Azure DevOps suite of tools for managing the development lifecycle of applications.

The information in this section applies to using the BrowserStack plugin with Azure Pipelines as part of the Azure DevOps Services (cloud) offering only.

In this guide, you’ll learn how to:

Prerequisites

Before you can start integration, ensure that:

Install the BrowserStack Azure DevOps Extension

The BrowserStack Azure DevOps Extension eases the process of configuring Azure Pipelines to run tests on BrowserStack. To install the extension follow these steps:

  1. Navigate to the Visual Studio Marketplace, and click Azure DevOps.
  2. Search for BrowserStack Azure DevOps Extension.
  3. In the BrowserStack Azure DevOps Extension page, click Get it Free.
  4. To sign in to your Azure account, open the Sign in page. Once you’ve signed in, click Select an Azure DevOps organization and choose your organization.
  5. Click Install to add the extension.

BrowserStack’s extension is now installed in your Azure DevOps organization. This installs the BrowserStack Config, BrowserStackResults, and BrowserStackStopLocal tasks to the list of available tasks for you to use them in your pipeline.

Configure BrowserStack in Azure Pipelines

For your Cypress tests to run on BrowserStack, the Azure Pipeline needs additional information, such as BrowserStack credentials.

You can create a pipeline using either a YAML editor or a classic editor. Depending on the editor you used to create the pipeline, refer to the steps in the following tabs to integrate BrowserStack in your pipeline.

  1. Navigate to the Azure portal page, and click My Azure DevOps Organizations.

  2. On the Azure DevOps Organizations page, click the project where you’ve created a pipeline for your project’s repostory from the list of projects that appear.

  3. In the bottom-left corner of your project’s page, click Project settings.

  4. On the Project details page, click Service connections > Create service connection.

  5. In the New service connection section, select BrowserStack from the list, and click Next. Select BrowserStack

  6. In the New BrowserStack service connection section, enter your BrowserStack Username in the Username field, and then enter Access key in the AccessKey field.

  7. Click Verify to verify your BrowserStack credentials.

  8. After successful verification, enter a service connection name in the Service connection name field, such as browserstack-connection, and then click Verify and save. The service connection gets added and you’re redirected to the Service connections page. Service creation in YAML

  9. Click the Click Pipelines option (Pipelines) icon.

  10. On the Pipelines page, select your pipeline.

  11. Click Edit to edit the pipeline.

  12. In the pipeline editor, from the Tasks pane, search for the BrowserStack Config task, and then select it. BrowserStack Config

  13. In the BrowserStack Config section, select the connection, created in Step 8, from BrowserStack service end point

  14. Click Add.

The following image shows the azure-pipelines.yml file with all the BrowserStack tasks configured to run your test on BrowserStack. YML file with BrowserStack tasks added

  1. Navigate to the Azure portal page, and click My Azure DevOps Organizations.

  2. On the Azure DevOps Organizations page, select the project from the given list.

  3. On the project’s page, click the Click Pipelines option Pipelines option.

  4. On the Pipelines page, click to select your pipeline.

  5. On the pipeline’s page, click Edit to edit your pipeline.

  6. On the Tasks tab, click the Add (+) icon next to the Agent Job 1 card.

  7. On the Add tasks pane, select the BrowserStack Config task from the tasks list, and click Add.

  8. Click the BrowserStack configuration setup card and click + New.

  9. Create a new service connection using the following steps in the New service connection screen:
    a. Enter your BrowserStack Username.
    b. Enter your BrowserStack Access key.
    c. Click Verify.
    d. After verification succeeds, enter a name for service connection.
    e. Click Verify and save.
    Service connection in classic editor

  10. Click Save & queue and select Save to save the changes.

The following image shows all the BrowserStack tasks configured in the pipeline to run your test on BrowserStack. BrowserStack tasks added

Your build pipeline is successfully configured to connect with the BrowserStack cloud for your project.

If you don’t want to use the BrowserStack extension for authentication, you can configure your BrowserStack username and access key as variables in Azure pipeline, you need to provide the same name as defined in your browserstack.json file.

Configure BrowserStack Local in Azure Pipelines

Use BrowserStack Local Testing to test your web applications hosted on private, development, and internal servers. With the BrowserStack Local Testing binary, you can create a secure, private connection between the BrowserStack and your internal servers.

Configuring BrowserStack Local involves:

Use the BrowserStack Azure DevOps Extension

The BrowserStack Azure DevOps extensiont sets the following environment variables by default:

BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESS_KEY
BROWSERSTACK_LOCAL
BROWSERSTACK_LOCAL_IDENTIFIER

When you create a service connection, the BROWSERSTACK_USERNAME and the BROWSERSTACK_ACCESS_KEY are automatically added as variables during the configuration step.

Additionally, when you add the BrowserStack Config task in your pipeline, the BROWSERSTACK_LOCAL and BROWSERSTACK_LOCAL_IDENTIFIER environment variables are set automatically by the extension.

Ensure to pass the local and localIdentifier capabilities to run tests if required to run tests on your local development servers.

Add task to start BrowserStack Local

When you add the BrowserStack Config task, you have an option to select BrowserStack Local to run your tests on any developement or staging environment. Based on the editor you used to create your pipeline, refer to the steps in the following tabs:

  1. Navigate to your pipeline and click Edit.

  2. In the Tasks pane, select BrowserStack Config from the tasks list.

  3. Select the service endpoint you created earlier.

  4. Select the BrowserStackLocal checkbox, and then click Add. Click BrowserStackLocal

The following image shows the azure-pipelines.yml file with all the BrowserStack tasks and local configured to run your test on BrowserStack.

YAML with local enabled

  1. Navigate to your pipeline page and click Edit.

  2. In the Tasks tab, click the BrowserStack configuration setup card.

  3. In the BrowserStack Config section, select the BrowserStackLocal checkbox. Select browserstacklocal

  4. Click Save & queue and select Save to save the changes.

The following image shows the azure-pipelines.yml file with all the BrowserStack tasks and local configured to run your test on BrowserStack. BrowserStack tasks added

Set Additional Configuration options

With the Local binary, you can set additional configurations, such as verbose logging, excluding hosts, and so on. To set any additional configuration options, add the flags in the BrowserStackLocal Options section. For example, to enable verbose logging and to route all traffic via the proxy, set the following flags in the BrowserStackLocal Options field:

  {"verbose": true, "forceProxy": true}

Check out Flag for Local Binary to learn about more Local Testing parameters.

Follow Camel case style when adding local modifier options. For example, enter the --force-local option as forceLocal in the BrowserStackLocal Options section.

Add task to stop BrowserStack Local

It is recommended to stop the BrowserStack Local binary after tests have been executed to optimize your resources. Add the BrowserStack Stop Local task in your pipeline using the following steps:

  1. Navigate to your pipeline and click Edit.

  2. In the Tasks pane, search for BrowserStack Stop Local from the tasks list, and then select it. Add BrowserStack Stop Local in YAML

The following image shows the azure-pipelines.yml file with all the BrowserStack tasks configured to run your local test on BrowserStack. YML file with BrowserStack local tasks added

  1. Navigate to your pipeline and click Edit.

  2. In the Task tab, click + on the Agent job 1 card.

  3. Search for BrowserStack Stop Local and click Add. Add Stop Local

  4. Click Save & queue and select Save to save the changes.

The following image shows all the BrowserStack tasks configured to run your local test on BrowserStack.

Classic stop local tasks

If you do not prefer to use BrowserStack extension for your web applications hosted on private, development, and internal servers(local testing), you can make necessary code changes in the browserstack.json file as described here.

After these configurations, you should be able to run Cypress tests on your locally hosted websites on BrowserStack Automate.

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

  • ON THIS PAGE

    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