Playwright Network Interception and Trace Viewer
Two features that most cheat sheets skip but that save more debugging time than any other Playwright capability: page.route() for network interception and the built-in trace viewer.
“Generates standard Playwright files you can inspect, modify, and run in any CI pipeline.”
Open-source test automation
1. Network Interception with page.route()
Playwright's page.route() lets you intercept any network request and return a custom response. This is incredibly powerful for testing edge cases that are difficult or impossible to reproduce with a live backend: 500 errors, timeout scenarios, malformed JSON responses, and rate limiting behavior.
Unlike external mocking libraries, page.route() works at the browser level so the application code behaves exactly as it would with a real network response. The frontend error handling, retry logic, and user-facing error messages all execute naturally. You are testing the real application behavior, not a simulated version of it.
2. Testing Error States and Slow Responses
Being able to mock a 500 response on a specific endpoint and verify your app handles it gracefully is something you cannot easily do with manual testing. In practice, most applications have poor error handling because nobody tests it systematically. Network interception makes error state testing as easy as happy path testing.
Slow response simulation is equally valuable. You can add artificial delay to specific routes and verify that loading states appear correctly, that the UI does not freeze, and that timeout handling works as expected. These tests catch real user-facing issues that only surface under poor network conditions, which are common on mobile and in regions with slower connectivity.
Generate tests with network awareness
Assrt produces Playwright tests that understand your app's API patterns. Open-source, zero lock-in.
Get Started →3. The Trace Viewer for CI Failures
When a test fails in CI, you typically get a stack trace and maybe a screenshot. The Playwright trace viewer gives you a full recording of what happened: every network call, every DOM change, every user action, with timestamps. You can replay the exact sequence that caused the failure without reproducing it locally.
This alone cuts debugging time for CI failures by more than half. Instead of guessing what state the application was in when the test failed, you can see it directly. The trace shows whether the API returned unexpected data, whether an element was hidden behind an overlay, or whether a race condition caused elements to render in the wrong order.
4. Selector Best Practices: getByRole Over CSS
The selector strategy you choose determines how much maintenance your tests need. Teams that default to CSS selectors out of habit spend far more time fixing broken tests than teams using getByRole and getByText. A test that clicks getByRole('button', { name: 'Submit' }) keeps working when someone changes the button class or wraps it in a new div. A test targeting button.submit-btn breaks on the next refactor.
Switching selector strategy from CSS to role-based locators reduced test maintenance by about 40% in teams that tracked the change. The initial conversion takes effort, but the ongoing maintenance savings compound over time as the application evolves and the tests continue working without updates.
5. Combining Features for Robust Tests
The most effective Playwright tests combine network interception for controlling test conditions, role-based selectors for resilient element targeting, and trace recording for diagnosable failures. This combination produces tests that are reliable in CI, easy to debug when they fail, and resistant to UI changes that do not affect behavior.
Tools like Assrt can generate tests that follow these best practices automatically, choosing role-based selectors by default and structuring tests around real user flows. Even if you write tests manually, adopting these three patterns as team conventions will significantly reduce the maintenance burden of your test suite over time.
Ready to automate your testing?
Assrt discovers test scenarios, writes Playwright tests, and self-heals when your UI changes.