playwright-browserstack

Sample Playwright tests to run on BrowserStack

Introduction

You can now run your Playwright tests on the BrowserStack infrastructure. Porting your existing Playwright tests to run on BrowserStack, can be done in a matter of minutes.

This guide walks you through running a sample Playwright test on BrowserStack and then goes on to run tests on privately hosted websites and also shows cross-browser tests run in parallel to speed up the build execution.

Pre-requisites

You need BrowserStack credentials to be able to run Playwright tests. You have to replace YOUR_USERNAME and YOUR_ACCESS_KEY in the sample scripts in this repository with your BrowserStack credentials which can be found in your Account Settings page.

Alternatively, you can set the environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY with your credentials and all the scripts in this repository should work fine

Run your first Playwright test on BrowserStack

1. Clone this repository
2. Install the dependencies using npm install
3. Run the sample script using node single_test.js

Note: When using Node for your Playwright test, you need to stay in the home directory. If you prefer using other frameworks, navigate to the specific frameworks folder using the following Commands:

• Playwright Test Runner: cd playwright-test
• Java: cd playwright-java
• Python: cd playwright-python
• C#: cd playwright-csharp

Important Note: When you try to run your Playwright tests on BrowserStack, you need to pass your locally installed client Playwright version in the capability client.playwrightVersion. This is required because it is often possible that your locally installed version might be different than the server version running on BrowserStack and the mismatch could lead to different request/response formats leading to socket errors.

Playwright does not pass the client version information in the connect request yet and hence this capability is required to let BrowserStack know about your locally installed version, to avoid any error scenarios arising from this. This has already been taken care in the sample scripts under this repository.

Run cross-browser tests in parallel

1. Clone this repository
2. Install the dependencies using npm install
3. Run the parallel_test.js script using node parallel_test.js

Run sample test on privately hosted websites

1. You have to download the BrowserStack Local binary from the links below (depending on your environment):
   • OS X (10.7 and above)
   • Linux 32-bit
   • Linux 64-bit
   • Windows (XP and above)
2. Once you have downloaded and unzipped the file, you can initiate the binary by running the command: ./BrowserStackLocal --key YOUR_ACCESS_KEY
3. Once you see the terminal say “[SUCCESS] You can now access your local server(s) in our remote browser”, your local testing connection is considered established.
4. You can then run the sample Local test using node local_test.js

Supported Browsers and Playwright versions

BrowserStack Playwright tests in beta supports the following browsers across the following OS versions:

Browsers supported

1. Bundled Chromium with Playwright ('browser': 'playwright-chromium')
2. Bundled Firefox with Playwright ('browser': 'playwright-firefox')
3. Bundled Webkit with Playwright ('browser': 'playwright-webkit')
4. Branded Google Chrome ('browser': 'chrome')
   • You can test on multiple versions of branded Google Chrome using another capability 'browser_version': 'latest'. Supported options are latest, latest-beta, latest-1 and so on.
   • We would be supporting Chrome v83 and above. You can also specify browser_version as 88 or 91 and so on.
5. Branded Microsoft Edge ('browser': 'edge')
   • You can test on multiple versions of branded Microsoft Edge using another capability 'browser_version': 'latest'. Supported options are latest, latest-beta, latest-1 and so on.
   • We would be supporting Edge v83 and above. You can also specify browser_version as 88 or 91 and so on.

The bundled browser version that will be used to run your test is the same that comes bundled with the Playwright version. Supported Playwright versions and the option to specify them is given in a later section of this page.

Note: You can also run your tests in any of the mobile devices that Playwright supports for emulation. You can find the sample code for running in an iPhone emulator and the sample for running on Pixel. The complete list of devices supported by Playwright can be found here

OS (with versions) supported

1. Windows 10 ('os': 'Windows', 'os_version': '10')
2. macOS Big Sur ('os': 'osx', 'os_version': 'Big Sur')
3. macOS Catalina ('os': 'osx', 'os_version': 'Catalina')
4. macOS Mojave ('os': 'osx', 'os_version': 'Mojave')

Playwright versions supported

Currently, we are supporting 2 Playwright versions. Playwright version can be specified using a capability for e.g.: 'browserstack.playwrightVersion': '1.14.1'. If you do not specify a value for this capability then your tests would run on the latest version that is supported on the BrowserStack platform.

We recommend you to pass the capability value as 'browserstack.playwrightVersion': '1.latest' or 1.latest-1 to signify the 2 latest versions within the major version 1. If you pass this capability, then you can be rest assured that whichever are the latest versions on BrowserStack, your tests would run on that without you needing to change your test code often.

You can learn more about the significance of selecting a Playwright version on the browser version in our documentation.

Get Playwright session details

While your Playwright session runs on BrowserStack, we generate a unique ID for the session, build and also generate URLs for the various types of logs which you can use to build your own reporting or for any other purpose that you might like.

A sample script with the use of the API to fetch all the relevant session details is shown in the sample_session_details_API.js.

You can see the documentation for marking test status using REST API using the session ID for the session, any time even after the session has completed its execution.

Playwright with Jest

If you are using Jest to run your Playwright tests, you can run all your playwright-jest tests on BrowserStack as well. Follow the steps below to run the sample tests in this repository:

1. Clone this repository using git clone https://github.com/browserstack/playwright-browserstack.git (if not already done).
2. Go inside the directory playwright-jest using cd playwright-jest
3. Install the dependencies using npm install
4. Put in your credentials in the file jest-playwright.config.js in the capabilities part.
5. If you are trying to run your own Jest tests on BrowserStack, then you need to ensure that you have configured the connectOptions and browsers as shown in the module.exports of the config file.
6. Run the sample jest script using npm test which runs the test google.test.js across 3 browsers in BrowserStack serially. Your can also configure Jest to run your tests in parallel.

Playwright with Test Runner

If you are using Playwright Test Runner to run your Playwright tests, you can run all your playwright-test tests on BrowserStack as well. Follow the steps below to run the sample tests in this repository:

1. Clone this repository using git clone https://github.com/browserstack/playwright-browserstack.git (if not already done).
2. Go inside the directory playwright-test using cd playwright-test
3. Install the dependencies using npm install
4. Put in your credentials in the file fixtures.js in the caps part.
5. If you are trying to run your own tests on BrowserStack, then you need to ensure that you have configured the projects correctly in playwright.config.js file.
6. Run the sample test script using npm test which runs all the tests inside tests directory across 5 browsers in BrowserStack.
7. If you want to test against localhost or other private websites, then run the sample test script using npm run test:local which runs all the tests inside tests directory across 5 browsers in BrowserStack.
8. If you want to run your tests locally, you just need to configure the projects without name @browserstack in playwright.config.js file.

Facing issues?

If you are facing any issue with any of the above or any other issue in trying to run your Playwright tests on BrowserStack, you can reach out to support, select product as Automate and post your query there.