Short answer: Cypress centers local debugging on its interactive Test Runner and Command Log. Playwright offers UI Mode for exploring test runs, Inspector for stepping through code and working with locators, and Trace Viewer for investigating saved runs—especially CI failures. Both expose useful evidence; neither is proven universally faster or easier to debug. Choose based on the failures your team needs to diagnose and the evidence it needs to see.
How Cypress debugging works locally
Cypress’s open mode is its interactive local workflow. It runs specs in the Test Runner, renders the application or component under test, and streams commands and hooks into the Command Log. Select a command to inspect its details; hover over it to restore the application state from that moment, or pin it to keep that snapshot visible. Some actions provide before-and-after snapshots, which can help show what changed after a click or input.
The log also records events such as page loads, URL changes, form submissions, and XHR or fetch requests. When a test uses cy.intercept(), stubs, or spies, Cypress provides an instrument panel for inspecting routes, stubs, spies, and function calls. See the Cypress open-mode documentation.
When the command log is not enough
Cypress commands are queued and run later, so a debugger placed after queued commands may not behave like ordinary sequential JavaScript. Cypress documents .debug(), cy.pause(), browser DevTools, and IDE debugging as additional ways to inspect execution. Use the method that matches what you need to examine: the command log for a state around a Cypress action, or a breakpoint and DevTools when you need to inspect JavaScript execution more directly. See the Cypress debugging guide and IDE integration guide.
#1 Best Overall
How Playwright debugging works locally
Playwright has distinct tools for exploring a run and stepping through code. UI Mode is a test-oriented interface for running, watching, filtering, and debugging tests. Launch it with:
npx playwright test --ui
UI Mode includes a timeline for stepping through actions, action details with locators and durations, before-and-after DOM snapshots, source highlighting, error details, browser and test console output, and a Network tab with request and response details. You can inspect DOM snapshots in a separate window. The current UI Mode documentation is published under Playwright’s next documentation; check the documentation for your installed release if an exact feature or interface detail matters.
Use Inspector for stepping and locator work
Playwright Inspector supports stepping through a test, picking or editing locators, and reviewing actionability logs. Start a headed debug session with:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
npx playwright test --debug
Playwright documents a zero default timeout in this debug mode. You can also target a specific test or line, select a configured browser project, or insert page.pause() where you want execution to stop. Playwright also points to its VS Code extension for debugging. See the Playwright debugging documentation.
What evidence can each workflow show?
| Debugging need | Cypress | Playwright |
|---|---|---|
| Inspect application state around an action | Command Log snapshots can restore the application or component state at a command; some actions have before-and-after snapshots. | UI Mode provides a timeline and before-and-after DOM snapshots for actions. |
| Follow test execution and source | Open mode shows commands and hooks; DevTools, .debug(), and cy.pause() provide additional debugging routes. |
UI Mode highlights source; Inspector supports stepping, breakpoints, and locator work. |
| Investigate console and network activity | Command Log records page-level events and XHR/fetch requests; intercepts, stubs, and spies add inspection panels. | UI Mode has browser and test console output and a Network tab with request and response details. |
| Review a run from CI | Cypress describes Test Replay in Cypress Cloud as an interactive replay with network, console, and DOM-snapshot evidence. | Trace Viewer presents a timeline, per-action DOM snapshots, network requests, and more. |
These are documented capabilities, not proof that one product reduces debugging time. A useful comparison is whether the particular failed action leaves the evidence your team needs in the place your developers already inspect.
Diagnosing CI failures and sharing evidence
Playwright: capture and open a trace
Playwright’s best-practices guidance recommends Trace Viewer for CI failures rather than relying only on screenshots or video. The trace can show a timeline, DOM snapshots for actions, network requests, and other run details; it can be opened from the HTML report. The guidance recommends configuring tracing for the first retry on CI and cautions that tracing every test can be performance heavy. Follow the current Playwright best-practices guidance when setting capture policy.
Rank #3
Cypress: inspect a Test Replay
Cypress recommends Test Replay in Cypress Cloud for recorded CI tests. Cypress describes it as an interactive replay of a test as it ran in CI, with network requests, console output, and DOM snapshots; replay links can be shared without handling a local trace file. This workflow involves Cypress Cloud, so confirm that its setup, access, and plan constraints fit your team’s needs. See the Cypress debugging guide and Cypress migration guide.
Which is easier to debug?
There is no documented basis here for a universal winner on speed or ease. The practical choice depends on where your team wants to start and what a typical failure requires you to inspect:
- Start with Cypress if your preferred local workflow is a command log tied to a rendered application, with snapshots at commands and request or spy details alongside the run.
- Start with Playwright UI Mode if you want a test list and timeline with action details, DOM snapshots, source highlighting, console output, and network inspection in one debugging interface.
- Use Playwright Inspector when the investigation calls for stepping through code, adjusting or picking a locator, or inspecting actionability.
- Compare CI evidence separately from local debugging. Check whether you want Playwright traces handled as report artifacts or Cypress Test Replay in Cypress Cloud, and account for capture overhead, retention, access, and sharing in your actual setup.
Before deciding for a whole team, try both workflows against a representative failure from your own CI. Check whether the evidence pinpoints the failed action and whether the process of retaining and sharing it fits your existing workflow.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Common debugging problems and fixes
A Cypress breakpoint does not stop where expected
Cypress commands are queued, so code after a queued command does not necessarily execute in the order ordinary synchronous JavaScript would suggest. Use the Cypress debugging guidance for .debug(), cy.pause(), or browser DevTools rather than assuming a trailing debugger will pause at the point you intended.
A Cypress test is flaky around a changing page
Cypress recommends asserting around required steps and ensuring the network request has completed before asserting on a DOM element that depends on it. Also consider whether a difference between local and CI environments could explain a failure. The debugging guide covers these troubleshooting directions.
A Playwright run needs to pause for inspection
Run the test with npx playwright test --debug to open Inspector and a headed browser, or add page.pause() at the point you want to examine. In debug mode, Playwright documents the default timeout as zero; account for that when interpreting a run that no longer fails under normal timeout conditions.
Recommended Free Tools
A CI failure has only a screenshot or video
For Playwright, configure trace capture in line with its CI guidance and use the HTML report to open Trace Viewer. Avoid assuming that tracing every test is free of runtime impact. For Cypress, investigate whether Test Replay is enabled and available for the recorded run in Cypress Cloud.
Or skip the browser setup
If you need a screenshot of the page under investigation rather than a full test-run trace, ScreenshotNeo offers a one-call screenshot API. The API accepts a URL and returns an image or PDF; see the ScreenshotNeo site and API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
- Cookie banners are accepted and removed before capture, along with supported consent banners, newsletter popups, and chat widgets; each cleanup step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers identify the page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents, including Claude, Cursor, and other MCP clients. - The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to try it with 1,000 screenshots a month and no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
