mask selector not working within an open dialog #1616
Description
Environment Information
Stagehand:
Language/SDK: TypeScript
Stagehand version: 3.0.7
Issue Description
Masking selectors are not working within an open dialog component. As in, there is a dialog that has been opened with .showModal().
It does not matter if the selector targets the input exactly using an ID.
Seems to be something related to how the browser moves this into the #top-layer pseudo element...
Repro
import { $ } from 'bun';
import * as fs from 'fs/promises';
import { Stagehand } from '@browserbasehq/stagehand';
const stagehand = new Stagehand({
env: 'LOCAL',
});
await stagehand.init();
let page = stagehand.context.pages()[0];
if (!page) throw new Error('Expected browser page');
const sensitiveSelectors = [
'#dialog-input'
];
// Define the HTML we'll serve
const html = `
<!DOCTYPE html>
<html><head><title>Agent Mask Test</title>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById('dialog').showModal();
});
</script>
</head><body>
<h2>Testing Masked Input</h2>
<dialog id="dialog">
<input id="dialog-input" readonly value="input in dialog" />
</dialog>
</body></html>
`;
const port = 6789;
const localhostUrl = `http://127.0.0.1:${port}/`;
const server = Bun.serve({
port,
fetch(req) {
return new Response(html, {
headers: { "Content-Type": "text/html" }
});
}
});
console.log(`Test server running at ${localhostUrl}`);
const oldScreenshot = page.screenshot;
page.screenshot = async function (options?: Parameters<typeof page.screenshot>[0]) {
console.log('screenshot');
options ??= {};
options.mask = sensitiveSelectors.map((s) => page.locator(s));
const screenshot = await oldScreenshot.call(this, options);
await fs.writeFile('screenshot.png', screenshot);
return screenshot;
};
await page.goto(localhostUrl);
await page.screenshot();
await stagehand.close();
await server.stop();