{"slug": "debug-playwright-failures-and-run-history-without-leaving-vs-code", "title": "Debug Playwright failures and run history without leaving VS Code", "summary": "A developer released Playwright Logbook for VS Code, an extension that surfaces run history and failure evidence collected by the open-source playwright-logbook reporter directly inside the editor. The extension walks users from recent runs through run overview, test details, attempts and history to source, and can prepare a failure-analysis task for a coding assistant chat. It requires VS Code 1.95+, Node.js 20+ and Playwright 1.42+, and works only in local workspaces.", "body_md": "You have a failure open in the Playwright HTML report. You read the exception, switch to your editor to inspect the code, then return to the report to check another attempt or earlier result.\n\nI wanted to make that investigation easier to do where the code already is.\n\n**Playwright Logbook for VS Code** brings the Logbook investigation workflow into the IDE: **Recent Runs → run overview → test details → attempts and history → source**. **Analyze with AI** also prepares a failure-analysis task for your chosen coding assistant chat.\n\nThe open-source Logbook reporter saves the run evidence and history; the extension brings those records beside your code. New to the reporter? Start with [A Playwright reporter that remembers your runs and briefs your coding assistant](https://dev.to/krishnapollu/a-playwright-reporter-that-remembers-your-runs-and-briefs-your-coding-assistant-52ao).\n\n**Open Logbook:** [🧩 VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=krishnapollu.playwright-logbook-vscode) · [📦 Reporter on npm](https://www.npmjs.com/package/playwright-logbook) · [⭐ GitHub repository](https://github.com/krishnapollu/playwright-logbook)\n\nUse the reporter to collect your usual local runs. Then browse their summaries, inspect errors and available diagnostics, compare recorded executions, and open source without repeatedly switching between the report and editor.\n\nInstall the extension:\n\n```\ncode --install-extension krishnapollu.playwright-logbook-vscode\n```\n\nOr search for **Playwright Logbook**, publisher **krishnapollu**, in VS Code.\n\nThe extension reads history collected by the Logbook reporter. Add that reporter to your existing project:\n\n```\nnpm install --save-dev playwright-logbook\njs\n// playwright.config.ts\nimport { defineConfig } from '@playwright/test';\n\nexport default defineConfig({\n  reporter: [\n    ['list'],\n    // Opt-in: capture steps, output tails and eligible image previews.\n    ['playwright-logbook', { captureDetails: true }],\n  ],\n  use: {\n    screenshot: 'only-on-failure',\n    trace: 'on-first-retry',\n  },\n});\n```\n\n`captureDetails` defaults to `false`; this example opts in to extra diagnostics. `trace: 'on-first-retry'` captures a trace only when a first retry occurs—it does not enable retries. Keep your existing retry policy, or use `--retries=1` when trying this on a demo suite.\n\n```\nnpx playwright test\n```\n\nOpen **Logbook** in the activity bar. Keep `.logbook/runs/` and `.logbook/index.jsonl` between runs so you have history to inspect.\n\nIf your Playwright project lives in a subfolder, set the history and source paths first (see **A couple of setup details worth getting right** below).\n\nThe extension supports desktop VS Code **1.95+** on macOS, Windows and Linux in **local workspaces only** (no Remote SSH, containers or browser-based VS Code). The reporter requires Node.js 20+ and Playwright 1.42+.\n\nThe native **Recent Runs** sidebar is your starting point. Expand a saved run to see its results or choose **Run overview** when you need the whole-run picture.\n\n*Click any screenshot to inspect the original image at full resolution.*\n\n*The native tree keeps the run and its recorded results within reach while you work in VS Code.*\n\nThe overview shows recorded outcome totals, project breakdowns, a clickable cases list and run-level errors when recorded. Select a case to investigate it; the sidebar search action helps find a test in a larger run.\n\nYou can review a saved run without executing the suite again.\n\n*The selected `pw-test` run has 16 passes, two deliberate failures and two skips; the cases list links into individual results.*\n\nUse the live filter to narrow saved runs and results by test name, spec path, project, status, branch, commit or other recorded metadata. **Search older runs** extends the loaded history; **Clear** resets the filter.\n\nYou can also start from your code: right-click a spec or test file in Explorer to filter to that file, or right-click inside a test and choose **Logbook: Filter This Test**. The sidebar then shows the relevant runs and results.\n\n*Filter directly from the test you are inspecting in the editor.*\n\nSelect a test to see its recorded outcome, error, assertion details and source excerpt. The test view keeps the available **Steps**, **Logs**, **Errors** and **Attachments** close to its attempts and execution history.\n\nUse **Open failure location** to inspect the relevant code, then return to the same result to review the diagnostic. You can also open the recorded test definition. Historical line numbers may have moved in your current checkout.\n\nThat matters when an initial attempt fails but a retry succeeds. The final outcome is useful, but the earlier diagnostic may tell you what to investigate next.\n\n`captureDetails: true` enables optional diagnostic capture for new runs. Eligible bounded PNG/JPEG images can be previewed; missing capture data stays unavailable. Existing runs cannot acquire evidence retrospectively.\n\n*A deliberate assertion failure keeps its code frame, retry summary, source actions and matching test history together.*\n\n**Analyze with AI** prepares an unsent task in your chosen assistant chat, so you can ask for analysis without assembling the context by hand. Review the task and evidence for secrets before submitting.\n\nThe task points to saved failure context: the selected execution, errors, attempts, captured steps and output, attachment references, matching history, and a bounded excerpt of current test source when available. The prompt asks for a concise analysis with a likely cause, supporting evidence and next steps. Current source may differ from the recorded run, and missing diagnostics remain missing.\n\nIn the current release, supported handoffs include native VS Code Chat, Codex, Antigravity, Amazon Q and Cline. Analysis requires **Workspace Trust** and access to your chosen assistant. If an assistant's input integration is unsupported, Logbook reports it so you can choose another.\n\nLogbook prepares the handoff; it does not submit the request or read the answer. Submitting sends the task, and any evidence the assistant reads, to that assistant and whichever model provider it uses, under that tool’s settings and policies. Text filtering does not guarantee that every secret is removed and cannot remove secrets visible in screenshots.\n\n*The action sits beside the source controls. Its arrow changes the saved assistant choice.*\n\nThe **History** panel lets you select another recorded execution of the matching test/project or compare it with the selected result.\n\nThe comparison brings together outcomes, available errors, attempts and labeled durations, so you can inspect the difference between two recorded executions within the test workflow. Recorded branch and commit information supplies context when present.\n\nStart with an earlier local run of the same test. A useful comparison might reveal that the final outcome stayed failed but the recorded error changed, or that a pass required more attempts. Those are observations to investigate, rather than an automatic diagnosis.\n\nThe useful question becomes more specific:\n\nDid the same test fail in an earlier execution, and how do the recorded attempts and errors differ?\n\nHistory is limited to available records and the selected scope. Matching error text does not establish a shared root cause, and one successful retry does not prove a test is now reliable.\n\n*Two executions of the same `pw-test` case both failed with the same recorded message. The comparison still exposes their run identities, attempts and durations.*\n\nWhen recorded revisions are available locally, the comparison shows a committed test-file diff beside the recorded outcome changes. Open either revision’s source or choose **View full file diff** for the native Git diff. Git actions require Workspace Trust and local Git.\n\nNo fetch or checkout is performed. A recorded commit shows committed content; it cannot reconstruct uncommitted changes that were present during execution. The extension keeps that limitation visible rather than presenting code changes as a confirmed failure cause.\n\n*Recorded outcome changes and committed assertion edits appear together, with actions to open the full diff or either revision’s source.*\n\nThe same workflow can also include a recorded CI execution. With reporter **0.3.0+**, export a saved run as a portable bundle and download it locally:\n\nIn CI, after the run is saved and after merging shards if your jobs are sharded:\n\n```\nnpx playwright-logbook export \\\n  --artifacts \\\n  --out ci-investigation.logbook.zip \\\n  --project-id checkout-tests\n```\n\nAfter downloading the bundle:\n\nImported results join local history when test and project identities match; branch scope still applies. Duplicate/conflicting records are checked. Renamed tests are not automatically reconciled.\n\nThis is a local, reviewed import. The extension does not automatically download CI artifacts. For sharded jobs, merge the run before exporting its bundle.\n\n*The review reports what the bundle would add before import. This example has zero new runs, one identical run and six missing or omitted artifact references; the capture was taken without completing the import.*\n\nIf your Playwright project is nested inside a repository, map the history and source roots:\n\n```\n{\n  \"logbook.historyPath\": \"e2e/.logbook\",\n  \"logbook.sourceRoot\": \"e2e\"\n}\n```\n\nSelect the history folder containing `index.jsonl` and `runs/`, not just the HTML report.\n\nImported trace/video files can retain their evidence and metadata, but embedded trace viewing and video playback are not available. Full screen-reader validation is ongoing.\n\nKeep using Playwright's official extension to run, generate and debug tests, and its Trace Viewer for detailed execution inspection. Logbook adds a saved-history investigation workflow and an optional handoff to your coding assistant. You review and submit the AI task in that assistant’s chat.\n\nYou can try it on a small suite first: collect a few runs, inspect an earlier failure, and see whether the trip from evidence to source is easier.\n\nTry Logbook on a suite you already investigate. Which part would help most: clearer exceptions and attempts, run triage, history, or a better handoff to your coding assistant? Share your thoughts, feature ideas or experience in the comments, or [open an issue](https://github.com/krishnapollu/playwright-logbook/issues). If it helps your workflow, a [⭐ on GitHub](https://github.com/krishnapollu/playwright-logbook) helps other Playwright users find it.\n\n**Topics:** #testautomation · #devtools · #opensource · #ai · #playwright · #reporting · #debugging · #playwright-logbook", "url": "https://wpnews.pro/news/debug-playwright-failures-and-run-history-without-leaving-vs-code", "canonical_source": "https://dev.to/krishnapollu/debug-playwright-failures-and-run-history-without-leaving-vs-code-4915", "published_at": "2026-10-07 19:04:17+00:00", "updated_at": "2026-10-07 19:18:06.749426+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools"], "entities": ["Playwright Logbook", "VS Code", "playwright-logbook", "Playwright", "Node.js", "krishnapollu"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/debug-playwright-failures-and-run-history-without-leaving-vs-code", "markdown": "https://wpnews.pro/news/debug-playwright-failures-and-run-history-without-leaving-vs-code.md", "text": "https://wpnews.pro/news/debug-playwright-failures-and-run-history-without-leaving-vs-code.txt", "jsonld": "https://wpnews.pro/news/debug-playwright-failures-and-run-history-without-leaving-vs-code.jsonld"}}