---
title: Playwright Test with cloud-based browsers | TestingBot
description: Run tests with Playwright test on TestingBot's cloud-based browser grid.
source_url:
  html: https://testingbot.com/support/web-automate/playwright/playwright-test
  md: https://testingbot.com/support/web-automate/playwright/playwright-test.md
---

# Playwright Test

Playwright comes with its own test-runner called Playwright Test.   
 It is designed to make end-to-end testing easy with Playwright.

More information about `@playwright/test` is available in the [Playwright documentation](https://playwright.dev/docs/test-configuration).

See the TestingBot [Playwright Test Node Example repository](https://github.com/testingbot/node-playwright-test-example) for a simple example on how to run Playwright tests with TestingBot.

## Installation

To get started, please install the Playwright Test package:

```bash
npm i -D @playwright/test
```

## Configuration

Next, we will need to create a [configuration file](https://playwright.dev/docs/test-configuration) so that Playwright Test knows what tests to run and what options to use.

Create a file called `playwright.config.js` with the following contents:

```javascript
import { defineConfig } from '@playwright/test'
import { getConnectWsEndpoint } from './testingbot.config'

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({

  testDir: './tests',

  /* Maximum time one test can run for. */
  timeout: 30 * 1000,

  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,

  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,

  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,

  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',

  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'playwright-chrome@latest:Windows 10',
      use: {
        connectOptions: { 
          wsEndpoint: getConnectWsEndpoint({
            browserName: 'chrome',
            browserVersion: 'latest',
            platform: 'WIN10'
          }) 
        }
      },
    },
    {
      name: 'playwright-firefox@latest:Linux',
      use: {
        connectOptions: { 
          wsEndpoint: getConnectWsEndpoint({
            browserName: 'firefox',
            browserVersion: 'latest',
            platform: 'LINUX'
          }) 
        }
      }
    }
  ]
})
```

You will also need to create a `testingbot.config.js` file, which will contain code to connect to our Playwright server:

```javascript
export function getConnectWsEndpoint(userCapabilities) {
    const defaultCapabilities = {
        'tb:options': {
            key: process.env.TB_KEY,
            secret: process.env.TB_SECRET
        }
    }
    const capabilities = { ...defaultCapabilities, ...userCapabilities }
    const connectUrl = `wss://cloud.testingbot.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
    return connectUrl
}
```

You're now all set up to run your first Playwright Test on TestingBot. Let's see the [example](https://testingbot.com#example) below to run a test.

## Specifying browser and version

To specify on which browser and version your Playwright test should run, you can include both a `browserName` and `browserVersion` in the `wsEndpoint` URL.

  ![OS selected](https://testingbot.com/assets/environments/svg/windows11-0e1b28bc0fdd5034d3e4d3dc8d346c500a8c6522facf4b45d0da56537c1f1c6d.svg) Windows 11 › ![Browser selected](https://testingbot.com/assets/environments/svg/chrome-c4081ff447d2d898d4afcb8f074a907c960e6f007716c1a1d119eee6803c4042.svg) Chrome 139 

Loading environments...

Please wait while we load the available browsers and platforms.

## Example Test

As we've [previously defined in our playwright.config.js file](https://testingbot.com#configuration), our tests should be placed in the `tests` directory.

Create a new file in the `tests` directory called `sample.spec.js`:

```javascript
const { test, expect } = require('@playwright/test')

test('Sample TestingBot test', async ({ page }, testInfo) => {
    try {
        await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'setSessionName', arguments: { name: testInfo.project.name }})}`)
        await page.goto('https://testingbot.com/',{ waitUntil: 'networkidle' })
        await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'setSessionStatus', arguments: { passed: true }})}`)
    } catch (e) {
        await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'setSessionStatus', arguments: { passed: false, reason: e.message }})}`)
    }
})
```

To run the test, execute this command in the directory where you placed the configuration file:

```bash
npx playwright test
```

This test will set the correct name to be shown in the TestingBot dashboard, navigate with the remote browser to the TestingBot homepage and then set the test as passed.

## Reports

There are various [Test Reporters](https://playwright.dev/docs/test-reporters) that Playwright offers, which you can change in the [configuration file](https://testingbot.com#configuration).

For every test that runs on TestingBot, you will receive a video of the test, generated logs and other meta-data.

## Other Options

You can set various [Timeout options](https://playwright.dev/docs/test-timeouts), use [annotations](https://playwright.dev/docs/test-annotations) and set up [setup and teardown scripts](https://playwright.dev/docs/test-global-setup-teardown).

The global setup and teardown scripts can be used to start (and stop) a [TestingBot Tunnel](https://testingbot.com/support/tunnel), which allows you to test on websites that are not publicly available.

An example of a setup script:

```javascript
const testingbotTunnel = require('testingbot-tunnel-launcher')

module.exports = async () => {
    await new Promise((resolve, reject) => {
        testingbotTunnel({
          apiKey: process.env.TB_KEY,
          apiSecret: process.env.TB_SECRET,
          verbose: true
        }, function (err, tunnel) {
          if (err) {
            console.error(err.message)
            return reject(err)
          }
          resolve()
        })
    })
}
```

### Looking for more help?

Have questions or need more information? Reach out via email or Slack.

[Email us](https://testingbot.com/contact/new) [Join our Slack](https://join.slack.com/t/testingb0t/shared_invite/zt-3bcw9xch-jk19~6XPs_xBrsAgAedkCw)