playwriter
Code Issues

cleanup prompt. shorter. reference resourcse instead

Browse Source
This commit is contained in:
Tommy D. Rossi
2025-12-30 13:37:28 +01:00
parent 77a8877520
commit 1620b662c0
1 changed files with 4 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playwriter/src/prompt.md
+4 -73
View File
@@ -95,82 +95,13 @@ you have access to some functions in addition to playwright methods:
- `page`: the page object to create the session for
- Returns: `{ send(method, params?), on(event, callback), off(event, callback) }`
- Example: `const cdp = await getCDPSession({ page }); const metrics = await cdp.send('Page.getLayoutMetrics');`
- `createDebugger({ cdp })`: creates a Debugger instance for setting breakpoints, stepping, and inspecting variables. Works with browser JS or Node.js (--inspect).
- `cdp`: a CDPSession from `getCDPSession`
- Methods: `enable()`, `setBreakpoint({ file, line, condition? })`, `deleteBreakpoint({ breakpointId })`, `listBreakpoints()`, `listScripts({ search? })`, `evaluate({ expression })`, `inspectLocalVariables()`, `getLocation()`, `stepOver()`, `stepInto()`, `stepOut()`, `resume()`, `isPaused()`, `setXHRBreakpoint({ url })`, `removeXHRBreakpoint({ url })`, `listXHRBreakpoints()`, `setBlackboxPatterns({ patterns })`, `addBlackboxPattern({ pattern })`, `removeBlackboxPattern({ pattern })`, `listBlackboxPatterns()`
- Example:
```js
const cdp = await getCDPSession({ page }); const dbg = createDebugger({ cdp }); await dbg.enable();
console.log(dbg.listScripts({ search: 'app' }));
await dbg.setBreakpoint({ file: 'https://example.com/app.js', line: 42 });
// conditional breakpoint - only pause when userId is 123
await dbg.setBreakpoint({ file: 'app.js', line: 50, condition: 'userId === 123' });
// XHR breakpoint - pause when fetch/XHR URL contains '/api'
await dbg.setXHRBreakpoint({ url: '/api' });
// blackbox framework code when stepping
await dbg.setBlackboxPatterns({ patterns: ['node_modules/'] });
// user triggers the code, then:
if (dbg.isPaused()) { console.log(await dbg.getLocation()); console.log(await dbg.inspectLocalVariables()); await dbg.resume(); }
```
- `createEditor({ cdp })`: creates an Editor instance for viewing and live-editing page scripts and CSS stylesheets. Provides a Claude Code-like interface.
- `cdp`: a CDPSession from `getCDPSession`
- Methods: `enable()`, `list({ pattern? })`, `read({ url, offset?, limit? })`, `edit({ url, oldString, newString, dryRun? })`, `grep({ regex, pattern? })`, `write({ url, content, dryRun? })`
- `pattern` parameter: regex to filter URLs (e.g. `/\.js/` for JS files, `/\.css/` for CSS files)
- Inline scripts get `inline://` URLs, inline styles get `inline-css://` URLs - use grep() to find them by content
- Example:
```js
const cdp = await getCDPSession({ page }); const editor = createEditor({ cdp }); await editor.enable();
// list all scripts and stylesheets
console.log(editor.list());
// list only JS files
console.log(editor.list({ pattern: /\.js/ }));
// list only CSS files
console.log(editor.list({ pattern: /\.css/ }));
// read a script with line numbers (like Claude Code Read tool)
const { content, totalLines } = await editor.read({ url: 'https://example.com/app.js', offset: 0, limit: 50 });
console.log(content);
// edit a script (like Claude Code Edit tool) - exact string replacement
await editor.edit({ url: 'https://example.com/app.js', oldString: 'DEBUG = false', newString: 'DEBUG = true' });
// edit CSS
await editor.edit({ url: 'https://example.com/styles.css', oldString: 'color: red', newString: 'color: blue' });
// search across all scripts (like Grep) - useful for finding inline scripts
const matches = await editor.grep({ regex: /myFunction/ });
if (matches.length > 0) { await editor.edit({ url: matches[0].url, oldString: 'return false', newString: 'return true' }); }
// search only in CSS files
const cssMatches = await editor.grep({ regex: /background-color/, pattern: /\.css/ });
```
- `getStylesForLocator({ locator, includeUserAgentStyles? })`: gets the CSS styles applied to an element, similar to browser DevTools "Styles" panel.
- `locator`: a Playwright Locator for the element to inspect
- `includeUserAgentStyles`: (optional, default: false) include browser default styles
- Returns: `StylesResult` object with:
- `element`: string description of the element (e.g. `div#main.container`)
- `inlineStyle`: object of `{ property: value }` inline styles, or null
- `rules`: array of CSS rules that apply to this element, each with:
- `selector`: the CSS selector that matched
- `source`: `{ url, line, column }` location in the stylesheet, or null
- `origin`: `"regular"` | `"user-agent"` | `"injected"` | `"inspector"`
- `declarations`: object of `{ property: value }` (values include `!important` if applicable)
- `inheritedFrom`: element description if inherited (e.g. `body`), or null for direct matches
- Example:
```js
const loc = page.locator('.my-button');
const styles = await getStylesForLocator({ locator: loc });
console.log(formatStylesAsText(styles));
```
- `formatStylesAsText(styles)`: formats a `StylesResult` object as human-readable text. Use this to display styles in a readable format.
- `createDebugger({ cdp })`: creates a Debugger instance for setting breakpoints, stepping, and inspecting variables. Read the `playwriter://debugger-api` resource for full API docs and examples.
- `createEditor({ cdp })`: creates an Editor instance for viewing and live-editing page scripts and CSS stylesheets. Read the `playwriter://editor-api` resource for full API docs and examples.
- `getStylesForLocator({ locator })`: gets the CSS styles applied to an element, similar to browser DevTools "Styles" panel. Read the `playwriter://styles-api` resource for full API docs and examples.
- `getReactSource({ locator })`: gets the React component source location (file, line, column) for an element.
- `locator`: a Playwright Locator or ElementHandle for the element to inspect
- Returns: `{ fileName, lineNumber, columnNumber, componentName }` or `null` if not found
- **Important**: Only works on **local dev servers** (localhost with Vite, Next.js, CRA in dev mode). Production builds strip source info. The JSX transform must have `development: true` to include `_debugSource`.
- Example:
```js
const loc = page.locator('.my-component');
const source = await getReactSource({ locator: loc });
if (source) {
console.log(`Component: ${source.componentName}`);
console.log(`File: ${source.fileName}:${source.lineNumber}:${source.columnNumber}`);
}
```
- **Important**: Only works on **local dev servers** (localhost with Vite, Next.js, CRA in dev mode). Production builds strip source info.
example: