# Debugging Failures — Playwright & Cypress

Source: https://www.skillbyai.com/en/e2e-testing/r-debug

> Traces, UI mode and time-travel.

## Tools for finding out what happened

**Playwright**: the **trace viewer** records each action with DOM snapshots, console logs, network requests and source; enable it with `trace: 'on-first-retry'` (or `'retain-on-failure'`) and open it with `npx playwright show-trace` or from the HTML report. **UI mode** (`--ui`) offers watch mode and a time-travel view locally; `--debug` opens the inspector to step through actions; `screenshot` and `video` options capture failures. **Cypress**: the interactive runner keeps a **command log** with time-travel snapshots for every command, and you can use the browser DevTools directly because tests run in the browser; `cy.pause()` and `.debug()` stop execution. In `cypress run`, screenshots are taken on failure automatically, and video recording is configurable (off by default in recent versions; check the docs for your version).

## Debugging switches

Config and CLI for both tools.

```typescript
// playwright.config.ts (excerpt)
use: {
  trace: 'on-first-retry',
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
},
// CLI:
//   npx playwright test --ui
//   npx playwright test tests/cart.spec.ts --debug
//   npx playwright show-trace test-results/<test-folder>/trace.zip

// cypress.config.ts (excerpt)
export default defineConfig({
  video: true,                     // record videos in cypress run
  screenshotOnRunFailure: true,
  e2e: { baseUrl: 'http://localhost:3000' },
});
// in a test: cy.get('[data-cy=cart]').debug(); cy.pause();
```

## A flight recorder

A trace is the black box of a test run: when something crashes, you replay every step with what the screen, console and network looked like at that moment.

## Read the first failure, not the last

A timeout on the final assertion is often a symptom. Step back through the trace or command log to the first action whose result was not what you expected.

**Quiz:** What does `trace: 'on-first-retry'` do in Playwright?

- [x] Records a trace when a failed test is retried, for later inspection
- [ ] Records traces for every passing test
- [ ] Retries tests forever
- [ ] Disables screenshots

*Answer:* Records a trace when a failed test is retried, for later inspection. Traces cost time, so record them when they help.