Playwright / Quiz
Component Tests at the Browser Edge
Place mounted component tests correctly between isolated unit checks and complete end-to-end journeys.
- Difficulty
- Medium
- Format
- Quiz
- Points
- 150
- Estimate
- 8 min
// MISSION BRIEF
Your Mission
A team is adding Playwright component tests beside its end-to-end suite. Inspect real mount calls and boundaries, then decide what this layer proves and what it still cannot replace.
// FIRST CONTACT
Battle teaser
Review this React component test: import { test, expect } from "@playwright/experimental-ct-react"; test("emits save", async ({ mount }) => { let saved = false; const component = await mount(<Editor onSave={() => { saved = true; }} />); await component.getByRole("button", { name: "Save" }).click(); expect(saved).toBeTruthy(); }); What is running where?
- AEverything runs in jsdom, so browser layout and events are simulated
- BThe mount fixture belongs to ordinary @playwright/test with no component package
- CThe test code runs in Node.js, while the mounted component renders and receives real browser interactions in a browser page
- DThe component runs on the production server and mount deploys it first
Answers, scoring, hints, and the full battle stay sealed.
// SKILL TAGS
playwright-componentsmounttest-pyramidplaywright