compare_snapshots
Compare two page state snapshots to detect differences and verify state changes after browser actions. Supports text or DOM comparison modes.
Instructions
Compare two page state snapshots (from browser_snapshot or read_page_html) and return the differences. Use this to verify state changes after an action.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| before | Yes | First snapshot string (captured before action) | |
| after | Yes | Second snapshot string (captured after action) | |
| mode | No | Comparison mode: text (line-by-line) or dom (element-level) | text |
Implementation Reference
- src/tools/accessibility.ts:75-122 (handler)The handler function for the compare_snapshots tool. It accepts 'before' and 'after' snapshot strings and an optional 'mode' ('dom' or 'text', default 'text'). In 'dom' mode, it compares HTML tags. In 'text' mode, it performs line-by-line diff.
server.tool( 'compare_snapshots', 'Compare two page state snapshots (from browser_snapshot or read_page_html) and return the differences. Use this to verify state changes after an action.', { before: z.string().describe('First snapshot string (captured before action)'), after: z.string().describe('Second snapshot string (captured after action)'), mode: z.enum(['dom', 'text']).optional().default('text').describe('Comparison mode: text (line-by-line) or dom (element-level)'), }, async ({ before, after, mode }) => { if (mode === 'dom') { // Simple DOM diff approach: compare tag sequences const beforeTags: string[] = before.match(/<[^>]+>/g) || []; const afterTags: string[] = after.match(/<[^>]+>/g) || []; const added = afterTags.filter((t) => !beforeTags.includes(t)); const removed = beforeTags.filter((t) => !afterTags.includes(t)); return { content: [{ type: 'text', text: `DOM Diff:\nAdded (${added.length}):\n${added.slice(0, 50).join('\n')}\n\nRemoved (${removed.length}):\n${removed.slice(0, 50).join('\n')}`, }], }; } // Text mode: line-by-line diff const beforeLines = before.split('\n'); const afterLines = after.split('\n'); const changes: string[] = []; const maxLen = Math.max(beforeLines.length, afterLines.length); for (let i = 0; i < maxLen; i++) { if (beforeLines[i] !== afterLines[i]) { if (beforeLines[i] === undefined) { changes.push(`+ ${afterLines[i]}`); } else if (afterLines[i] === undefined) { changes.push(`- ${beforeLines[i]}`); } else { changes.push(`- ${beforeLines[i]}`); changes.push(`+ ${afterLines[i]}`); } } } return { content: [{ type: 'text', text: `Text Diff (${changes.length} changes):\n${changes.slice(0, 200).join('\n')}`, }], }; } ); - src/tools/accessibility.ts:78-82 (schema)Input schema for compare_snapshots tool: 'before' (string), 'after' (string), and optional 'mode' (enum 'dom'|'text', default 'text').
{ before: z.string().describe('First snapshot string (captured before action)'), after: z.string().describe('Second snapshot string (captured after action)'), mode: z.enum(['dom', 'text']).optional().default('text').describe('Comparison mode: text (line-by-line) or dom (element-level)'), }, - src/tools/accessibility.ts:75-122 (registration)The tool is registered via server.tool('compare_snapshots', ...) inside registerAccessibilityTools() at line 75 of accessibility.ts.
server.tool( 'compare_snapshots', 'Compare two page state snapshots (from browser_snapshot or read_page_html) and return the differences. Use this to verify state changes after an action.', { before: z.string().describe('First snapshot string (captured before action)'), after: z.string().describe('Second snapshot string (captured after action)'), mode: z.enum(['dom', 'text']).optional().default('text').describe('Comparison mode: text (line-by-line) or dom (element-level)'), }, async ({ before, after, mode }) => { if (mode === 'dom') { // Simple DOM diff approach: compare tag sequences const beforeTags: string[] = before.match(/<[^>]+>/g) || []; const afterTags: string[] = after.match(/<[^>]+>/g) || []; const added = afterTags.filter((t) => !beforeTags.includes(t)); const removed = beforeTags.filter((t) => !afterTags.includes(t)); return { content: [{ type: 'text', text: `DOM Diff:\nAdded (${added.length}):\n${added.slice(0, 50).join('\n')}\n\nRemoved (${removed.length}):\n${removed.slice(0, 50).join('\n')}`, }], }; } // Text mode: line-by-line diff const beforeLines = before.split('\n'); const afterLines = after.split('\n'); const changes: string[] = []; const maxLen = Math.max(beforeLines.length, afterLines.length); for (let i = 0; i < maxLen; i++) { if (beforeLines[i] !== afterLines[i]) { if (beforeLines[i] === undefined) { changes.push(`+ ${afterLines[i]}`); } else if (afterLines[i] === undefined) { changes.push(`- ${beforeLines[i]}`); } else { changes.push(`- ${beforeLines[i]}`); changes.push(`+ ${afterLines[i]}`); } } } return { content: [{ type: 'text', text: `Text Diff (${changes.length} changes):\n${changes.slice(0, 200).join('\n')}`, }], }; } ); - src/tools/index.ts:45-45 (registration)registerAccessibilityTools is called from registerAllTools() in the tools index, which wires it into the MCP server.
registerAccessibilityTools(server, bridge);