Features

@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.

Installation

To get started, please install the Playwright Test package:

npm i -D @playwright/test

Example Test


To be able to connect to the TestingBot Playwright cloud, you'll need to add a test fixture which overrides the browser object.

Please create a file called playwright_test.spec.js with the following contents:


const base = require('@playwright/test')

const test = base.test.extend({
  browser: async ({
    playwright,
    browserName,
    headless,
    channel,
    launchOptions
  }, use) => {
    const browser = await playwright.chromium.connectOverCDP({
      wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest',
    });
    await use(browser)
    await browser.close()
  },
})

test('should add an item', async ({ page }) => {
  await page.goto('https://testingbot.com')
  const title = await page.title()
  base.expect(title).toMatch('TestingBot')
})

Visual comparisons


Playwright Test supports visual comparisons, where it will take a screenshot of a page and then compare it with a 'golden image'.

Please create a file called playwright_test.spec.js with the following contents:


const base = require('@playwright/test')

const test = base.test.extend({
  browser: async ({
    playwright,
    browserName,
    headless,
    channel,
    launchOptions
  }, use) => {
    const browser = await playwright.chromium.connectOverCDP({
      wsEndpoint: 'wss://cloud.testingbot.com?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest',
    });
    await use(browser)
    await browser.close()
  },
})

test('should add an item', async ({ page }) => {
  await page.goto('https://testingbot.com')
  const title = await page.title()
  base.expect(title).toMatch('TestingBot')
  base.expect(await page.screenshot()).toMatchSnapshot('landing.png', { threshold: 0.1 })
})

The first run will fail, because there's no 'golden image' landing.png yet.
When you run the test again, Playwright will take a new screenshot and compare it with landing.png.
You can configure the threshold to your liking.