Tilted sphere with longitudinal stripes Modern Web Guides Docs Blog Toggle darkmode

Browser Launchers: Playwright

Run tests using Playwright, using a bundled versions of Chromium, Firefox, and/or Webkit.

Usage

When using @web/test-runner regularly, you can use Playwright with the --playwright and --browsers flags:

# add the package
npm i --save-dev @web/test-runner-playwright

# add the flag
wtr test/**/*.test.js --node-resolve --playwright --browsers chromium firefox webkit

Testing multiple browsers

For each browser, you can add a separate browser launcher

import { playwrightLauncher } from '@web/test-runner-playwright';

export default {
  browsers: [
    playwrightLauncher({ product: 'chromium' }),
    playwrightLauncher({ product: 'firefox' }),
    playwrightLauncher({ product: 'webkit' }),
  ],
};

Concurrency

You can override the concurrency of this specific browser launcher

import { playwrightLauncher } from '@web/test-runner-playwright';

export default {
  browsers: [playwrightLauncher({ product: 'firefox', concurrency: 1 })],
};

Customizing launch options

If you want to customize the playwright launcher options, you can add the browser launcher in the config.

You can find all possible launch options in the official documentation.

import { playwrightLauncher } from '@web/test-runner-playwright';

export default {
  browsers: [
    playwrightLauncher({
      launchOptions: {
        headless: false,
        devtools: true,
        args: ['--some-flag'],
      },
    }),
  ],
};

Customizing browser context and page

You can customize the way the browser context or playwright page is created. This allows configuring the test environment. Check the official documentation for all API options.

import { playwrightLauncher } from '@web/test-runner-playwright';

export default {
  browsers: [
    playwrightLauncher({
      createBrowserContext: ({ browser, config }) => browser.newContext(),
      createPage: ({ context, config }) => context.newPage(),
    }),
  ],
};

Some examples:

Emulate touch

import { playwrightLauncher, devices } from '@web/test-runner-playwright';

export default {
  browsers: [
    playwrightLauncher({
      browser: 'webkit',
      createBrowserContext({ browser }) {
        return browser.newContext({ userAgent: 'custom user agent', hasTouch: true });
      },
    }),
  ],
};

Emulate mobile browser

import { playwrightLauncher, devices } from '@web/test-runner-playwright';

export default {
  browsers: [
    playwrightLauncher({
      browser: 'webkit',
      createBrowserContext({ browser }) {
        return browser.newContext({ ...devices['iPhone X'] });
      },
    }),
  ],
};