Playwright's rich toolset for end-to-end and component testing includes a powerful trace viewer, UI mode debugger, and CI sharding. Test your knowledge of Playwright's key features.
0 / 5 completed
1 / 5
What is Playwright's UI mode (npx playwright test --ui) primarily used for?
Playwright UI mode opens a GUI where you can see all your tests in a tree, run them individually, and inspect execution step-by-step with a built-in time-travel trace. Each step shows the DOM state, network requests, and console logs at that moment — making it much faster to debug flaky or failing tests than reading log output.
2 / 5
In Playwright's trace viewer, what information is captured for each test action?
Playwright traces capture a complete recording: DOM snapshots before and after each action, network requests with responses, console messages, and screenshots. When a test fails in CI, you download the trace ZIP and open it in playwright show-report or trace.playwright.dev to replay the test step-by-step without re-running it.
3 / 5
What is Playwright's component testing feature used for?
Playwright component testing mounts individual components (React, Vue, Svelte) into a real browser page within a lightweight Vite dev server. You write tests using mount() and Playwright's locators, getting real browser behaviour (events, CSS, layout) for component-level tests — bridging the gap between unit and E2E tests.
4 / 5
What does test sharding in Playwright do to speed up CI?
Sharding splits your test suite into N equal slices, each run on a separate CI machine. You run npx playwright test --shard=1/4 on machine 1, --shard=2/4 on machine 2, etc. The total wall-clock time drops proportionally, and you use merge-reports to combine results into one report afterward.
5 / 5
What does Playwright's codegen tool (npx playwright codegen) generate?
Codegen opens a browser and records your clicks, typing, and navigation as Playwright test code in real time. It uses Playwright's intelligent selector strategies (roles, text, test IDs) rather than brittle CSS selectors, producing tests that are more resilient to markup changes. It's an excellent starting point for writing E2E tests for existing flows.