From 85c85bd2fbf1a3cc332d5dd5916090591b23b30c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=81=8C=E3=81=A9=E3=82=89?= <61941819+ogadra@users.noreply.github.com> Date: Fri, 9 May 2025 03:04:18 +0900 Subject: [PATCH] chore: support custom filename in screenshot function (#349) --- README.md | 4 ++- src/tools/pdf.ts | 10 ++++-- src/tools/snapshot.ts | 3 +- tests/pdf.spec.ts | 37 +++++++++++++++++++++ tests/screenshot.spec.ts | 72 +++++++++++++++++++++++++++++++++++++--- 5 files changed, 116 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index cf57dd7..18c84a8 100644 --- a/README.md +++ b/README.md @@ -341,6 +341,7 @@ X Y coordinate space, based on the provided screenshot. - Description: Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions. - Parameters: - `raw` (boolean, optional): Whether to return without compression (in PNG format). Default is false, which returns a JPEG image. + - `filename` (string, optional): File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified. - `element` (string, optional): Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too. - `ref` (string, optional): Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too. - Read-only: **true** @@ -501,7 +502,8 @@ X Y coordinate space, based on the provided screenshot. - **browser_pdf_save** - Title: Save as PDF - Description: Save page as PDF - - Parameters: None + - Parameters: + - `filename` (string, optional): File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified. - Read-only: **true** ### Utilities diff --git a/src/tools/pdf.ts b/src/tools/pdf.ts index ff2465b..c020f03 100644 --- a/src/tools/pdf.ts +++ b/src/tools/pdf.ts @@ -20,6 +20,10 @@ import { defineTool } from './tool.js'; import * as javascript from '../javascript.js'; import { outputFile } from '../config.js'; +const pdfSchema = z.object({ + filename: z.string().optional().describe('File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.'), +}); + const pdf = defineTool({ capability: 'pdf', @@ -27,13 +31,13 @@ const pdf = defineTool({ name: 'browser_pdf_save', title: 'Save as PDF', description: 'Save page as PDF', - inputSchema: z.object({}), + inputSchema: pdfSchema, type: 'readOnly', }, - handle: async context => { + handle: async (context, params) => { const tab = context.currentTabOrDie(); - const fileName = await outputFile(context.config, `page-${new Date().toISOString()}.pdf`); + const fileName = await outputFile(context.config, params.filename ?? `page-${new Date().toISOString()}.pdf`); const code = [ `// Save page as ${fileName}`, diff --git a/src/tools/snapshot.ts b/src/tools/snapshot.ts index 410d2f9..e6a2d66 100644 --- a/src/tools/snapshot.ts +++ b/src/tools/snapshot.ts @@ -220,6 +220,7 @@ const selectOption = defineTool({ const screenshotSchema = z.object({ raw: z.boolean().optional().describe('Whether to return without compression (in PNG format). Default is false, which returns a JPEG image.'), + filename: z.string().optional().describe('File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified.'), element: z.string().optional().describe('Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.'), ref: z.string().optional().describe('Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.'), }).refine(data => { @@ -243,7 +244,7 @@ const screenshot = defineTool({ const tab = context.currentTabOrDie(); const snapshot = tab.snapshotOrDie(); const fileType = params.raw ? 'png' : 'jpeg'; - const fileName = await outputFile(context.config, `page-${new Date().toISOString()}.${fileType}`); + const fileName = await outputFile(context.config, params.filename ?? `page-${new Date().toISOString()}.${fileType}`); const options: playwright.PageScreenshotOptions = { type: fileType, quality: fileType === 'png' ? undefined : 50, scale: 'css', path: fileName }; const isElementScreenshot = params.element && params.ref; diff --git a/tests/pdf.spec.ts b/tests/pdf.spec.ts index dd9cd8d..dbccbfa 100644 --- a/tests/pdf.spec.ts +++ b/tests/pdf.spec.ts @@ -14,6 +14,8 @@ * limitations under the License. */ +import fs from 'fs'; + import { test, expect } from './fixtures.js'; test('save as pdf unavailable', async ({ startClient }) => { @@ -45,3 +47,38 @@ test('save as pdf', async ({ client, mcpBrowser }) => { }); expect(response).toHaveTextContent(/Save page as.*page-[^:]+.pdf/); }); + +test('save as pdf (filename: output.pdf)', async ({ startClient, mcpBrowser }, testInfo) => { + test.skip(!!mcpBrowser && !['chromium', 'chrome', 'msedge'].includes(mcpBrowser), 'Save as PDF is only supported in Chromium.'); + const outputDir = testInfo.outputPath('output'); + const client = await startClient({ + config: { outputDir }, + }); + + expect(await client.callTool({ + name: 'browser_navigate', + arguments: { + url: 'data:text/html,TitleHello, world!', + }, + })).toContainTextContent(`- generic [ref=s1e2]: Hello, world!`); + + expect(await client.callTool({ + name: 'browser_pdf_save', + arguments: { + filename: 'output.pdf', + }, + })).toEqual({ + content: [ + { + type: 'text', + text: expect.stringContaining(`output.pdf`), + }, + ], + }); + + const files = [...fs.readdirSync(outputDir)]; + + expect(fs.existsSync(outputDir)).toBeTruthy(); + expect(files).toHaveLength(1); + expect(files[0]).toMatch(/^output.pdf$/); +}); diff --git a/tests/screenshot.spec.ts b/tests/screenshot.spec.ts index 8f25dd9..66a5e34 100644 --- a/tests/screenshot.spec.ts +++ b/tests/screenshot.spec.ts @@ -94,9 +94,54 @@ test('--output-dir should work', async ({ startClient, localOutputPath }) => { expect([...fs.readdirSync(outputDir)]).toHaveLength(1); }); +for (const raw of [undefined, true]) { + test(`browser_take_screenshot (raw: ${raw})`, async ({ startClient }, testInfo) => { + const ext = raw ? 'png' : 'jpeg'; + const outputDir = testInfo.outputPath('output'); + const client = await startClient({ + config: { outputDir }, + }); + expect(await client.callTool({ + name: 'browser_navigate', + arguments: { + url: 'data:text/html,TitleHello, world!', + }, + })).toContainTextContent(`Navigate to data:text/html`); -test('browser_take_screenshot (outputDir)', async ({ startClient, localOutputPath }) => { - const outputDir = localOutputPath('output'); + expect(await client.callTool({ + name: 'browser_take_screenshot', + arguments: { + raw, + }, + })).toEqual({ + content: [ + { + data: expect.any(String), + mimeType: `image/${ext}`, + type: 'image', + }, + { + text: expect.stringMatching( + new RegExp(`page-\\d{4}-\\d{2}-\\d{2}T\\d{2}-\\d{2}-\\d{2}\\-\\d{3}Z\\.${ext}`) + ), + type: 'text', + }, + ], + }); + + const files = [...fs.readdirSync(outputDir)]; + + expect(fs.existsSync(outputDir)).toBeTruthy(); + expect(files).toHaveLength(1); + expect(files[0]).toMatch( + new RegExp(`^page-\\d{4}-\\d{2}-\\d{2}T\\d{2}-\\d{2}-\\d{2}-\\d{3}Z\\.${ext}$`) + ); + }); + +} + +test('browser_take_screenshot (filename: "output.jpeg")', async ({ startClient }, testInfo) => { + const outputDir = testInfo.outputPath('output'); const client = await startClient({ config: { outputDir }, }); @@ -107,13 +152,30 @@ test('browser_take_screenshot (outputDir)', async ({ startClient, localOutputPat }, })).toContainTextContent(`Navigate to data:text/html`); - await client.callTool({ + expect(await client.callTool({ name: 'browser_take_screenshot', - arguments: {}, + arguments: { + filename: 'output.jpeg', + }, + })).toEqual({ + content: [ + { + data: expect.any(String), + mimeType: 'image/jpeg', + type: 'image', + }, + { + text: expect.stringContaining(`output.jpeg`), + type: 'text', + }, + ], }); + const files = [...fs.readdirSync(outputDir)]; + expect(fs.existsSync(outputDir)).toBeTruthy(); - expect([...fs.readdirSync(outputDir)]).toHaveLength(1); + expect(files).toHaveLength(1); + expect(files[0]).toMatch(/^output.jpeg$/); }); test('browser_take_screenshot (noImageResponses)', async ({ startClient }) => {