https://playwright.dev/assets/js/6f7da9be.4c4a37a3.js

1"use strict";(self.webpackChunkplaywright_dev=self.webpackChunkplaywright_dev||[]).push([["1868"],{94145(e,t,n){n.r(t),n.d(t,{metadata:()=>i,default:()=>o,frontMatter:()=>r,contentTitle:()=>l,toc:()=>h,assets:()=>c});var i=JSON.parse('{"id":"commands/test-debugging","title":"Test Debugging","description":"Use the CLI to debug Playwright test failures interactively.","source":"@site/agent-cli/commands/test-debugging.mdx","sourceDirName":"commands","slug":"/commands/test-debugging","permalink":"/agent-cli/commands/test-debugging","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Test Debugging"},"sidebar":"agentCli","previous":{"title":"Tracing","permalink":"/agent-cli/commands/tracing"},"next":{"title":"Video Recording","permalink":"/agent-cli/commands/video-recording"}}'),s=n(74848),a=n(28453);let r={title:"Test Debugging"},l="Test Debugging",c={},h=[{value:"Connecting to a paused test",id:"connecting-to-a-paused-test",level:2},{value:"Exploring the page",id:"exploring-the-page",level:2},{value:"Controlling execution",id:"controlling-execution",level:2},{value:"Reading the generated code",id:"reading-the-generated-code",level:2},{value:"Workflow: investigating a flaky test",id:"workflow-investigating-a-flaky-test",level:2}];function d(e){let t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"test-debugging",children:"Test Debugging"})}),"\n",(0,s.jsx)(t.p,{children:"Use the CLI to debug Playwright test failures interactively."}),"\n",(0,s.jsx)(t.h2,{id:"connecting-to-a-paused-test",children:"Connecting to a paused test"}),"\n",(0,s.jsxs)(t.p,{children:["Run the test with ",(0,s.jsx)(t.code,{children:"--debug=cli"}),". Do it in the background \u2014 the test stays paused and holds the\nbrowser open while you work."]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"PLAYWRIGHT_HTML_OPEN=never npx playwright test tests/checkout.spec.ts --debug=cli\n"})}),"\n",(0,s.jsx)(t.p,{children:"The test pauses at the start and prints the session name to attach to:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-txt",children:'### The test is currently paused at the start\n\n### Debugging Instructions\n- Run "playwright-cli attach tw-a3f19c" to attach to this test\n'})}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"playwright-cli attach tw-a3f19c\n"})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.code,{children:"PLAYWRIGHT_HTML_OPEN=never"})," keeps the HTML report from popping open when the run finishes."]}),"\n",(0,s.jsx)(t.h2,{id:"exploring-the-page",children:"Exploring the page"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:'playwright-cli snapshot                 # see current state\nplaywright-cli find "Place order"       # locate one element on a big page\nplaywright-cli console error            # check for errors\nplaywright-cli requests --filter="/api/"\nplaywright-cli eval "() => document.title"\nplaywright-cli screenshot --filename=debug-state.png\n'})}),"\n",(0,s.jsx)(t.h2,{id:"controlling-execution",children:"Controlling execution"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Command"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"resume"})}),(0,s.jsx)(t.td,{children:"Continue running"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"step-over"})}),(0,s.jsx)(t.td,{children:"Step over the next call in the test"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.code,{children:"pause-at <file>:<line>"})}),(0,s.jsx)(t.td,{children:"Run up to a location and pause there"})]})]})]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"playwright-cli pause-at checkout.spec.ts:42\nplaywright-cli step-over\nplaywright-cli resume\n"})}),"\n",(0,s.jsxs)(t.p,{children:["Because the test is paused at the very start, ",(0,s.jsx)(t.code,{children:"pause-at"})," is usually the fastest way in: jump\nstraight to the line where the problem is most likely to be."]}),"\n",(0,s.jsx)(t.h2,{id:"reading-the-generated-code",children:"Reading the generated code"}),"\n",(0,s.jsxs)(t.p,{children:["Every ",(0,s.jsx)(t.code,{children:"playwright-cli"})," action prints the equivalent Playwright TypeScript. That is the fix you paste\nback 

1into the test \u2014 most of the time a locator or an expectation needs updating, but it can also be\na genuine bug in the app. See ",(0,s.jsx)(t.a,{href:"/agent-cli/commands/codegen",children:"Codegen & Highlighting"}),"."]}),"\n",(0,s.jsx)(t.h2,{id:"workflow-investigating-a-flaky-test",children:"Workflow: investigating a flaky test"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-bash",children:"# 1. Run the failing test in the background\nPLAYWRIGHT_HTML_OPEN=never npx playwright test tests/checkout.spec.ts --debug=cli\n\n# 2. Connect\nplaywright-cli attach tw-a3f19c\n\n# 3. Record a trace\nplaywright-cli tracing-start\n\n# 4. Run to the suspect line\nplaywright-cli pause-at tests/checkout.spec.ts:42\nplaywright-cli snapshot\nplaywright-cli console\nplaywright-cli requests\n\n# 5. Investigate at the failing step\nplaywright-cli screenshot --filename=before-failure.png\nplaywright-cli eval \"() => document.querySelector('.spinner')?.style.display\"\n\n# 6. Save trace, then stop the background test run and re-run it\nplaywright-cli tracing-stop\n"})}),"\n",(0,s.jsx)(t.p,{children:"Stop the background test run once you are done, then re-run the test to confirm the fix."})]})}function o(e={}){let{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);