Run your first Playwright test on BrowserStack
Learn how to run your first Playwright tests across 100+ browser-OS combinations.
Introduction
Playwright allows you to perform end-to-end testing across all browsers. It is equipped with multiple features, such as resiliency, auto-wait, capturing test trace, and so on, that are supported with BrowserStack.
In this guide, you will learn about:
Prerequisites
- BrowserStack Username and Access key, which you can find in your account settings. If you have not created an account yet, you can sign up for a Free Trial or purchase a plan.
- Before you can start running your Playwright tests with C#, set up a Visual Studio project as follows. If you already have a working C# setup to run Playwright tests, skip these steps:
- Open Visual Studio and create a new empty project as follows:
- After the project loads, click File **> New File** and create an empty C# file as follows:
Run your first test
To run your first Playwright test on BrowserStack, complete the following steps:
Step 1: Clone the playwright-browserstack sample repo on GitHub using the following command in your terminal:
git clone https://github.com/browserstack/playwright-browserstack.git
cd playwright-browserstack/playwright-csharp/
Step 2: Install dependencies using the following command in your terminal:
dotnet build
Step 3: Set your BrowserStack credentials in the script as follows:
Navigate to the PlaywrightTest.cs file in the playwright-browserstack/playwright-csharp directory and set your BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY
Dictionary<string, string> browserstackOptions = new Dictionary<string, string>();
browserstackOptions.Add("browserstack.username", "BROWSERSTACK_USERNAME");
browserstackOptions.Add("browserstack.accessKey", "BROWSERSTACK_ACCESS_KEY");
Alternatively, you can set the environment variables in your system as follows:
# Set these values in your ~/.zprofile (zsh) or ~/.profile (bash)
export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
# setx.exe does not set the environment variable in the current command prompt, but it will be available in subsequent command prompts
setx BROWSERSTACK_USERNAME="YOUR_USERNAME"
setx BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
# Verify whether the variables have been set
echo BROWSERSTACK_USERNAME
echo BROWSERSTACK_ACCESS_KEY
Step 4: Run your first test using the following command:
dotnet run single
Step 5: View your tests on BrowserStack on the BrowserStack Automate dashboard. Check out viewing test results to learn more about the dashboard.
Understand the details of your test
When you run your test command, the test script:
- Starts the latest version of the Chrome browser
- Opens the Google search home page
- Performs a search for the term “BrowserStack”
- Marks the test as passed or failed based on the assertions
When you run the test command, tests present in the PlaywrightTest.cs file are executed.
// PlaywrightTest.cs
using Microsoft.Playwright;
using System.Threading.Tasks;
using System;
using System.Collections.Generic;
using Newtonsoft.Json;
class PlaywrightTest
{
public static async Task main(string[] args)
{
using var playwright = await Playwright.CreateAsync();
Dictionary<string, string> browserstackOptions = new Dictionary<string, string>();
browserstackOptions.Add("name", "Playwright first sample test");
browserstackOptions.Add("build", "playwright-dotnet-1");
browserstackOptions.Add("os", "osx");
browserstackOptions.Add("os_version", "catalina");
browserstackOptions.Add("browser", "chrome"); // allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
browserstackOptions.Add("browserstack.username", "BROWSERSTACK_USERNAME");
browserstackOptions.Add("browserstack.accessKey", "BROWSERSTACK_ACCESS_KEY");
string capsJson = JsonConvert.SerializeObject(browserstackOptions);
string cdpUrl = "wss://cdp.browserstack.com/playwright?caps=" + Uri.EscapeDataString(capsJson);
await using var browser = await playwright.Chromium.ConnectAsync(cdpUrl);
var page = await browser.NewPageAsync();
try {
await page.GotoAsync("https://www.google.co.in/");
await page.Locator("[aria-label='Search']").ClickAsync();
await page.FillAsync("[aria-label='Search']", "BrowserStack");
await page.Locator("[aria-label='Google Search'] >> nth=0").ClickAsync();
var title = await page.TitleAsync();
if (title == "BrowserStack - Google Search")
{
// following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. You can use this code in your after hook after each test
await MarkTestStatus("passed", "Title matched", page);
}
else {
await MarkTestStatus("failed", "Title did not match", page);
}
}
catch (Exception err) {
await MarkTestStatus("failed", err.Message, page);
}
await browser.CloseAsync();
}
public static async Task MarkTestStatus(string status, string reason, IPage page) {
await page.EvaluateAsync("_ => {}", "browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\"" + status + "\", \"reason\": \"" + reason + "\"}}");
}
}
Next Steps
- Learn how to test localhost and staging websites
- Migrate your existing test suites to run on BrowserStack
- Select browser and OS versions to run your Playwright tests
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
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!
