Playwright API Testing: Why Your API and UI Tests Should Live Together

Playwright API testing allows you to perform real HTTP requests, mock responses, and verify server-side state after UI actions using the same framework, project configuration, and test suite you use for UI tests. This eliminates the need for separate tools, test runners, and context-switching between UI and API suites, which often become out of sync. By treating API testing as part of the same discipline as UI testing, you can improve coverage, feedback, and CI costs.

Traditionally, teams split API and UI test suites across different tools like Postman or REST clients for APIs and Playwright or Selenium for UI. This split incurs costs such as duplicated setup for authentication, base URLs, and test data creation, leading to discrepancies over time. UI tests confirm that a button click looks successful, while API tests confirm the endpoint works in isolation. However, neither validates that the button click actually triggers the correct backend call with the proper payload.

One solution to this problem is to use Playwright, which provides the same API-testing primitives for both pure API tests and UI tests that need backend validation. By configuring a base URL and headers once in the playwright.config.ts file, every test gets a ready-to-use request fixture. Tests can then send HTTP requests, mock responses, and validate the resulting server-side state after UI actions, ensuring that backend validation is included in UI tests. This approach also enables faster setup, easier debugging, and a more cohesive testing process.