@wordbricks/playwright-mcp 0.1.20 → 0.1.22

package/lib/tools/pdf.js

@@ -13,20 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTabTool } from './tool.js';
-import * as javascript from '../utils/codegen.js';
+import { z } from "zod";
+import * as javascript from "../utils/codegen.js";
+import { defineTabTool } from "./tool.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.'),
+    filename: z
+        .string()
+        .optional()
+        .describe("File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified."),
 });
 const pdf = defineTabTool({
-    capability: 'pdf',
+    capability: "pdf",
     schema: {
-        name: 'browser_pdf_save',
-        title: 'Save as PDF',
-        description: 'Save page as PDF',
+        name: "browser_pdf_save",
+        title: "Save as PDF",
+        description: "Save page as PDF",
         inputSchema: pdfSchema,
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         const fileName = await tab.context.outputFile(params.filename ?? `page-${new Date().toISOString()}.pdf`);
@@ -35,6 +38,4 @@ const pdf = defineTabTool({
         await tab.page.pdf({ path: fileName });
     },
 });
-export default [
-    pdf,
-];
+export default [pdf];

package/lib/tools/repl.js

@@ -1,18 +1,18 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
-import { z } from 'zod';
-import debug from 'debug';
-import ms from 'ms';
-import { defineTabTool } from './tool.js';
-import * as javascript from '../utils/codegen.js';
-import { truncate } from '../utils/truncate.js';
-import { transformScript } from '../playwrightTransformer.js';
-const EVALUATE_TIMEOUT_MS = ms('30s');
-const debugLog = debug('pw:mcp:repl');
+import debug from "debug";
+import { readFileSync } from "fs";
+import ms from "ms";
+import { join } from "path";
+import { z } from "zod";
+import { transformScript } from "../playwrightTransformer.js";
+import * as javascript from "../utils/codegen.js";
+import { truncate } from "../utils/truncate.js";
+import { defineTabTool } from "./tool.js";
+const EVALUATE_TIMEOUT_MS = ms("30s");
+const debugLog = debug("pw:mcp:repl");
 const replSchema = z.object({
     script: z
         .string()
-        .describe('JavaScript code to execute in the browser console.'),
+        .describe("JavaScript code to execute in the browser console."),
 });
 const contextStates = new WeakMap();
 function getPageState(page) {
@@ -49,17 +49,17 @@ async function setupConsoleCapture(page) {
         window.__consoleOutputs = [];
         // Override console methods to capture output
         const captureConsole = (method) => {
-            const handler = function (...args) {
+            const handler = (...args) => {
                 // Call original method
                 window.__originalConsole?.[method](...args);
                 // Capture output
                 const output = args
-                    .map(arg => {
+                    .map((arg) => {
                     if (arg === undefined)
-                        return 'undefined';
+                        return "undefined";
                     if (arg === null)
-                        return 'null';
-                    if (typeof arg === 'object') {
+                        return "null";
+                    if (typeof arg === "object") {
                         try {
                             return JSON.stringify(arg);
                         }
@@ -69,26 +69,30 @@ async function setupConsoleCapture(page) {
                     }
                     return String(arg);
                 })
-                    .join(' ');
+                    .join(" ");
                 window.__consoleOutputs?.push(output);
             };
-            Object.defineProperty(console, method, { value: handler, configurable: true, writable: true });
+            Object.defineProperty(console, method, {
+                value: handler,
+                configurable: true,
+                writable: true,
+            });
         };
-        captureConsole('log');
-        captureConsole('error');
-        captureConsole('warn');
-        captureConsole('info');
+        captureConsole("log");
+        captureConsole("error");
+        captureConsole("warn");
+        captureConsole("info");
     });
 }
 async function injectLibraries(cdpSession) {
     try {
-        const nodeModulesPath = join(process.cwd(), 'node_modules');
+        const nodeModulesPath = join(process.cwd(), "node_modules");
         // Inject utility libraries into the page context
-        const json5Code = readFileSync(join(nodeModulesPath, 'json5', 'dist', 'index.min.js'), 'utf8');
-        const jsonpathCode = readFileSync(join(nodeModulesPath, 'jsonpath-plus', 'dist', 'index-browser-umd.min.cjs'), 'utf8');
-        const lodashCode = readFileSync(join(nodeModulesPath, 'lodash', 'lodash.min.js'), 'utf8');
+        const json5Code = readFileSync(join(nodeModulesPath, "json5", "dist", "index.min.js"), "utf8");
+        const jsonpathCode = readFileSync(join(nodeModulesPath, "jsonpath-plus", "dist", "index-browser-umd.min.cjs"), "utf8");
+        const lodashCode = readFileSync(join(nodeModulesPath, "lodash", "lodash.min.js"), "utf8");
         // Inject libraries using CDP
-        await cdpSession.send('Runtime.evaluate', {
+        await cdpSession.send("Runtime.evaluate", {
             expression: `
         (function(){
           try {
@@ -209,18 +213,18 @@ async function injectLibraries(cdpSession) {
         return true;
     }
     catch (error) {
-        debugLog('Failed to inject libraries:', error);
+        debugLog("Failed to inject libraries:", error);
         return false;
     }
 }
 const repl = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_repl',
-        title: 'Browser REPL',
-        description: 'DevTools-like browser REPL. Per-tab state persists across calls (const/let/functions); supports top-level await. Survives SPA nav; resets on full reload or when switching tabs. Helpers available via window.mcp: JSON5, JSONPath, _, GraphQLClient, gql, graphqlRequest. No need for wrapping in IIFE.',
+        name: "browser_repl",
+        title: "Browser REPL",
+        description: "DevTools-like browser REPL. Per-tab state persists across calls (const/let/functions); supports top-level await. Survives SPA nav; resets on full reload or when switching tabs. Helpers available via window.mcp: JSON5, JSONPath, _, GraphQLClient, gql, graphqlRequest. No need for wrapping in IIFE.",
         inputSchema: replSchema,
-        type: 'action',
+        type: "action",
     },
     handle: async (tab, params, response) => {
         const page = tab.page;
@@ -229,7 +233,7 @@ const repl = defineTabTool({
         async function getOrCreateSession() {
             if (!state.cdpSession) {
                 state.cdpSession = await page.context().newCDPSession(page);
-                await state.cdpSession.send('Runtime.enable');
+                await state.cdpSession.send("Runtime.enable");
             }
             return state.cdpSession;
         }
@@ -268,7 +272,7 @@ const repl = defineTabTool({
                 // Execute the script with REPL mode for console-like behavior
                 let evaluationResponse;
                 try {
-                    evaluationResponse = await session.send('Runtime.evaluate', {
+                    evaluationResponse = await session.send("Runtime.evaluate", {
                         expression: transformedScript,
                         replMode: true, // Chrome DevTools console behavior (non-standard, tolerated by CDP)
                         includeCommandLineAPI: true, // Includes console utilities like $, $$, etc.
@@ -280,7 +284,7 @@ const repl = defineTabTool({
                 catch (error) {
                     // If REPL mode fails due to wrapped functions, try without REPL mode
                     if (hasReturnOutsideFunction || hasTopLevelAwait) {
-                        evaluationResponse = await session.send('Runtime.evaluate', {
+                        evaluationResponse = await session.send("Runtime.evaluate", {
                             expression: transformedScript,
                             replMode: false, // Disable REPL mode for wrapped functions
                             includeCommandLineAPI: true,
@@ -296,7 +300,7 @@ const repl = defineTabTool({
                 if (evaluationResponse.exceptionDetails) {
                     const details = evaluationResponse.exceptionDetails;
                     // Try to get the actual error message from multiple sources
-                    let errorMessage = details.text || 'Evaluation failed';
+                    let errorMessage = details.text || "Evaluation failed";
                     // If we have exception details, try to extract more info
                     if (details.exception) {
                         if (details.exception.description)
@@ -309,11 +313,11 @@ const repl = defineTabTool({
                         errorMessage += ` (at line ${details.lineNumber}`;
                         if (details.columnNumber !== undefined)
                             errorMessage += `:${details.columnNumber}`;
-                        errorMessage += ')';
+                        errorMessage += ")";
                     }
                     // Check if it's a timeout error
-                    if (errorMessage.includes('Timeout') ||
-                        errorMessage.includes('timeout'))
+                    if (errorMessage.includes("Timeout") ||
+                        errorMessage.includes("timeout"))
                         throw new Error(`Script execution timed out after ${EVALUATE_TIMEOUT_MS / 1000} seconds`);
                     throw new Error(errorMessage);
                 }
@@ -325,14 +329,14 @@ const repl = defineTabTool({
                 const formatOutput = () => {
                     const MAX_OUTPUT_LENGTH = 10_000;
                     const MAX_CONSOLE_OUTPUTS = 100;
-                    let output = '';
+                    let output = "";
                     // Add console output if any
                     if (consoleOutputs && consoleOutputs.length > 0) {
                         // Limit number of console outputs and truncate each one
                         const truncatedOutputs = consoleOutputs
                             .slice(0, MAX_CONSOLE_OUTPUTS)
-                            .map(o => String(truncate(o, { maxStringLength: 1000 })));
-                        output = truncatedOutputs.join('\n');
+                            .map((o) => String(truncate(o, { maxStringLength: 1000 })));
+                        output = truncatedOutputs.join("\n");
                         if (consoleOutputs.length > MAX_CONSOLE_OUTPUTS)
                             output += `\n... (${consoleOutputs.length - MAX_CONSOLE_OUTPUTS} more console outputs omitted)`;
                     }
@@ -344,7 +348,7 @@ const repl = defineTabTool({
                         let resultString;
                         try {
                             resultString =
-                                typeof result === 'string'
+                                typeof result === "string"
                                     ? result
                                     : JSON.stringify(result, null, 2);
                         }
@@ -353,29 +357,37 @@ const repl = defineTabTool({
                             resultString = String(result);
                         }
                         // Truncate result if too long (first structure-limit, then clamp string)
-                        const truncatedValue = truncate(result, { maxStringLength: 200, maxItems: 20 });
-                        let limited = '';
+                        const truncatedValue = truncate(result, {
+                            maxStringLength: 200,
+                            maxItems: 20,
+                        });
+                        let limited = "";
                         try {
-                            limited = typeof truncatedValue === 'string' ? truncatedValue : JSON.stringify(truncatedValue, null, 2);
+                            limited =
+                                typeof truncatedValue === "string"
+                                    ? truncatedValue
+                                    : JSON.stringify(truncatedValue, null, 2);
                         }
                         catch {
                             limited = resultString;
                         }
-                        const truncatedResult = limited.length > 5000 ? (limited.substring(0, 5000) + '\n... (truncated)') : limited;
+                        const truncatedResult = limited.length > 5000
+                            ? limited.substring(0, 5000) + "\n... (truncated)"
+                            : limited;
                         if (output)
-                            output += '\n' + truncatedResult;
+                            output += "\n" + truncatedResult;
                         else
                             output = truncatedResult;
                     }
                     else if (!consoleOutputs || consoleOutputs.length === 0) {
                         // Only show "undefined" if there's no console output
-                        output = 'undefined';
+                        output = "undefined";
                     }
                     // Final truncation of the entire output
                     if (output.length > MAX_OUTPUT_LENGTH) {
                         output =
                             output.substring(0, MAX_OUTPUT_LENGTH) +
-                                '\n... (output truncated)';
+                                "\n... (output truncated)";
                     }
                     return output;
                 };
@@ -385,13 +397,13 @@ const repl = defineTabTool({
                 const errorToMessage = (e) => {
                     if (e instanceof Error)
                         return e.message;
-                    if (typeof e === 'string')
+                    if (typeof e === "string")
                         return e;
                     try {
                         return JSON.stringify(e);
                     }
                     catch {
-                        return 'Unknown error occurred';
+                        return "Unknown error occurred";
                     }
                 };
                 response.addError(errorToMessage(error));

package/lib/tools/screenshot.js

@@ -13,67 +13,91 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { z } from 'zod';
-import { defineTabTool } from './tool.js';
-import * as javascript from '../utils/codegen.js';
-import { generateLocator } from './utils.js';
-const screenshotSchema = z.object({
-    type: z.enum(['png', 'jpeg']).default('png').describe('Image format for the screenshot. Default is png.'),
-    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.'),
-    fullPage: z.boolean().optional().describe('When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Cannot be used with element screenshots.'),
-}).refine(data => {
+import { z } from "zod";
+import * as javascript from "../utils/codegen.js";
+import { defineTabTool } from "./tool.js";
+import { generateLocator } from "./utils.js";
+const screenshotSchema = z
+    .object({
+    type: z
+        .enum(["png", "jpeg"])
+        .default("png")
+        .describe("Image format for the screenshot. Default is png."),
+    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."),
+    fullPage: z
+        .boolean()
+        .optional()
+        .describe("When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Cannot be used with element screenshots."),
+})
+    .refine((data) => {
     return !!data.element === !!data.ref;
 }, {
-    message: 'Both element and ref must be provided or neither.',
-    path: ['ref', 'element']
-}).refine(data => {
+    message: "Both element and ref must be provided or neither.",
+    path: ["ref", "element"],
+})
+    .refine((data) => {
     return !(data.fullPage && (data.element || data.ref));
 }, {
-    message: 'fullPage cannot be used with element screenshots.',
-    path: ['fullPage']
+    message: "fullPage cannot be used with element screenshots.",
+    path: ["fullPage"],
 });
 const screenshot = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_take_screenshot',
-        title: 'Take a screenshot',
+        name: "browser_take_screenshot",
+        title: "Take a screenshot",
         description: `Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.`,
         inputSchema: screenshotSchema,
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
-        const fileType = params.type || 'png';
+        const fileType = params.type || "png";
         const fileName = await tab.context.outputFile(params.filename ?? `page-${new Date().toISOString()}.${fileType}`);
         const options = {
             type: fileType,
-            quality: fileType === 'png' ? undefined : 90,
-            scale: 'css',
+            quality: fileType === "png" ? undefined : 90,
+            scale: "css",
             path: fileName,
-            ...(params.fullPage !== undefined && { fullPage: params.fullPage })
+            ...(params.fullPage !== undefined && { fullPage: params.fullPage }),
         };
         const isElementScreenshot = params.element && params.ref;
-        const screenshotTarget = isElementScreenshot ? params.element : (params.fullPage ? 'full page' : 'viewport');
+        const screenshotTarget = isElementScreenshot
+            ? params.element
+            : params.fullPage
+                ? "full page"
+                : "viewport";
         response.addCode(`// Screenshot ${screenshotTarget} and save it as ${fileName}`);
         // Only get snapshot when element screenshot is needed
-        const locator = params.ref ? await tab.refLocator({ element: params.element || '', ref: params.ref }) : null;
+        const locator = params.ref
+            ? await tab.refLocator({ element: params.element || "", ref: params.ref })
+            : null;
         if (locator)
             response.addCode(`await page.${await generateLocator(locator)}.screenshot(${javascript.formatObject(options)});`);
         else
             response.addCode(`await page.screenshot(${javascript.formatObject(options)});`);
-        const buffer = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
+        const buffer = locator
+            ? await locator.screenshot(options)
+            : await tab.page.screenshot(options);
         response.addResult(`Took the ${screenshotTarget} screenshot and saved it as ${fileName}`);
         // https://github.com/microsoft/playwright-mcp/issues/817
         // Never return large images to LLM, saving them to the file system is enough.
         if (!params.fullPage) {
             response.addImage({
-                contentType: fileType === 'png' ? 'image/png' : 'image/jpeg',
-                data: buffer
+                contentType: fileType === "png" ? "image/png" : "image/jpeg",
+                data: buffer,
             });
         }
-    }
+    },
 });
-export default [
-    screenshot,
-];
+export default [screenshot];

package/lib/tools/scroll.js

@@ -1,6 +1,6 @@
-import { z } from 'zod';
-import ms from 'ms';
-import { defineTabTool } from './tool.js';
+import ms from "ms";
+import { z } from "zod";
+import { defineTabTool } from "./tool.js";
 /**
  * Generate random number between min and max
  */
@@ -15,8 +15,10 @@ function generateScrollPattern(totalDelta) {
     const abs = Math.abs(totalDelta);
     const direction = totalDelta > 0 ? 1 : -1;
     // Faster profile: fewer steps overall, still eased
-    const steps = abs < 250 ? randomBetween(3, 6)
-        : abs < 1200 ? randomBetween(4, 10)
+    const steps = abs < 250
+        ? randomBetween(3, 6)
+        : abs < 1200
+            ? randomBetween(4, 10)
             : randomBetween(8, 16);
     const base = abs / steps;
     const easeInOut = (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t); // 0..1
@@ -28,42 +30,44 @@ function generateScrollPattern(totalDelta) {
         // Larger per-event wheel to reduce total time: clamp 10..180px
         const clamped = Math.max(10, Math.min(180, Math.round(scrollAmount)));
         // Short delays: 15–60ms + small size factor
-        const delay = randomBetween(ms('15ms'), ms('60ms')) + Math.floor(clamped * 0.08);
+        const delay = randomBetween(ms("15ms"), ms("60ms")) + Math.floor(clamped * 0.08);
         pattern.push({
             delta: clamped * direction,
             delay,
         });
         // Rare micro-pause (short) to keep a bit of human feel
         if (Math.random() < 0.05 && i < steps - 1)
-            pattern.push({ delta: 0, delay: randomBetween(ms('30ms'), ms('80ms')) });
+            pattern.push({ delta: 0, delay: randomBetween(ms("30ms"), ms("80ms")) });
     }
     // Smaller, rarer overshoot for long moves only
     if (abs > 600 && Math.random() < 0.1) {
         pattern.push({
             delta: -direction * randomBetween(6, 18),
-            delay: randomBetween(ms('60ms'), ms('120ms')),
+            delay: randomBetween(ms("60ms"), ms("120ms")),
         });
     }
     return pattern;
 }
 const scrollSchema = z.object({
-    amount: z.number().describe('Vertical scroll amount in pixels (positive scrolls down, negative up)')
+    amount: z
+        .number()
+        .describe("Vertical scroll amount in pixels (positive scrolls down, negative up)"),
 });
 const scrollWheel = defineTabTool({
-    capability: 'core',
+    capability: "core",
     schema: {
-        name: 'browser_scroll',
-        title: 'Scroll page',
-        description: 'Scroll the page using mouse wheel with human-like behavior',
+        name: "browser_scroll",
+        title: "Scroll page",
+        description: "Scroll the page using mouse wheel with human-like behavior",
         inputSchema: scrollSchema,
-        type: 'readOnly',
+        type: "readOnly",
     },
     handle: async (tab, params, response) => {
         const requestedDeltaY = params.amount || 0;
         // Capture initial scroll position
         const initialScrollPosition = await tab.page.evaluate(() => ({
             x: window.scrollX,
-            y: window.scrollY
+            y: window.scrollY,
         }));
         response.addCode(`// Scroll page by ${requestedDeltaY}px (vertical)`);
         await tab.waitForCompletion(async () => {
@@ -76,17 +80,20 @@ const scrollWheel = defineTabTool({
                 response.addCode(`await page.mouse.move(${x}, ${y});`);
             }
             // Add initial "hover" delay (short)
-            await tab.page.waitForTimeout(randomBetween(ms('40ms'), ms('120ms')));
+            await tab.page.waitForTimeout(randomBetween(ms("40ms"), ms("120ms")));
             // Generate and execute human-like scroll pattern
-            const scrollPatternY = requestedDeltaY ? generateScrollPattern(requestedDeltaY) : [];
+            const scrollPatternY = requestedDeltaY
+                ? generateScrollPattern(requestedDeltaY)
+                : [];
             const maxSteps = scrollPatternY.length;
             for (let i = 0; i < maxSteps; i++) {
                 let deltaY = scrollPatternY[i]?.delta || 0;
                 const delay = scrollPatternY[i]?.delay || 0;
                 // Clamp vertical delta to avoid scrolling past page edges
-                const allowedY = await tab.page.evaluate(dy => {
+                const allowedY = await tab.page.evaluate((dy) => {
                     const doc = document.scrollingElement || document.documentElement;
-                    const maxY = Math.max(0, (doc.scrollHeight || document.documentElement.scrollHeight) - window.innerHeight);
+                    const maxY = Math.max(0, (doc.scrollHeight || document.documentElement.scrollHeight) -
+                        window.innerHeight);
                     const curY = window.scrollY || doc.scrollTop || 0;
                     let a = dy;
                     if (curY + dy < 0)
@@ -108,19 +115,17 @@ const scrollWheel = defineTabTool({
                 }
             }
             // Short final pause
-            const finalDelay = randomBetween(ms('80ms'), ms('200ms'));
+            const finalDelay = randomBetween(ms("80ms"), ms("200ms"));
             await tab.page.waitForTimeout(finalDelay);
             response.addCode(`await page.waitForTimeout(${finalDelay});`);
         });
         // Capture final scroll position
         const finalScrollPosition = await tab.page.evaluate(() => ({
             x: window.scrollX,
-            y: window.scrollY
+            y: window.scrollY,
         }));
         // Always show scroll position for scroll tool
         response.addResult(`Scroll position:\nBefore: x=${initialScrollPosition.x}, y=${initialScrollPosition.y}\nAfter: x=${finalScrollPosition.x}, y=${finalScrollPosition.y}`);
     },
 });
-export default [
-    scrollWheel,
-];
+export default [scrollWheel];