mirror of
https://github.com/modelcontextprotocol/servers.git
synced 2026-04-28 00:35:16 +02:00
Added Hover and Select Capabliity
This commit is contained in:
@@ -22,12 +22,22 @@ A Model Context Protocol server that provides browser automation capabilities us
|
|||||||
- Click elements on the page
|
- Click elements on the page
|
||||||
- Input: `selector` (string): CSS selector for element to click
|
- Input: `selector` (string): CSS selector for element to click
|
||||||
|
|
||||||
|
- **puppeteer_hover**
|
||||||
|
- Hover elements on the page
|
||||||
|
- Input: `selector` (string): CSS selector for element to hover
|
||||||
|
|
||||||
- **puppeteer_fill**
|
- **puppeteer_fill**
|
||||||
- Fill out input fields
|
- Fill out input fields
|
||||||
- Inputs:
|
- Inputs:
|
||||||
- `selector` (string): CSS selector for input field
|
- `selector` (string): CSS selector for input field
|
||||||
- `value` (string): Value to fill
|
- `value` (string): Value to fill
|
||||||
|
|
||||||
|
- **puppeteer_select**
|
||||||
|
- Select an element with SELECT tag
|
||||||
|
- Inputs:
|
||||||
|
- `selector` (string): CSS selector for element to select
|
||||||
|
- `value` (string): Value to select
|
||||||
|
|
||||||
- **puppeteer_evaluate**
|
- **puppeteer_evaluate**
|
||||||
- Execute JavaScript in the browser console
|
- Execute JavaScript in the browser console
|
||||||
- Input: `script` (string): JavaScript code to execute
|
- Input: `script` (string): JavaScript code to execute
|
||||||
@@ -64,6 +74,7 @@ Here's the Claude Desktop configuration to use the Puppeter server:
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
@@ -64,6 +64,29 @@ const TOOLS: Tool[] = [
|
|||||||
required: ["selector", "value"],
|
required: ["selector", "value"],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "puppeteer_select",
|
||||||
|
description: "Select an element on the page with Select tag",
|
||||||
|
inputSchema: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
selector: { type: "string", description: "CSS selector for element to select" },
|
||||||
|
value: { type: "string", description: "Value to select" },
|
||||||
|
},
|
||||||
|
required: ["selector", "value"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "puppeteer_hover",
|
||||||
|
description: "Hover an element on the page",
|
||||||
|
inputSchema: {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
selector: { type: "string", description: "CSS selector for element to hover" },
|
||||||
|
},
|
||||||
|
required: ["selector"],
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "puppeteer_evaluate",
|
name: "puppeteer_evaluate",
|
||||||
description: "Execute JavaScript in the browser console",
|
description: "Execute JavaScript in the browser console",
|
||||||
@@ -88,7 +111,7 @@ async function ensureBrowser() {
|
|||||||
browser = await puppeteer.launch({ headless: false });
|
browser = await puppeteer.launch({ headless: false });
|
||||||
const pages = await browser.pages();
|
const pages = await browser.pages();
|
||||||
page = pages[0];
|
page = pages[0];
|
||||||
|
|
||||||
page.on("console", (msg) => {
|
page.on("console", (msg) => {
|
||||||
const logEntry = `[${msg.type()}] ${msg.text()}`;
|
const logEntry = `[${msg.type()}] ${msg.text()}`;
|
||||||
consoleLogs.push(logEntry);
|
consoleLogs.push(logEntry);
|
||||||
@@ -122,7 +145,7 @@ async function handleToolCall(name: string, args: any): Promise<{ toolResult: Ca
|
|||||||
const height = args.height ?? 600;
|
const height = args.height ?? 600;
|
||||||
await page.setViewport({ width, height });
|
await page.setViewport({ width, height });
|
||||||
|
|
||||||
const screenshot = await (args.selector ?
|
const screenshot = await (args.selector ?
|
||||||
(await page.$(args.selector))?.screenshot({ encoding: "base64" }) :
|
(await page.$(args.selector))?.screenshot({ encoding: "base64" }) :
|
||||||
page.screenshot({ encoding: "base64", fullPage: false }));
|
page.screenshot({ encoding: "base64", fullPage: false }));
|
||||||
|
|
||||||
@@ -210,12 +233,62 @@ async function handleToolCall(name: string, args: any): Promise<{ toolResult: Ca
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
case "puppeteer_select":
|
||||||
|
try {
|
||||||
|
await page.waitForSelector(args.selector);
|
||||||
|
await page.select(args.selector, args.value);
|
||||||
|
return {
|
||||||
|
toolResult: {
|
||||||
|
content: [{
|
||||||
|
type: "text",
|
||||||
|
text: `Selected ${args.selector} with: ${args.value}`,
|
||||||
|
}],
|
||||||
|
isError: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
toolResult: {
|
||||||
|
content: [{
|
||||||
|
type: "text",
|
||||||
|
text: `Failed to select ${args.selector}: ${(error as Error).message}`,
|
||||||
|
}],
|
||||||
|
isError: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
case "puppeteer_hover":
|
||||||
|
try {
|
||||||
|
await page.waitForSelector(args.selector);
|
||||||
|
await page.hover(args.selector);
|
||||||
|
return {
|
||||||
|
toolResult: {
|
||||||
|
content: [{
|
||||||
|
type: "text",
|
||||||
|
text: `Hovered ${args.selector}`,
|
||||||
|
}],
|
||||||
|
isError: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
return {
|
||||||
|
toolResult: {
|
||||||
|
content: [{
|
||||||
|
type: "text",
|
||||||
|
text: `Failed to hover ${args.selector}: ${(error as Error).message}`,
|
||||||
|
}],
|
||||||
|
isError: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
case "puppeteer_evaluate":
|
case "puppeteer_evaluate":
|
||||||
try {
|
try {
|
||||||
const result = await page.evaluate((script) => {
|
const result = await page.evaluate((script) => {
|
||||||
const logs: string[] = [];
|
const logs: string[] = [];
|
||||||
const originalConsole = { ...console };
|
const originalConsole = { ...console };
|
||||||
|
|
||||||
['log', 'info', 'warn', 'error'].forEach(method => {
|
['log', 'info', 'warn', 'error'].forEach(method => {
|
||||||
(console as any)[method] = (...args: any[]) => {
|
(console as any)[method] = (...args: any[]) => {
|
||||||
logs.push(`[${method}] ${args.join(' ')}`);
|
logs.push(`[${method}] ${args.join(' ')}`);
|
||||||
@@ -301,7 +374,7 @@ server.setRequestHandler(ListResourcesRequestSchema, async () => ({
|
|||||||
|
|
||||||
server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
|
server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
|
||||||
const uri = request.params.uri.toString();
|
const uri = request.params.uri.toString();
|
||||||
|
|
||||||
if (uri === "console://logs") {
|
if (uri === "console://logs") {
|
||||||
return {
|
return {
|
||||||
contents: [{
|
contents: [{
|
||||||
@@ -333,7 +406,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
|
|||||||
tools: TOOLS,
|
tools: TOOLS,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
server.setRequestHandler(CallToolRequestSchema, async (request) =>
|
server.setRequestHandler(CallToolRequestSchema, async (request) =>
|
||||||
handleToolCall(request.params.name, request.params.arguments ?? {})
|
handleToolCall(request.params.name, request.params.arguments ?? {})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user