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:

Note: Testing on BrowserStack requires username and access key that can be found in account settings.
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-java/

    The important dependency for Local Testing is browserstack-local and you need to install it by adding it as a dependency in the pom.xml file.

    pom.xml 
    <dependency>
    <groupId>com.browserstack</groupId>
    <artifactId>browserstack-local-java</artifactId>
    <version>1.0.6</version>
    <scope>compile</scope>
</dependency>

  • Step 2: Configuring BrowserStack credentials

    All our sample scripts need your BrowserStack credentials to run. Set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials as follows:

    export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

    Alternatively, you can set your credentials in the browserstack.username and browserstack.accessKey capabilities in the PlaywrightLocalUsingBindingsTest.java 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 required dependencies, you can run your local test on BrowserStack using the following command:

    mvn -Dexec.mainClass="com.browserstack.PlaywrightLocalUsingBindingsTest" -Dexec.classpathScope=test test-compile exec:java

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-java/

  • Step 2: Configuring BrowserStack credentials

    All our sample scripts need your BrowserStack credentials to run. Set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials as follows:

    export BROWSERSTACK_USERNAME="YOUR_USERNAME"
export BROWSERSTACK_ACCESS_KEY="YOUR_ACCESS_KEY"

    Alternatively, you can set your credentials in the browserstack.username and browserstack.accessKey capabilities in the PlaywrightLocalTest.java file (and all other spec files) in the sample repository.

  • Step 3: Download the BrowserStack Local binary from the following links (depending on your local machine’s environment):

  • Step 4: 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 5: 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 6: Run your sample Local test

    mvn -Dexec.mainClass="com.browserstack.PlaywrightLocalTest" -Dexec.classpathScope=test test-compile exec:java

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.

PlaywrightLocalUsingBindingsTest.java 
package com.browserstack;

import com.google.gson.JsonObject;
import com.microsoft.playwright.*;
import java.net.URLEncoder;
import java.util.HashMap;

import com.browserstack.local.Local;

public class PlaywrightLocalUsingBindingsTest {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            JsonObject capabilitiesObject = new JsonObject();
            capabilitiesObject.addProperty("browser", "chrome");    // allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
            capabilitiesObject.addProperty("browser_version", "latest");
            capabilitiesObject.addProperty("os", "osx");
            capabilitiesObject.addProperty("os_version", "catalina");
            capabilitiesObject.addProperty("name", "Playwright first local test");
            capabilitiesObject.addProperty("build", "playwright-java-3");
            capabilitiesObject.addProperty("browserstack.username", "BROWSERSTACK_USERNAME");
            capabilitiesObject.addProperty("browserstack.accessKey", "BROWSERSTACK_ACCESS_KEY");
            capabilitiesObject.addProperty("browserstack.local", "true");

            //Creates an instance of Local
            Local bsLocal = new Local();

            // You can also set an environment variable - "BROWSERSTACK_ACCESS_KEY".
            HashMap<String, String> bsLocalArgs = new HashMap<String, String>();
            bsLocalArgs.put("key", "BROWSERSTACK_ACCESS_KEY");

            // Starts the Local instance with the required arguments
            bsLocal.start(bsLocalArgs);

            // Check if BrowserStack local instance is running
            System.out.println("BrowserStackLocal running: " + bsLocal.isRunning());

            BrowserType chromium = playwright.chromium();
            String caps = URLEncoder.encode(capabilitiesObject.toString(), "utf-8");
            String ws_endpoint = "wss://cdp.browserstack.com/playwright?caps=" + caps;
            Browser browser = chromium.connect(ws_endpoint);
            Page page = browser.newPage();
            try {
                page.navigate("http://localhost:45691");
                page.waitForFunction("document" +
                        ".querySelector(\"body\")" +
                        ".innerText" +
                        ".includes(\"This is an internal server for BrowserStack Local\")");

                // 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
                markTestStatus("passed", "Local is up and running", page);
            } catch (Exception err) {
                markTestStatus("failed", "BrowserStack Local binary is not running", page);
            }
            browser.close();

            //Stop the Local instance
            bsLocal.stop();
        } catch (Exception err) {
            System.out.println(err);
        }
    }

    public static void markTestStatus(String status, String reason, Page page) {
        Object result;
        result = page.evaluate("_ => {}", "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.

PlaywrightLocalTest.java 
package com.browserstack;

import com.google.gson.JsonObject;
import com.microsoft.playwright.*;
import java.net.URLEncoder;

public class PlaywrightLocalTest {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            JsonObject capabilitiesObject = new JsonObject();
            capabilitiesObject.addProperty("browser", "chrome");    // allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
            capabilitiesObject.addProperty("browser_version", "latest");
            capabilitiesObject.addProperty("os", "osx");
            capabilitiesObject.addProperty("os_version", "catalina");
            capabilitiesObject.addProperty("name", "Playwright first local test");
            capabilitiesObject.addProperty("build", "playwright-java-3");
            capabilitiesObject.addProperty("browserstack.username", "BROWSERSTACK_USERNAME");
            capabilitiesObject.addProperty("browserstack.accessKey", "BROWSERSTACK_ACCESS_KEY");
            capabilitiesObject.addProperty("browserstack.local", "true");

            BrowserType chromium = playwright.chromium();
            String caps = URLEncoder.encode(capabilitiesObject.toString(), "utf-8");
            String ws_endpoint = "wss://cdp.browserstack.com/playwright?caps=" + caps;
            Browser browser = chromium.connect(ws_endpoint);
            Page page = browser.newPage();
            try {
                page.navigate("http://localhost:45454");
                String title = page.title();

                if (title.equals("BrowserStack Local")) {
                    // 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
                    markTestStatus("passed", "Title matched", page);
                } else {
                    markTestStatus("failed", "Title did not match", page);
                }
            } catch (Exception err) {
                markTestStatus("failed", err.getMessage(), page);
            }
            browser.close();
        } catch (Exception err) {
            System.out.println(err);
        }
    }

    public static void markTestStatus(String status, String reason, Page page) {
        Object result;
        result = page.evaluate("_ => {}", "browserstack_executor: { \"action\": \"setSessionStatus\", \"arguments\": { \"status\": \"" + status + "\", \"reason\": \"" + reason + "\"}}");
    }
}
Note: Playwright tests run on BrowserStack using a client-server architecture. So, test assertions run on the client side and hence BrowserStack won’t know whether your tests have passed or failed. Learn more how to mark tests as passed or failed on BrowserStack.

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






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!

    We use cookies to enhance user experience, analyze site usage, and assist in our marketing efforts. By continuing to browse or closing this banner, you acknowledge that you have read and agree to our Cookie Policy, Privacy Policy and Terms of Service.

    Got it

    Talk to an Expert
    Talk to an Expert