fix(browse): dispatch a change event after fill for change-only validators

Playwright's Locator.fill() dispatches `input` but never `change`, so
frameworks that validate on change (AngularJS ng-change, debounced
strength/match checks) never saw the filled value — correct in the DOM,
failing the framework's own validation. `browse fill` now dispatches
`change` after the fill. Failing-first regression test with a
change-only password-match fixture included.

Contributed by @intelliot (PR #2475).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-08-14 20:20:59 -07:00
co-authored by Claude Fable 5
parent 0572125a5b
commit 65b577f133
3 changed files with 96 additions and 5 deletions
+8 -5
View File
@@ -377,11 +377,14 @@ export async function handleWriteCommand(
const value = valueParts.join(' ');
if (!selector || !value) throw new Error('Usage: browse fill <selector> <value>');
const resolved = await session.resolveRef(selector);
if ('locator' in resolved) {
await resolved.locator.fill(value, { timeout: 5000 });
} else {
await target.locator(resolved.selector).fill(value, { timeout: 5000 });
}
const locator = 'locator' in resolved ? resolved.locator : target.locator(resolved.selector);
await locator.fill(value, { timeout: 5000 });
// Playwright's fill() only dispatches an `input` event. Frameworks that
// validate on `change` (AngularJS ng-change, debounced strength/match
// checks — e.g. cPanel's Jupiter theme) never see the update, so a value
// that's correct in the DOM can still fail the framework's own
// validation. Dispatch `change` too so those listeners fire.
await locator.dispatchEvent('change');
// Wait for network to settle (form validation XHRs)
await page.waitForLoadState('networkidle', { timeout: 2000 }).catch(() => {});
return `Filled ${selector}`;