2025-04-03 19:24:17 -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-03 22:39:55 -07:00
|
|
|
import { chromium } from 'playwright';
|
|
|
|
|
|
2025-04-30 23:06:56 +02:00
|
|
|
import { test, expect } from './fixtures.js';
|
2025-04-03 19:24:17 -07:00
|
|
|
|
|
|
|
|
import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
|
|
|
|
|
|
|
|
|
|
async function createTab(client: Client, title: string, body: string) {
|
|
|
|
|
return await client.callTool({
|
2025-04-04 15:22:00 -07:00
|
|
|
name: 'browser_tab_new',
|
2025-04-03 19:24:17 -07:00
|
|
|
arguments: {
|
|
|
|
|
url: `data:text/html,<title>${title}</title><body>${body}</body>`,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2025-04-17 00:58:02 -07:00
|
|
|
test('list initial tabs', async ({ client }) => {
|
|
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_tab_list',
|
|
|
|
|
})).toHaveTextContent(`### Open tabs
|
|
|
|
|
- 1: (current) [] (about:blank)`);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('list first tab', async ({ client }) => {
|
|
|
|
|
await createTab(client, 'Tab one', 'Body one');
|
|
|
|
|
expect(await client.callTool({
|
|
|
|
|
name: 'browser_tab_list',
|
|
|
|
|
})).toHaveTextContent(`### Open tabs
|
|
|
|
|
- 1: [] (about:blank)
|
|
|
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)`);
|
|
|
|
|
});
|
|
|
|
|
|
2025-04-03 19:24:17 -07:00
|
|
|
test('create new tab', async ({ client }) => {
|
|
|
|
|
expect(await createTab(client, 'Tab one', 'Body one')).toHaveTextContent(`
|
2025-04-16 17:18:40 +02:00
|
|
|
- Ran Playwright code:
|
2025-04-15 12:54:45 -07:00
|
|
|
\`\`\`js
|
|
|
|
|
// <internal code to open a new tab>
|
|
|
|
|
\`\`\`
|
|
|
|
|
|
|
|
|
|
### Open tabs
|
2025-04-03 22:39:55 -07:00
|
|
|
- 1: [] (about:blank)
|
|
|
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
|
|
|
|
2025-04-15 12:54:45 -07:00
|
|
|
### Current tab
|
2025-04-03 19:24:17 -07:00
|
|
|
- Page URL: data:text/html,<title>Tab one</title><body>Body one</body>
|
|
|
|
|
- Page Title: Tab one
|
|
|
|
|
- Page Snapshot
|
|
|
|
|
\`\`\`yaml
|
2025-05-09 18:01:17 -07:00
|
|
|
- generic [ref=e1]: Body one
|
2025-04-03 19:24:17 -07:00
|
|
|
\`\`\``);
|
|
|
|
|
|
|
|
|
|
expect(await createTab(client, 'Tab two', 'Body two')).toHaveTextContent(`
|
2025-04-16 17:18:40 +02:00
|
|
|
- Ran Playwright code:
|
2025-04-15 12:54:45 -07:00
|
|
|
\`\`\`js
|
|
|
|
|
// <internal code to open a new tab>
|
|
|
|
|
\`\`\`
|
|
|
|
|
|
|
|
|
|
### Open tabs
|
2025-04-03 22:39:55 -07:00
|
|
|
- 1: [] (about:blank)
|
|
|
|
|
- 2: [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
|
|
|
- 3: (current) [Tab two] (data:text/html,<title>Tab two</title><body>Body two</body>)
|
2025-04-03 19:24:17 -07:00
|
|
|
|
2025-04-15 12:54:45 -07:00
|
|
|
### Current tab
|
2025-04-03 19:24:17 -07:00
|
|
|
- Page URL: data:text/html,<title>Tab two</title><body>Body two</body>
|
|
|
|
|
- Page Title: Tab two
|
|
|
|
|
- Page Snapshot
|
|
|
|
|
\`\`\`yaml
|
2025-05-09 18:01:17 -07:00
|
|
|
- generic [ref=e1]: Body two
|
2025-04-03 19:24:17 -07:00
|
|
|
\`\`\``);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('select tab', async ({ client }) => {
|
|
|
|
|
await createTab(client, 'Tab one', 'Body one');
|
|
|
|
|
await createTab(client, 'Tab two', 'Body two');
|
|
|
|
|
expect(await client.callTool({
|
2025-04-04 15:22:00 -07:00
|
|
|
name: 'browser_tab_select',
|
2025-04-03 19:24:17 -07:00
|
|
|
arguments: {
|
2025-04-03 22:39:55 -07:00
|
|
|
index: 2,
|
2025-04-03 19:24:17 -07:00
|
|
|
},
|
|
|
|
|
})).toHaveTextContent(`
|
2025-04-16 17:18:40 +02:00
|
|
|
- Ran Playwright code:
|
2025-04-15 12:54:45 -07:00
|
|
|
\`\`\`js
|
|
|
|
|
// <internal code to select tab 2>
|
|
|
|
|
\`\`\`
|
|
|
|
|
|
|
|
|
|
### Open tabs
|
2025-04-03 22:39:55 -07:00
|
|
|
- 1: [] (about:blank)
|
|
|
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
|
|
|
- 3: [Tab two] (data:text/html,<title>Tab two</title><body>Body two</body>)
|
2025-04-03 19:24:17 -07:00
|
|
|
|
2025-04-15 12:54:45 -07:00
|
|
|
### Current tab
|
2025-04-03 19:24:17 -07:00
|
|
|
- Page URL: data:text/html,<title>Tab one</title><body>Body one</body>
|
|
|
|
|
- Page Title: Tab one
|
|
|
|
|
- Page Snapshot
|
|
|
|
|
\`\`\`yaml
|
2025-05-09 18:01:17 -07:00
|
|
|
- generic [ref=e1]: Body one
|
2025-04-03 19:24:17 -07:00
|
|
|
\`\`\``);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('close tab', async ({ client }) => {
|
|
|
|
|
await createTab(client, 'Tab one', 'Body one');
|
|
|
|
|
await createTab(client, 'Tab two', 'Body two');
|
|
|
|
|
expect(await client.callTool({
|
2025-04-04 15:22:00 -07:00
|
|
|
name: 'browser_tab_close',
|
2025-04-03 19:24:17 -07:00
|
|
|
arguments: {
|
2025-04-03 22:39:55 -07:00
|
|
|
index: 3,
|
2025-04-03 19:24:17 -07:00
|
|
|
},
|
|
|
|
|
})).toHaveTextContent(`
|
2025-04-16 17:18:40 +02:00
|
|
|
- Ran Playwright code:
|
2025-04-15 12:54:45 -07:00
|
|
|
\`\`\`js
|
|
|
|
|
// <internal code to close tab 3>
|
|
|
|
|
\`\`\`
|
|
|
|
|
|
|
|
|
|
### Open tabs
|
2025-04-03 22:39:55 -07:00
|
|
|
- 1: [] (about:blank)
|
|
|
|
|
- 2: (current) [Tab one] (data:text/html,<title>Tab one</title><body>Body one</body>)
|
|
|
|
|
|
2025-04-15 12:54:45 -07:00
|
|
|
### Current tab
|
2025-04-03 19:24:17 -07:00
|
|
|
- Page URL: data:text/html,<title>Tab one</title><body>Body one</body>
|
|
|
|
|
- Page Title: Tab one
|
|
|
|
|
- Page Snapshot
|
|
|
|
|
\`\`\`yaml
|
2025-05-09 18:01:17 -07:00
|
|
|
- generic [ref=e1]: Body one
|
2025-04-03 19:24:17 -07:00
|
|
|
\`\`\``);
|
|
|
|
|
});
|
2025-04-03 22:39:55 -07:00
|
|
|
|
2025-05-08 17:02:09 -07:00
|
|
|
test('reuse first tab when navigating', async ({ startClient, cdpEndpoint, server }) => {
|
|
|
|
|
server.setContent('/', `<title>Title</title><body>Body</body>`, 'text/html');
|
|
|
|
|
|
2025-05-02 15:32:37 +02:00
|
|
|
const browser = await chromium.connectOverCDP(await cdpEndpoint());
|
2025-04-03 22:39:55 -07:00
|
|
|
const [context] = browser.contexts();
|
|
|
|
|
const pages = context.pages();
|
|
|
|
|
|
2025-05-02 15:32:37 +02:00
|
|
|
const client = await startClient({ args: [`--cdp-endpoint=${await cdpEndpoint()}`] });
|
2025-04-03 22:39:55 -07:00
|
|
|
await client.callTool({
|
|
|
|
|
name: 'browser_navigate',
|
2025-05-08 17:02:09 -07:00
|
|
|
arguments: { url: server.PREFIX },
|
2025-04-03 22:39:55 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
expect(pages.length).toBe(1);
|
|
|
|
|
expect(await pages[0].title()).toBe('Title');
|
|
|
|
|
});
|
