---
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/index.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:

    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:

    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:

    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`:

    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:

    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:

    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()
            })
        })
    }

Was this page helpful? Yes No 

## Looking for More Help?

Have questions or need more information?   
 You can reach us via the following channels:

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