diff --git a/src/__tests__/tools/browser/interaction.test.ts b/src/__tests__/tools/browser/interaction.test.ts index 2fd3406..32f0c6c 100644 --- a/src/__tests__/tools/browser/interaction.test.ts +++ b/src/__tests__/tools/browser/interaction.test.ts @@ -291,7 +291,7 @@ describe('Browser Interaction Tools', () => { const result = await uploadFileTool.execute(args, mockContext); - expect(mockPageWaitForSelector).toHaveBeenCalledWith('#file-input'); + expect(mockPageWaitForSelector).toHaveBeenCalledWith('#file-input', {"state": "attached"}); expect(mockPageSetInputFiles).toHaveBeenCalledWith('#file-input', '/tmp/testfile.txt'); expect(result.isError).toBe(false); expect(result.content[0].text).toContain("Uploaded file '/tmp/testfile.txt' to '#file-input'"); diff --git a/src/tools/browser/interaction.ts b/src/tools/browser/interaction.ts index 6a687cd..5175375 100644 --- a/src/tools/browser/interaction.ts +++ b/src/tools/browser/interaction.ts @@ -137,14 +137,34 @@ export class HoverTool extends BrowserToolBase { * Tool for uploading files */ export class UploadFileTool extends BrowserToolBase { - /** - * Execute the upload file tool - */ async execute(args: any, context: ToolContext): Promise { return this.safeExecute(context, async (page) => { - await page.waitForSelector(args.selector); - await page.setInputFiles(args.selector, args.filePath); - return createSuccessResponse(`Uploaded file '${args.filePath}' to '${args.selector}'`); + await page.waitForSelector(args.selector, { state: 'attached' }); + + // Only make the input visible if it is currently display:none + await page.evaluate((selector) => { + const el = document.querySelector(selector) as HTMLElement | null; + if (el) { + const style = window.getComputedStyle(el); + if (style.display === 'none') { + el.setAttribute('data-upload-temp-visible', 'true'); + el.style.display = 'block'; + } + } + }, args.selector); + + await page.setInputFiles(args.selector, args.filePath); + + // Make the input invisible again only if we made it visible + await page.evaluate((selector) => { + const el = document.querySelector(selector) as HTMLElement | null; + if (el && el.getAttribute('data-upload-temp-visible') === 'true') { + el.style.display = 'none'; + el.removeAttribute('data-upload-temp-visible'); + } + }, args.selector); + + return createSuccessResponse(`Uploaded file '${args.filePath}' to '${args.selector}'`); }); } }