Phase 2: Enhanced browser — dialog handling, upload, state checks, snapshots

- CircularBuffer O(1) ring buffer for console/network/dialog (was O(n) array+shift)
- Async buffer flush with Bun.write() (was appendFileSync)
- Dialog auto-accept/dismiss with buffer + prompt text support
- File upload command (upload <sel> <file...>)
- Element state checks (is visible/hidden/enabled/disabled/checked/editable/focused)
- Annotated screenshots with ref labels overlaid (-a flag)
- Snapshot diffing against previous snapshot (-D flag)
- Cursor-interactive element scan for non-ARIA clickables (-C flag)
- Snapshot scoping depth limit (-d N flag)
- Health check with page.evaluate + 2s timeout
- Playwright error wrapping — actionable messages for AI agents
- Fix useragent — context recreation preserves cookies/storage/URLs
- wait --networkidle / --load / --domcontentloaded flags
- console --errors filter (error + warning only)
- cookie-import <json-file> with auto-fill domain from page URL
- 166 integration tests (was ~63)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-12 13:33:43 -07:00
parent 3d901066cd
commit f3ebd0adbf
16 changed files with 2007 additions and 157 deletions

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page - Cursor Interactive</title>
<style>
.clickable-div { cursor: pointer; padding: 10px; border: 1px solid #ccc; }
.hover-card { cursor: pointer; padding: 20px; background: #f0f0f0; }
</style>
</head>
<body>
<h1>Cursor Interactive Test</h1>
<!-- These are NOT standard interactive elements but have cursor:pointer -->
<div class="clickable-div" id="click-div" onclick="this.textContent = 'clicked!'">Click me (div)</div>
<span class="hover-card" id="hover-span">Hover card (span)</span>
<div tabindex="0" id="focusable-div">Focusable div</div>
<div onclick="alert('hi')" id="onclick-div">Onclick div</div>
<!-- Standard interactive element (should NOT appear in -C output) -->
<button id="normal-btn">Normal Button</button>
<a href="/test">Normal Link</a>
</body>
</html>

15
browse/test/fixtures/dialog.html vendored Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page - Dialog</title>
</head>
<body>
<h1>Dialog Test</h1>
<button id="alert-btn" onclick="alert('Hello from alert')">Alert</button>
<button id="confirm-btn" onclick="document.getElementById('confirm-result').textContent = confirm('Are you sure?') ? 'confirmed' : 'cancelled'">Confirm</button>
<button id="prompt-btn" onclick="document.getElementById('prompt-result').textContent = prompt('Enter name:', 'default') || 'null'">Prompt</button>
<p id="confirm-result"></p>
<p id="prompt-result"></p>
</body>
</html>

2
browse/test/fixtures/empty.html vendored Normal file
View File

@@ -0,0 +1,2 @@
<!DOCTYPE html>
<html><body></body></html>

17
browse/test/fixtures/states.html vendored Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page - Element States</title>
</head>
<body>
<h1>Element States Test</h1>
<input type="text" id="enabled-input" value="enabled" />
<input type="text" id="disabled-input" value="disabled" disabled />
<input type="checkbox" id="checked-box" checked />
<input type="checkbox" id="unchecked-box" />
<div id="visible-div">Visible</div>
<div id="hidden-div" style="display: none;">Hidden</div>
<input type="text" id="readonly-input" readonly value="readonly" />
</body>
</html>

25
browse/test/fixtures/upload.html vendored Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page - Upload</title>
</head>
<body>
<h1>Upload Test</h1>
<input type="file" id="file-input" />
<input type="file" id="multi-input" multiple />
<p id="upload-result"></p>
<script>
document.getElementById('file-input').addEventListener('change', function(e) {
const files = e.target.files;
const names = Array.from(files).map(f => f.name).join(', ');
document.getElementById('upload-result').textContent = 'Uploaded: ' + names;
});
document.getElementById('multi-input').addEventListener('change', function(e) {
const files = e.target.files;
const names = Array.from(files).map(f => f.name).join(', ');
document.getElementById('upload-result').textContent = 'Multi: ' + names;
});
</script>
</body>
</html>