Playwright and cross-browser testing

Introduction

The Cypress cross-browser article followed the release that added Firefox and Edge plus the v4 upgrade. Playwright treats multi-engine support as table stakes: install browsers once (npx playwright install), keep a single spec file, declare projects in config.

Previous post: data-testid selectors.

projects in playwright.config.ts

import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
})

Run everything:

npx playwright test

Firefox only:

npx playwright test --project=firefox

You are not forced to pick a browser from a GUI runner (though npx playwright test --ui still lets you choose a project interactively).

Edge / branded Chrome

Optional projects can target installed browsers via channel: 'msedge' or channel: 'chrome' when you need something closer to end-user installs.

Summary

Historical Conduit branch:

https://github.com/12masta/react-redux-realworld-example-app/tree/6-cypress

https://github.com/12masta/react-redux-realworld-example-app/pull/7/files

Next: Visual regression with built-in screenshots.