Test private websites using Playwright
A guide to running your Playwright tests on your privately hosted websites.
BrowserStack enables you to run automated tests on your internal development environments, on localhost, and from behind a corporate firewall. This feature is called Local Testing.
Local Testing establishes a secure connection between your machine and the BrowserStack cloud. Once you set up Local Testing, all URLs work out of the box, including HTTPS URLs and those behind a proxy or firewall. Learn more about how Local Testing works.
Run your first Playwright local test
Local Testing can be enabled through two methods and both of them have been detailed as follows:
If you have not created an account yet, you can sign up for a Free Trial or purchase a plan.
Local testing connection can be set up using the BrowserStack Local package. Use the following steps to run our sample test:
-
Step 1: Clone our sample repository and install dependencies
Check out the GitHub repository to access all the sample tests used in the Getting Started section. The first step is to download this repository on your system and install the dependencies as follows:
# The following command will clone the repository on your system git clone https://github.com/browserstack/playwright-browserstack.git cd playwright-browserstack/playwright-csharp/ # The following command will install the required dependencies dotnet build
The important dependency for Local Testing is
browserstack-local
and you need to install it in your project using the following command:dotnet add package BrowserStackLocal --version 2.1.0
-
Step 2: Configuring BrowserStack credentials
All our sample scripts need your BrowserStack credentials to run. Set the environment variables
BROWSERSTACK_USERNAME
andBROWSERSTACK_ACCESS_KEY
with your credentials using the following command:export BROWSERSTACK_USERNAME="YOUR_USERNAME" export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
Alternatively, you can set your credentials in the
browserstack.username
andbrowserstack.accessKey
capabilities in thePlaywrightLocalTest.cs
file (and all other spec files) in the sample repository. -
Step 3: Run your first Local test
After you have configured the credentials and installed the dependencies, you can run your local test on BrowserStack using the following command:
dotnet run local
Local testing connection can be set up using the BrowserStack Local package. Use the following steps to run our sample test:
-
Step 1: Clone our sample repository
Check out the GitHub repository to access all the sample tests used in the Getting Started section. The first step is to download this repository on your system as follows:
# The following command will clone the repository on your system git clone https://github.com/browserstack/playwright-browserstack.git cd playwright-browserstack/playwright-csharp/
-
Step 2: Verify the BrowserStackLocal and NuGet packages are added
Open the
PlaywrightDotnetTests.csproj
file and verify theBrowserStackLocal
and NuGet packages are added to it:<ItemGroup> <PackageReference Include="Microsoft.Playwright" Version="1.19.1" /> <PackageReference Include="Newtonsoft.Json" Version="13.0.1" /> <PackageReference Include="BrowserStackLocal" Version="2.1.0" /> </ItemGroup>
-
Step 3: Configuring BrowserStack credentials
All our sample scripts need your BrowserStack credentials to run. Set the environment variables
BROWSERSTACK_USERNAME
andBROWSERSTACK_ACCESS_KEY
with your credentials as shown below:export BROWSERSTACK_USERNAME="YOUR_USERNAME" export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"
Alternatively, you can set your credentials in the
browserstack.username
andbrowserstack.accessKey
capabilities in thePlaywrightLocalTest.cs
file (and all other spec files) in the sample repository. -
Step 4: Download the BrowserStack Local binary from the following links (depending on your local machine’s environment):
-
Step 5: Start the binary
Once you have downloaded and unzipped the file, you can initiate the binary by running the following command:
./BrowserStackLocal --key YOUR_ACCESS_KEY
You can run the BrowserStack Local binary using the available configurable options that may suit your use case.
-
Step 6: Verify Local connection established
Once you see the “[SUCCESS] You can now access your local server(s) in our remote browser” message in your terminal, your local testing connection is considered established.
-
Step 7: Run your sample Local test
dotnet run local
After your test runs successfully, check out the BrowserStack Automate dashboard to view the results.
Details of your first test
This section explains the details of the test that you just ran, and the changes that you need to make in your existing Playwright scripts to make them run on BrowserStack using both the approaches.
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.
Check out the GitHub repository for more information.
using Microsoft.Playwright;
using System.Threading.Tasks;
using System;
using System.Collections.Generic;
using Newtonsoft.Json;
class PlaywrightLocalTest
{
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 local sample test");
browserstackOptions.Add("build", "playwright-dotnet-3");
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");
browserstackOptions.Add("browserstack.local", "true");
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 + "\"}}");
}
}
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.
Check out the GitHub repository for more information.
using Microsoft.Playwright;
using System.Threading.Tasks;
using System;
using System.Collections.Generic;
using Newtonsoft.Json;
class PlaywrightLocalTest
{
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 local sample test");
browserstackOptions.Add("build", "playwright-dotnet-3");
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");
browserstackOptions.Add("browserstack.local", "true");
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 + "\"}}");
}
}
You can learn more about how to make your existing Playwright scripts run on BrowserStack and you can also learn about how to run cross-browser Playwright tests in parallel.
Next Steps
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
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!