Integrate BrowserStack App-Automate with Azure Pipelines

1. Open the Azure portal page and click My Azure DevOps Organizations.

2. In 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. Click Project settings located at the bottom-left corner of your project’s page.

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

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

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 verification succeeds, 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.

9. Click the (Pipelines) icon.

10. In 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.

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

14. Click Add.
    

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

16. In the BrowserStack Results section, enter automate in the Enter the product in use field, and then click Add.

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

1. Open the Azure portal page and click My Azure DevOps Organizations.

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

3. In the project’s page, click the Pipelines option.

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

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

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

7. In 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.
   

10. In the Tasks tab, click + on the Agent job 1 card to add the BrowserStack Results task.

11. In the Add tasks panel, from the tasks list, select the BrowserStack Results task and click Add.

12. Click the BrowserStack Results card and enter automate in the Enter the product in use field.

13. 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.

Select the BrowserStack App Uploader task from the right task pane in the YAML edit window. This will set the BROWSERSTACK_APP_ID environment variable with the App Id returned as a response after the app upload.

If you would like to set a custom identifier for your uploaded app, set the ‘App custom id’ value. In this case the BROWSERSTACK_APP_ID environment variable will be set to the custom id you provided. Custom Id is optional.

Follow the below steps to upload app from your local machine to the BrowserStack servers.

1. Select BrowserStack App Uploader and update the App path to point the app location on your local machine. This will set the BROWSERSTACK_APP_ID environment variable with the App Id returned as a response after the app upload.

2. If you would like to set a custom identifier for your uploaded app, set the ‘App custom id’ value. In this case the BROWSERSTACK_APP_ID environment variable will be set to the custom id you provided. Custom Id is optional.

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. Note: You can set additional configuration options, such as enabling verbose logging, for the Local binary in the BrowserStackLocal Options input field. Check out Set Additional Configuration options to learn more.

5. In the Tasks pane, select BrowserStack Results from the tasks list.

6. In the BrowserStack Results section, enter automate in the Enter the product in use field, and then click Add.

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

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. Note: You can set additional configuration options, such as enabling verbose logging, for the Local binary in the BrowserStackLocal Options input field. Check out Set Additional Configuration options to learn more.

4. In the Tasks tab, click + on the Agent job 1 card to add the BrowserStack Results task.

5. In the Add tasks panel, from the tasks list, select the BrowserStack Results task and click Add.

6. Click the BrowserStack Results card and enter automate in the Enter the product in use field.

7. 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.

1. Navigate to your pipeline and click Edit.

2. Click Variables located at the top-right corner of the page.

3. In the Variables section, click New Variable.

4. In the Variables section, enter HTTP_PROXYor HTTPS_PROXY in the Name field, and enter its value, such as http://127.0.0.1:8080, in the Value field.

5. Click OK.

6. In the Variables section, click Save.

1. Navigate to your pipeline and click Edit.

2. Click the Variables tab to view a list of predefined variables with their respective values in the Pipeline variables section.

3. Click + Add and enter HTTP_PROXYor HTTPS_PROXY in the name field, and enter its value, such as http://127.0.0.1:8080, in the value field.

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

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.

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

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.

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.

A prerequisite for embedding test reports is that the Java project must be built with Maven and use either TestNG or JUnit for testing.

To configure your project:

• Add the following dependencies to your pom.xml file:

<dependency>
    <groupId>com.browserstack</groupId>
    <artifactId>automate-testassist</artifactId>
    <version>1.1.0</version>
</dependency>

• Add the following repositories to your pom.xml file:

<repositories>
  <repository>
    <id>sonatype-nexus-snapshots</id>
    <url>https://oss.sonatype.org/content/repositories/snapshots</url>
  </repository>
</repositories>

<pluginRepositories>
  <pluginRepository>
   <id>sonatype-nexus-snapshots</id>
      <url>https://oss.sonatype.org/content/repositories/snapshots</url>
  </pluginRepository>
</pluginRepositories>

• Add the following plugins to your pom.xml file:

<build>
    <plugins>
      <plugin>
        <groupId>com.browserstack</groupId>
        <artifactId>automate-maven-plugin</artifactId>
        <version>1.1.0</version>
        <configuration>
            <source>${jdk.source.version}</source>
            <target>${jdk.target.version}</target>
            <complianceLevel>${jdk.source.version}</complianceLevel>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>test-compile</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
    </plugins>
</build>

You must define the Maven properties, jdk.source.version and jdk.target.version to match the Java versions of your project.

To configure WebdriverIO project, add wdio-browserstack-reporter as a dependency in your package.json file.

{
  "dependencies": {
    "wdio-browserstack-reporter": "~0.1.1"
  }

Add browserstack as a reporter in your conf file.

// wdio.conf.js
module.exports = {
    // ...
    reporters: ['browserstack'],
    reporterOptions: {
        browserstack: {
            outputDir: './'
        }
    },
    // ...
};

outputDir(optional): Defines a directory location for storing browserstack report files. See the GitHub respository link for more details.