Why Every Software Tester Should Learn Playwright in 2026

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"] } },
    { name: "mobile",   use: { ...devices["iPhone 13"] } },
  ],
});

npx playwright install            # download browser engines
npx playwright test               # all projects
npx playwright test --project=webkit
npx playwright test --project=mobile tests/checkout.spec.ts

import { test, expect } from "@playwright/test";

test("shows error when products API fails", async ({ page }) => {
  await page.route("**/api/products", (route) =>
    route.fulfill({ status: 500, body: "Server error" }));
  await page.goto("/products");
  await expect(page.getByRole("alert")).toContainText("Something went wrong");
});

test("shows empty state when there are no orders", async ({ page }) => {
  await page.route("**/api/orders", (route) =>
    route.fulfill({ status: 200, contentType: "application/json", body: "[]" }));
  await page.goto("/orders");
  await expect(page.getByText("You have no orders yet")).toBeVisible();
});

// auth.setup.ts — runs once, saves login state
import { test as setup, expect } from "@playwright/test";

setup("authenticate", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill(process.env.TEST_USER!);
  await page.getByLabel("Password").fill(process.env.TEST_PASS!);
  await page.getByRole("button", { name: "Log in" }).click();
  await expect(page).toHaveURL(/dashboard/);
  await page.context().storageState({ path: "playwright/.auth/user.json" });
});

# Split the suite across 4 CI machines
npx playwright test --shard=1/4
npx playwright test --shard=2/4
npx playwright test --shard=3/4
npx playwright test --shard=4/4
# Each machine runs a quarter of the tests in parallel

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

export default defineConfig({
  testDir: "./tests",
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  use: { baseURL: process.env.BASE_URL, trace: "on-first-retry" },
  projects: [
    { name: "setup", testMatch: /.*\.setup\.ts/ },
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"], storageState: "playwright/.auth/user.json" },
      dependencies: ["setup"],
    },
  ],
});

// fixtures.ts
import { test as base } from "@playwright/test";
import { CartPage } from "./pages/cart-page";

export const test = base.extend<{ cartPage: CartPage }>({
  cartPage: async ({ page }, use) => {
    const cart = new CartPage(page);
    await cart.open();
    await use(cart);
  },
});
export { expect } from "@playwright/test";

node_modules/
test-results/
playwright-report/
playwright/.auth/
.env