ABQ with Playwright

ABQ with Playwright is released as a package that replaces @playwright/test named @rwx-research/playwright-test-abq. Additionally, it requires you override the playwright-core package.

How you override packages will depend on your project's package manager. We'll assume your project has already configured a supported version of the official Playwright packages by adding @playwright/test to your dependencies.

Version Considerations

ABQ for Playwright tracks upstream Playwright versions at the vMajor.Minor level. For example, @rwx-research/[email protected] should be a drop-in replacement to and compatible with most other tools that expect @playwright/[email protected]. For the final patch part of the version (z in the examples above), ABQ for Playwright uses a multiple of upstream Playwright's patch part using the following formula:

ABQ for Playwright patch = (upstream Playwright patch * 100) + ABQ for Playwright increment

For example, ABQ for Playwright 1.30.0 through 1.30.99 are based on upstream Playwright 1.30.0. ABQ for Playwright 1.30.100 through 1.30.199 are based on upstream Playwright 1.30.1.

When running tests using the official Playwright Docker images, you must use a version that aligns with upstream Playwright. This is required by upstream Playwright, and ABQ for Playwright has the same requirement. For example, to use ABQ for Playwright 1.30.6, you should use a v1.30.0 Playwright Docker image, such as mcr.microsoft.com/playwright:v1.30.0-focal.

Playwright Configuration

Independent of your package manager, ABQ requires disabling the Playwright-native workers and shard options, as well as enabling fullyParallel.

Set these options your playwright.config.js, gated by the presence of the ABQ_RUNNER environment variable:

module.exports = {
  fullyParallel: true,
  shard: null,
  workers: process.env.ABQ_RUNNER ? 1 : undefined,
  // Other configuration
}

Using NPM

Replace the version of @playwright/test in your package.json to redirect:

"devDependencies": {
  "@playwright/test": "npm:@rwx-research/[email protected]"
}

Add the following overrides to your package.json:

"overrides": {
  "playwright-core": "npm:@rwx-research/[email protected]"
}

Run npm install, and your project is prepared. Continue on to setting up CI.

Using Yarn

Replace the version of @playwright/test in your package.json to redirect:

"devDependencies": {
  "@playwright/test": "npm:@rwx-research/[email protected]"
}

Add the following resolutions to your package.json:

"resolutions": {
  "playwright-core": "npm:@rwx-research/[email protected]"
}

Run yarn install, and your project is prepared. Continue on to setting up CI.

Using pnpm

Replace the version of @playwright/test in your package.json to redirect:

"devDependencies": {
  "@playwright/test": "npm:@rwx-research/[email protected]"
}

Add the following overrides to the pnpm key in your package.json:

"pnpm: {
  "overrides": {
    "playwright-core": "npm:@rwx-research/playwright-core-abq@1.30.6"
  }
}

Run pnpm install, and your project is prepared. Continue on to setting up CI.