Create a project in Azure DevOps

• 
  

Create an Azure DevOps project to establish a repository for source code and to plan and track work. You can manage and structure your project to support your business needs. Each project provides boundaries to isolate data from other projects. For more information, see About projects and scaling your organization.

 Important

Select the version of this article that corresponds to your platform and version. The version selector is above the table of contents. Look up your Azure DevOps platform and version.

Prerequisites

• You need an organization before you can create a project. If you don't have an organization, create an organization.
• You must be a member of the Project Collection Administrators group or have the collection-level "Create new projects" permission set to Allow. If you're the Organization owner, you're automatically added to the Project Collection Administrators group. For more information, see Change project collection-level permissions.

 Important

To create a public project or to make a private project public, see the information in Make a private project public. You must enable additional policy settings to work with public projects. Then, return to this article to create your project.

Create a project

You can create up to 1000 projects within an organization in Azure DevOps. For more information, see Work tracking, process, and project limits.

• Browser
• Team Explorer
• Azure DevOps CLI

1. Sign in to your organization (https://dev.azure.com/{yourorganization}).

2. Select New project.

   

3. Enter information into the form provided.

   • Provide a name for your project. Your project name can't contain special characters, such as / : \ ~ & % ; @ ' " ? < > | # $ * } { , + = [ ], can't begin with an underscore, can't begin or end with a period, and must be 64 or fewer characters.
   • Enter an optional description.
   • Choose the visibility, initial source control type, and work item process. For more information, see Choosing the right version control for your project and Choose a process.

   

   When you choose public visibility, anyone on the internet can view your project. With private visibility, only users you give access to can view your project. For more information about features and access levels for public projects, see Make a private project public. If the Public option isn't available, you need to change the policy.

4. Select Create. Azure DevOps displays the project welcome page.

   

   Select one of the following options to continue:

   • Invite: Add others to your project. See Add users to a project or team. You can only invite users who are already in your organization. For more information, see Add users to a project.
   • Boards: Add work items. See View and add work items using the Work Items page.
   • Repos: Clone or import a repository or initialize a README file for your project summary page. See Clone an existing Git repo.
   • Pipelines: Define a pipeline. See Azure Pipelines documentation.
   • Test Plans: Define test plans and test suites. See Create test plans and test suites.
   • Artifacts: Discover, install, and publish NuGet, npm, and Maven packages. See the Azure Artifacts overview.
   • manage your services: Disable the visibility of services. See Turn a service on or off.

List projects

• Browser
• Team Explorer
• Azure DevOps CLI

View a list of projects from your web browser.

1. Sign in to your organization (https://dev.azure.com/{yourorganization}).

2. Select Organization settings and then select Projects.

   

   Open your desired project. For more information, see About settings at the user, team, project, or organization-level.

 

Integrate BrowserStack Automate with Azure Pipelines

Overview 

Azure Pipelines is a CI/CD platform that helps automate the build, test, 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 a part of the Azure DevOps suite of tools for managing the development lifecycle of applications.

Prerequisites 

Before you can start integration, ensure that:

• You’ve hosted your project on any of these source repositories supported by Azure.
• You are a maintainer or owner of the project.
• You are an administrator of your Azure DevOps organization.
• You’ve created a pipeline for the project’s repository. If you are yet to create a pipeline, check out how to create an Azure Pipeline.
• You have access to the BrowserStack account credentials, namely Access Key and Username.

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. In the Visual Studio Marketplace, click Azure DevOps.
2. Search for BrowserStack Azure DevOps Extension.
3. On 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 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.

• YAML editor
• Classic editor

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

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. 

Note: Ensure to set the build capability in your test script using the environment variable BROWSERSTACK_BUILD_NAME. The extension will fail to embed test reports in your pipeline if this capability is missing. Check out Edit your test script to call environment variables to learn more.

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.

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

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 your internal servers.

Configuring BrowserStack Local involves:

• Setting environment variables
• Editing test scripts to use environment variables
• Starting the BrowserStack Local
• Stopping the BrowserStack Local

Set variables for BrowserStack Azure DevOps Extension

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

BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESS_KEY
BROWSERSTACK_LOCAL
BROWSERSTACK_LOCAL_IDENTIFIER
BROWSERSTACK_BUILD_NAME

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

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

The extension also adds the BROWSERSTACK_BUILD_NAME variable that autogenerates a build name for your test runs.

Edit your test script to call environment variables

Edit your test script to add the environment variables for setting capabilities using the following code snippets:

• Node.js
• Python
• Java
• C#

username = process.env.BROWSERSTACK_USERNAME
accessKey = process.env.BROWSERSTACK_ACCESS_KEY
var buildName = process.env.BROWSERSTACK_BUILD_NAME;
browserstackLocal = process.env.BROWSERSTACK_LOCAL
browserstackLocalIdentifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER
  
var capabilities = {
 "os" : "os x",
 "browser" : "playwright-firefox",
 	"build" : buildName, // CI/CD job name using BROWSERSTACK_BUILD_NAME env variable
 "browserstack.local" : browserstackLocal,
 "browserstack.localIdentifier" : browserstackLocalIdentifier,
 "browserstack.user" : username,
 "browserstack.key" : accessKey
}

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:

• YAML editor
• Classic editor

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.

Note: Ensure to set the build capability in your test script using the environment variable BROWSERSTACK_BUILD_NAME. The extension will fail to embed test reports in your pipeline if this capability is missing. Check out Edit your test script to call environment variables to learn more.

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:

• YAML editor
• Classic editor

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. 

Note: If you dont prefer to use BrowserStack extension to start and stop local then you can also use an npm package or use binary to setup and tear down local.

View Test Reports in Azure Pipelines 

The BrowserStack Azure Pipelines plugin enables you to embed the test results from BrowserStack into Azure Pipelines.

With this integration, you can now start testing your web applications and view your test results within Azure Pipelines. The following image shows how the test results appear in Azure Pipelines: