Can Playwright test components in isolation?

Playwright component testing mounts a component directly in a real browser instead of navigating through the whole application. It gives you the browser engine, locators and assertions of Playwright with a much smaller surface than a full page.

import { test, expect } from "@playwright/experimental-ct-react";
import { Button } from "../../src/components/Button";

test("shows a loading label", async ({ mount }) => {
  const component = await mount(<Button loading>Save</Button>);

  await expect(component).toContainText("Saving...");
  await expect(component).toBeDisabled();
});

How it fits

• Requires the experimental component-testing package for your framework
• Uses a separate config, commonly playwright-ct.config.ts
• Supports React, Vue, Svelte and Solid through framework-specific packages
• Runs in Chromium, Firefox or WebKit with the normal locator API
• Is still marked experimental, so check the current documentation before adopting it widely

Component tests are a good fit for interactive widgets with complex internal state: a combobox, a date picker or a data grid. They are a poor fit for things that only make sense with routing, authentication and a real backend. For pure rendering and logic, a fast unit or browser-mode test may still be cheaper.