2025-04-16 15:21:45 -07:00
|
|
|
/**
|
|
|
|
|
* Copyright (c) Microsoft Corporation.
|
|
|
|
|
*
|
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
|
*
|
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
*
|
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
|
* limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
2025-04-30 23:06:56 +02:00
|
|
|
import { test, expect } from './fixtures.js';
|
2025-04-16 15:21:45 -07:00
|
|
|
import fs from 'fs/promises';
|
2025-05-02 10:57:31 +02:00
|
|
|
import path from 'path';
|
2025-04-16 15:21:45 -07:00
|
|
|
|
2025-05-07 18:04:20 +02:00
|
|
|
test('browser_file_upload', async ({ client, localOutputPath }) => {
|
2025-04-16 15:21:45 -07:00
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_navigate',
|
|
|
|
|
arguments: {
|
|
|
|
|
url: 'data:text/html,<html><title>Title</title><input type="file" /><button>Button</button></html>',
|
|
|
|
|
},
|
2025-04-22 16:04:50 -07:00
|
|
|
})).toContainTextContent(`
|
|
|
|
|
\`\`\`yaml
|
2025-05-02 16:10:48 -07:00
|
|
|
- button "Choose File" [ref=s1e3]
|
|
|
|
|
- button "Button" [ref=s1e4]
|
2025-04-22 16:04:50 -07:00
|
|
|
\`\`\``);
|
2025-04-16 15:21:45 -07:00
|
|
|
|
2025-04-29 18:48:52 +02:00
|
|
|
{
|
|
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_file_upload',
|
|
|
|
|
arguments: { paths: [] },
|
|
|
|
|
})).toHaveTextContent(`
|
|
|
|
|
The tool "browser_file_upload" can only be used when there is related modal state present.
|
|
|
|
|
### Modal state
|
|
|
|
|
- There is no modal state present
|
|
|
|
|
`.trim());
|
|
|
|
|
}
|
|
|
|
|
|
2025-04-16 15:21:45 -07:00
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_click',
|
|
|
|
|
arguments: {
|
|
|
|
|
element: 'Textbox',
|
|
|
|
|
ref: 's1e3',
|
|
|
|
|
},
|
|
|
|
|
})).toContainTextContent(`### Modal state
|
|
|
|
|
- [File chooser]: can be handled by the "browser_file_upload" tool`);
|
|
|
|
|
|
2025-05-07 18:04:20 +02:00
|
|
|
const filePath = localOutputPath('test.txt');
|
2025-04-16 15:21:45 -07:00
|
|
|
await fs.writeFile(filePath, 'Hello, world!');
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
const response = await client.callTool({
|
|
|
|
|
name: 'browser_file_upload',
|
|
|
|
|
arguments: {
|
|
|
|
|
paths: [filePath],
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(response).not.toContainTextContent('### Modal state');
|
2025-04-22 16:04:50 -07:00
|
|
|
expect(response).toContainTextContent(`
|
|
|
|
|
\`\`\`yaml
|
2025-05-02 16:10:48 -07:00
|
|
|
- button "Choose File" [ref=s3e3]
|
|
|
|
|
- button "Button" [ref=s3e4]
|
2025-04-22 16:04:50 -07:00
|
|
|
\`\`\``);
|
2025-04-16 15:21:45 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
const response = await client.callTool({
|
|
|
|
|
name: 'browser_click',
|
|
|
|
|
arguments: {
|
|
|
|
|
element: 'Textbox',
|
|
|
|
|
ref: 's3e3',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(response).toContainTextContent('- [File chooser]: can be handled by the \"browser_file_upload\" tool');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
const response = await client.callTool({
|
|
|
|
|
name: 'browser_click',
|
|
|
|
|
arguments: {
|
|
|
|
|
element: 'Button',
|
|
|
|
|
ref: 's4e4',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(response).toContainTextContent(`Tool "browser_click" does not handle the modal state.
|
|
|
|
|
### Modal state
|
|
|
|
|
- [File chooser]: can be handled by the "browser_file_upload" tool`);
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-05-02 10:57:31 +02:00
|
|
|
|
2025-05-07 18:04:20 +02:00
|
|
|
test('clicking on download link emits download', async ({ startClient, localOutputPath }) => {
|
|
|
|
|
const outputDir = localOutputPath('output');
|
2025-05-02 10:57:31 +02:00
|
|
|
const client = await startClient({
|
|
|
|
|
config: { outputDir },
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_navigate',
|
|
|
|
|
arguments: {
|
|
|
|
|
url: 'data:text/html,<a href="data:text/plain,Hello world!" download="test.txt">Download</a>',
|
|
|
|
|
},
|
|
|
|
|
})).toContainTextContent('- link "Download" [ref=s1e3]');
|
2025-05-02 19:58:48 +02:00
|
|
|
await client.callTool({
|
2025-05-02 10:57:31 +02:00
|
|
|
name: 'browser_click',
|
|
|
|
|
arguments: {
|
|
|
|
|
element: 'Download link',
|
|
|
|
|
ref: 's1e3',
|
|
|
|
|
},
|
2025-05-02 19:58:48 +02:00
|
|
|
});
|
|
|
|
|
await expect.poll(() => client.callTool({ name: 'browser_snapshot', arguments: {} })).toContainTextContent(`
|
2025-05-02 10:57:31 +02:00
|
|
|
### Downloads
|
2025-05-02 19:58:48 +02:00
|
|
|
- Downloaded file test.txt to ${path.join(outputDir, 'test.txt')}`);
|
2025-05-02 10:57:31 +02:00
|
|
|
});
|
2025-05-07 12:47:45 +02:00
|
|
|
|
|
|
|
|
test('navigating to download link emits download', async ({ client, server, mcpBrowser }) => {
|
|
|
|
|
test.skip(mcpBrowser === 'webkit' && process.platform === 'linux', 'https://github.com/microsoft/playwright/blob/8e08fdb52c27bb75de9bf87627bf740fadab2122/tests/library/download.spec.ts#L436');
|
|
|
|
|
server.route('/download', (req, res) => {
|
|
|
|
|
res.writeHead(200, {
|
|
|
|
|
'Content-Type': 'text/plain',
|
|
|
|
|
'Content-Disposition': 'attachment; filename=test.txt',
|
|
|
|
|
});
|
|
|
|
|
res.end('Hello world!');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_navigate',
|
|
|
|
|
arguments: {
|
|
|
|
|
url: server.PREFIX + '/download',
|
|
|
|
|
},
|
|
|
|
|
})).toContainTextContent('### Downloads');
|
|
|
|
|
});
|
