@japa/browser-client

Browser client to write end to end browser tests. Uses playwright under the hood

The browser client of Japa is built on top of Playwright library and integrates seamlessly with the Japa test runner. Following are some reasons to use this plugin over manually interacting with the Playwright API.

• Automatic management of browsers and browser contexts.
• Built-in assertions.
• Ability to extend the browser, context, and page objects using decorators.
• Class-based pages and interactions to de-compose the page under test into smaller and reusable components.
• Toggle headless mode, tracing, and browsers using CLI flags.

Complete documentation

Installation

Install the package from the npm registry as follows:

npm i -D playwright @japa/browser-client

yarn add -D playwright @japa/browser-client

Usage

You can use the browser client package with the @japa/runner as follows.

import { assert } from '@japa/assert'
import { browserClient } from '@japa/browser-client'
import { configure, processCliArgs } from '@japa/runner'

configure({
  ...processCliArgs(process.argv.slice(2)),
  ...{
    plugins: [
      assert(),
      browserClient({
        runInSuites: ['browser'],
      }),
    ],
  },
})

Once done, you will be able to access the visit, browser and browserContext property from the test context.

test('test title', ({ browser, browserContext, visit }) => {
  // Create new page
  const page = await browserContext.newPage()
  await page.goto(url)

  // Or use visit helper
  const page = await visit(url)

  // Create multiple contexts
  const context1 = await browser.newContext()
  const context2 = await browser.newContext()
})