1"use strict";(self.webpackChunkplaywright_dev=self.webpackChunkplaywright_dev||[]).push([["1232"],{100(e,s,n){n.r(s),n.d(s,{metadata:()=>t,default:()=>h,frontMatter:()=>i,contentTitle:()=>r,toc:()=>d,assets:()=>o});var t=JSON.parse('{"id":"introduction","title":"Introduction","description":"A command-line interface for browser automation designed for coding agents. Token-efficient commands and installable skills let agents balance browser automation with large codebases and reasoning within limited context windows.","source":"@site/agent-cli/introduction.mdx","sourceDirName":".","slug":"/introduction","permalink":"/agent-cli/introduction","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Introduction"},"sidebar":"agentCli","next":{"title":"Installation","permalink":"/agent-cli/installation"}}'),l=n(74848),a=n(28453);let i={title:"Introduction"},r="Playwright CLI",o={},d=[{value:"Example",id:"example",level:2},{value:"Key Features",id:"key-features",level:2},{value:"Playwright CLI vs MCP",id:"playwright-cli-vs-mcp",level:2},{value:"All Commands",id:"all-commands",level:2},{value:"Core",id:"core",level:3},{value:"Navigation",id:"navigation",level:3},{value:"Keyboard",id:"keyboard",level:3},{value:"Mouse",id:"mouse",level:3},{value:"Save as",id:"save-as",level:3},{value:"Tabs",id:"tabs",level:3},{value:"Storage",id:"storage",level:3},{value:"Network",id:"network",level:3},{value:"DevTools",id:"devtools",level:3},{value:"Install",id:"install",level:3},{value:"Browser sessions",id:"browser-sessions",level:3},{value:"Global options",id:"global-options",level:3}];function c(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,a.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s.header,{children:(0,l.jsx)(s.h1,{id:"playwright-cli",children:"Playwright CLI"})}),"\n",(0,l.jsx)(s.p,{children:"A command-line interface for browser automation designed for coding agents. Token-efficient commands and installable skills let agents balance browser automation with large codebases and reasoning within limited context windows."}),"\n",(0,l.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:'$ playwright-cli open https://demo.playwright.dev/todomvc --headed\n$ playwright-cli type "Buy groceries"\n$ playwright-cli press Enter\n$ playwright-cli type "Water flowers"\n$ playwright-cli press Enter\n$ playwright-cli check e21\n$ playwright-cli screenshot\n'})}),"\n",(0,l.jsx)(s.p,{children:"After each command, the CLI outputs the current page state:"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-txt",children:"### Page\n- Page URL: https://demo.playwright.dev/todomvc/#/\n- Page Title: React - TodoMVC\n### Snapshot\n- [Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)\n"})}),"\n",(0,l.jsx)(s.p,{children:"The snapshot file contains the accessibility tree with element refs for the next command."}),"\n",(0,l.jsx)(s.h2,{id:"key-features",children:"Key Features"}),"\n",(0,l.jsxs)(s.ul,{children:["\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Token-efficient"})," \u2014 concise CLI output avoids loading large tool schemas into the model context"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Skill-based"})," \u2014 agents discover capabilities through installable skills rather than verbose help text"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Daemon architecture"})," \u2014 persistent browser process means no startup cost per command"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Ref-based"})," \u2014 accessibility snapshots with element refs for deterministic interaction"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Cross-browser"})," \u2014 Chrome, Firefox, WebKit, and Edge support"]}),"\n",(0,l.jsxs)(s.li,{children:[(0,l.jsx)(s.strong,{children:"Sessions"})," \u2014 multiple isolated browser instances with separate state"]}),"\n"]}),"\n",(0,l.jsx)(s.h2,{id:"playwright-cli-vs-mcp",children:"Playwright CLI vs MCP"}),"\n",(0,l.jsxs)(s.table,{children:[(0,l.jsx)(s.thead,{children:(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.th,{}),(0,l.jsx)(s.th,{children:(0,l.jsx)(s.strong,{children:"Playwright CLI"})}),(0,l.jsx)(s.th,{children:(0,l.jsx)(s.strong,{children:(0,l.jsx)(s.a,{href:"/mcp/introduction",children:"MCP"})})})]})}),(0,l.jsxs)(s.tbody,{children:[(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(s.strong,{children:"Best for"})}),(0,l.jsx)(s.td,{children:"Coding agents (Claude Code, Copilot) working with large codebase
1s"}),(0,l.jsx)(s.td,{children:"Specialized agentic loops, exploratory automation"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(s.strong,{children:"How it works"})}),(0,l.jsx)(s.td,{children:"Agent runs shell commands"}),(0,l.jsx)(s.td,{children:"LLM calls MCP tools with structured parameters"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(s.strong,{children:"Token cost"})}),(0,l.jsx)(s.td,{children:"Lower \u2014 concise CLI output, skills loaded on demand"}),(0,l.jsx)(s.td,{children:"Higher \u2014 tool schemas + snapshots in context"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(s.strong,{children:"Default mode"})}),(0,l.jsx)(s.td,{children:"Headless"}),(0,l.jsx)(s.td,{children:"Headed"})]}),(0,l.jsxs)(s.tr,{children:[(0,l.jsx)(s.td,{children:(0,l.jsx)(s.strong,{children:"Setup"})}),(0,l.jsx)(s.td,{children:(0,l.jsx)(s.code,{children:"npm install -g @playwright/cli"})}),(0,l.jsx)(s.td,{children:"JSON config in MCP client"})]})]})]}),"\n",(0,l.jsx)(s.h2,{id:"all-commands",children:"All Commands"}),"\n",(0,l.jsxs)(s.p,{children:["Run ",(0,l.jsx)(s.code,{children:"playwright-cli --help"})," for the built-in listing, or ",(0,l.jsx)(s.code,{children:"playwright-cli --help <command>"})," for a\nsingle command's arguments and options."]}),"\n",(0,l.jsx)(s.h3,{id:"core",children:"Core"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"open [url] attach [name] close\ndetach goto <url> type <text>\nclick <target> [button] dblclick <target> [button] fill <target> <text>\ndrag <start> <end> drop <target> hover <target>\nselect <target> <val> upload <files...> check <target>\nuncheck <target> snapshot [target] find [text]\neval <func> [target] dialog-accept [prompt] dialog-dismiss\nresize <w> <h> delete-data\n"})}),"\n",(0,l.jsx)(s.h3,{id:"navigation",children:"Navigation"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"go-back go-forward reload\n"})}),"\n",(0,l.jsx)(s.h3,{id:"keyboard",children:"Keyboard"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"press <key> keydown <key> keyup <key>\n"})}),"\n",(0,l.jsx)(s.h3,{id:"mouse",children:"Mouse"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"mousemove <x> <y> mousedown [button] mouseup [button]\nmousewheel <dx> <dy>\n"})}),"\n",(0,l.jsx)(s.h3,{id:"save-as",children:"Save as"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"screenshot [target] pdf\n"})}),"\n",(0,l.jsx)(s.h3,{id:"tabs",children:"Tabs"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"tab-list tab-new [url] tab-close [index]\ntab-select <index>\n"})}),"\n",(0,l.jsx)(s.h3,{id:"storage",children:"Storage"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"state-load <file> state-save [file]\ncookie-list cookie-get <name> cookie-set <name> <val>\ncookie-delete <name> cookie-clear\nlocalstorage-list localstorage-get <key> localstorage-set <k> <v>\nlocalstorage-delete <key> localstorage-clear\nsessionstorage-list sessionstorage-get <key> sessionstorage-set <k> <v>\nsessionstorage-delete <k> sessionstorage-clear\n"})}),"\n",(0,l.jsx)(s.h3,{id:"network",children:"Network"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"requests request <index> request-headers <index>\nrequest-body <index> response-headers <index> response-body <index>\nroute <pattern> route-list unroute [pattern]\nnetwork-state-set <state>\n"})}),"\n",(0,l.jsx)(s.h3,{id:"devtools",children:"DevTools"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"console [min-level] run-code [code] recording-start\nrecording-stop tracing-start tracing-stop\nvideo-start [file] video-stop video-chapter <title>\nvideo-show-actions video-hide-actions show\npause-at <location> resume step-over\ngenerate-locator <target> highlight [target]\n"})}),"\n",(0,l.jsx)(s.h3,{id:"install",children:"Install"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"install install-browser [browser]\n"})}),"\n",(0,l.jsx)(s.h3,{id:"browser-sessions",children:"Browser sessions"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"-s=<name> <cmd> list close-all\nkill-all\n"})}),"\n",(0,l.jsx)(s.h3,{id:"global-options",children:"Global options"}),"\n",(0,l.jsx)(s.pre,{children:(0,l.jsx)(s.code,{className:"language-bash",children:"--help [command] --json --raw\n--version\n"})})]})}function h(e={}){let{wrapper:s}={...(0,a.R)(),...e.components};return s?(0,l.jsx)(s,{...e,children:(0,l.jsx)(c,{...e})}):c(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.