@ejazullah/browser-mcp 0.0.56

package/lib/tools/extraction.js

@@ -0,0 +1,217 @@
+/**
+ * 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.
+ */
+import { z } from 'zod';
+import { defineTabTool } from './tool.js';
+// Get all links from page
+const getAllLinks = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_all_links',
+        title: 'Get all links',
+        description: 'Extract all links from the current page',
+        inputSchema: z.object({
+            includeText: z.boolean().optional().default(true).describe('Include link text'),
+            includeHref: z.boolean().optional().default(true).describe('Include href attribute'),
+            limit: z.number().optional().default(20).describe('Maximum number of links to return'),
+        }),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const links = await tab.page.evaluate(() => {
+                const linkElements = Array.from(document.querySelectorAll('a[href]'));
+                return linkElements.map((link, index) => ({
+                    index,
+                    text: link.textContent?.trim() || '',
+                    href: link.getAttribute('href') || '',
+                    title: link.getAttribute('title') || '',
+                }));
+            });
+            const limitedLinks = links.slice(0, params.limit);
+            const results = [];
+            limitedLinks.forEach((link) => {
+                const parts = [`[${link.index}]`];
+                if (params.includeText && link.text) {
+                    parts.push(`"${link.text}"`);
+                }
+                if (params.includeHref) {
+                    parts.push(`→ ${link.href}`);
+                }
+                if (link.title) {
+                    parts.push(`(${link.title})`);
+                }
+                results.push(parts.join(' '));
+            });
+            response.addCode(`const links = await page.evaluate(() => Array.from(document.querySelectorAll('a[href]')).map(link => ({ text: link.textContent, href: link.href })));`);
+            response.addResult(`Found ${links.length} links (showing first ${limitedLinks.length}):\n${results.join('\n')}`);
+        }
+        catch (error) {
+            response.addError(`Failed to get links: ${error}`);
+        }
+    },
+});
+// Get all images from page
+const getAllImages = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_all_images',
+        title: 'Get all images',
+        description: 'Extract all images and their sources from the current page',
+        inputSchema: z.object({
+            includeAlt: z.boolean().optional().default(true).describe('Include alt text'),
+            includeSrc: z.boolean().optional().default(true).describe('Include src attribute'),
+            limit: z.number().optional().default(20).describe('Maximum number of images to return'),
+        }),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const images = await tab.page.evaluate(() => {
+                const imgElements = Array.from(document.querySelectorAll('img'));
+                return imgElements.map((img, index) => ({
+                    index,
+                    src: img.src || '',
+                    alt: img.alt || '',
+                    title: img.title || '',
+                    width: img.naturalWidth || img.width,
+                    height: img.naturalHeight || img.height,
+                }));
+            });
+            const limitedImages = images.slice(0, params.limit);
+            const results = [];
+            limitedImages.forEach((img) => {
+                const parts = [`[${img.index}]`];
+                if (params.includeAlt && img.alt) {
+                    parts.push(`"${img.alt}"`);
+                }
+                if (params.includeSrc) {
+                    parts.push(`→ ${img.src}`);
+                }
+                if (img.width && img.height) {
+                    parts.push(`(${img.width}x${img.height})`);
+                }
+                results.push(parts.join(' '));
+            });
+            response.addCode(`const images = await page.evaluate(() => Array.from(document.querySelectorAll('img')).map(img => ({ src: img.src, alt: img.alt })));`);
+            response.addResult(`Found ${images.length} images (showing first ${limitedImages.length}):\n${results.join('\n')}`);
+        }
+        catch (error) {
+            response.addError(`Failed to get images: ${error}`);
+        }
+    },
+});
+// Get table data
+const getTableData = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_table_data',
+        title: 'Extract table data',
+        description: 'Extract data from HTML tables',
+        inputSchema: z.object({
+            selector: z.string().optional().default('table').describe('CSS selector for the table'),
+            includeHeaders: z.boolean().optional().default(true).describe('Include table headers'),
+            maxRows: z.number().optional().default(10).describe('Maximum number of rows to extract'),
+        }),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const tableData = await tab.page.evaluate(({ selector, includeHeaders, maxRows }) => {
+                const table = document.querySelector(selector);
+                if (!table)
+                    return null;
+                const rows = Array.from(table.querySelectorAll('tr'));
+                const data = [];
+                rows.slice(0, maxRows).forEach((row) => {
+                    const cells = Array.from(row.querySelectorAll('td, th'));
+                    const rowData = cells.map(cell => cell.textContent?.trim() || '');
+                    if (rowData.some(cell => cell)) { // Only include non-empty rows
+                        data.push(rowData);
+                    }
+                });
+                return data;
+            }, { selector: params.selector, includeHeaders: params.includeHeaders, maxRows: params.maxRows });
+            if (!tableData) {
+                response.addError(`No table found with selector "${params.selector}"`);
+                return;
+            }
+            const results = [];
+            tableData.forEach((row, index) => {
+                const isHeader = index === 0 && params.includeHeaders;
+                const prefix = isHeader ? 'HEADER' : `ROW ${index}`;
+                results.push(`${prefix}: ${row.join(' | ')}`);
+            });
+            response.addCode(`const tableData = await page.evaluate(() => Array.from(document.querySelector('${params.selector}').querySelectorAll('tr')).map(row => Array.from(row.cells).map(cell => cell.textContent)));`);
+            response.addResult(`Table data (${tableData.length} rows):\n${results.join('\n')}`);
+        }
+        catch (error) {
+            response.addError(`Failed to extract table data: ${error}`);
+        }
+    },
+});
+// Get computed styles
+const getElementStyle = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_element_style',
+        title: 'Get element styles',
+        description: 'Get computed CSS styles for an element',
+        inputSchema: z.object({
+            selector: z.string().describe('CSS selector for the element'),
+            properties: z.array(z.string()).optional().describe('Specific CSS properties to get (if not provided, gets common ones)'),
+        }),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const defaultProperties = [
+                'display', 'visibility', 'opacity', 'position', 'top', 'left', 'width', 'height',
+                'margin', 'padding', 'border', 'background-color', 'color', 'font-size', 'font-family'
+            ];
+            const propertiesToGet = params.properties || defaultProperties;
+            const styles = await tab.page.evaluate(({ selector, properties }) => {
+                const element = document.querySelector(selector);
+                if (!element)
+                    return null;
+                const computedStyle = window.getComputedStyle(element);
+                const result = {};
+                properties.forEach((prop) => {
+                    result[prop] = computedStyle.getPropertyValue(prop);
+                });
+                return result;
+            }, { selector: params.selector, properties: propertiesToGet });
+            if (!styles) {
+                response.addError(`No element found with selector "${params.selector}"`);
+                return;
+            }
+            const results = Object.entries(styles)
+                .filter(([_, value]) => value && value !== 'auto' && value !== 'none')
+                .map(([prop, value]) => `${prop}: ${value}`)
+                .join('\n');
+            response.addCode(`const styles = await page.evaluate(() => { const el = document.querySelector('${params.selector}'); return window.getComputedStyle(el); });`);
+            response.addResult(`Element styles:\n${results}`);
+        }
+        catch (error) {
+            response.addError(`Failed to get element styles: ${error}`);
+        }
+    },
+});
+export default [
+    getAllLinks,
+    getAllImages,
+    getTableData,
+    getElementStyle,
+];

package/lib/tools/files.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+import { z } from 'zod';
+import { defineTabTool } from './tool.js';
+const uploadFile = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_file_upload',
+        title: 'Upload files',
+        description: 'Upload one or multiple files',
+        inputSchema: z.object({
+            paths: z.array(z.string()).describe('The absolute paths to the files to upload. Can be a single file or multiple files.'),
+        }),
+        type: 'destructive',
+    },
+    handle: async (tab, params, response) => {
+        response.setIncludeSnapshot();
+        const modalState = tab.modalStates().find(state => state.type === 'fileChooser');
+        if (!modalState)
+            throw new Error('No file chooser visible');
+        response.addCode(`await fileChooser.setFiles(${JSON.stringify(params.paths)})`);
+        tab.clearModalState(modalState);
+        await tab.waitForCompletion(async () => {
+            await modalState.fileChooser.setFiles(params.paths);
+        });
+    },
+    clearsModalState: 'fileChooser',
+});
+export default [
+    uploadFile,
+];

package/lib/tools/forms.js

@@ -0,0 +1,180 @@
+/**
+ * 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.
+ */
+import { z } from 'zod';
+import { defineTabTool } from './tool.js';
+import { elementSchema } from './snapshot.js';
+import { generateLocator } from './utils.js';
+// Schema for CSS selector operations
+const selectorSchema = z.object({
+    selector: z.string().describe('CSS selector to target the element'),
+    index: z.number().optional().describe('Index of element if multiple elements match (0-based)'),
+});
+// Check/uncheck checkbox
+const checkCheckbox = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_check_checkbox',
+        title: 'Check or uncheck checkbox',
+        description: 'Check or uncheck a checkbox element',
+        inputSchema: elementSchema.extend({
+            checked: z.boolean().describe('Whether to check (true) or uncheck (false) the checkbox'),
+        }),
+        type: 'destructive',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            // Get locator with selector information for database logging
+            const { locator, selector, resolvedSelector } = await tab.refLocatorWithSelector(params);
+            // Store element interaction data for database logging
+            response.setElementInteraction({
+                elementRef: params.ref,
+                elementDescription: params.element,
+                playwrightSelector: selector,
+                resolvedSelector: resolvedSelector,
+            });
+            if (params.checked) {
+                await locator.check();
+                response.addCode(`await page.${await generateLocator(locator)}.check();`);
+                response.addResult('Checkbox checked successfully');
+            }
+            else {
+                await locator.uncheck();
+                response.addCode(`await page.${await generateLocator(locator)}.uncheck();`);
+                response.addResult('Checkbox unchecked successfully');
+            }
+            response.setIncludeSnapshot();
+        }
+        catch (error) {
+            response.addError(`Failed to ${params.checked ? 'check' : 'uncheck'} checkbox: ${error}`);
+        }
+    },
+});
+// Select radio button
+const selectRadio = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_select_radio',
+        title: 'Select radio button',
+        description: 'Select a radio button',
+        inputSchema: elementSchema,
+        type: 'destructive',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            // Get locator with selector information for database logging
+            const { locator, selector, resolvedSelector } = await tab.refLocatorWithSelector(params);
+            // Store element interaction data for database logging
+            response.setElementInteraction({
+                elementRef: params.ref,
+                elementDescription: params.element,
+                playwrightSelector: selector,
+                resolvedSelector: resolvedSelector,
+            });
+            await locator.check();
+            response.addCode(`await page.${await generateLocator(locator)}.check();`);
+            response.addResult('Radio button selected successfully');
+            response.setIncludeSnapshot();
+        }
+        catch (error) {
+            response.addError(`Failed to select radio button: ${error}`);
+        }
+    },
+});
+// Clear input field
+const clearInput = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_clear_input',
+        title: 'Clear input field',
+        description: 'Clear the content of an input field',
+        inputSchema: elementSchema,
+        type: 'destructive',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            // Get locator with selector information for database logging
+            const { locator, selector, resolvedSelector } = await tab.refLocatorWithSelector(params);
+            // Store element interaction data for database logging
+            response.setElementInteraction({
+                elementRef: params.ref,
+                elementDescription: params.element,
+                playwrightSelector: selector,
+                resolvedSelector: resolvedSelector,
+            });
+            await locator.clear();
+            response.addCode(`await page.${await generateLocator(locator)}.clear();`);
+            response.addResult('Input field cleared successfully');
+            response.setIncludeSnapshot();
+        }
+        catch (error) {
+            response.addError(`Failed to clear input field: ${error}`);
+        }
+    },
+});
+// Get input value
+const getInputValue = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_input_value',
+        title: 'Get input field value',
+        description: 'Get the current value of an input field',
+        inputSchema: elementSchema,
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const locator = await tab.refLocator(params);
+            const value = await locator.inputValue();
+            response.addCode(`const value = await page.${await generateLocator(locator)}.inputValue();`);
+            response.addResult(`Input value: ${value}`);
+        }
+        catch (error) {
+            response.addError(`Failed to get input value: ${error}`);
+        }
+    },
+});
+// Submit form
+const submitForm = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_submit_form',
+        title: 'Submit form',
+        description: 'Submit a form element',
+        inputSchema: elementSchema,
+        type: 'destructive',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const locator = await tab.refLocator(params);
+            await tab.waitForCompletion(async () => {
+                await locator.evaluate((form) => form.submit());
+            });
+            response.addCode(`await page.${await generateLocator(locator)}.evaluate(form => form.submit());`);
+            response.addResult('Form submitted successfully');
+            response.setIncludeSnapshot();
+        }
+        catch (error) {
+            response.addError(`Failed to submit form: ${error}`);
+        }
+    },
+});
+export default [
+    checkCheckbox,
+    selectRadio,
+    clearInput,
+    getInputValue,
+    submitForm,
+];

package/lib/tools/getext.js

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) Microsoft Corpo  handle: async (tab, params, response) => {
+    const { ref, element, attribute } = params;
+    
+    try {
+      const locator = await tab.refLocator(params);
+      
+      let result: string;
+      if (attribute) {
+        result = await locator.getAttribute(attribute) || '';
+        response.addCode(`const attributeValue = await page.${await generateLocator(locator)}.getAttribute('${attribute}');`);
+      } else {
+        result = await locator.textContent() || '';
+        response.addCode(`const textContent = await page.${await generateLocator(locator)}.textContent();`);
+      }
+      
+      response.addResult(`${attribute ? `Attribute "${attribute}"` : 'Text content'}: ${result}`);
+    } catch (error) {
+      response.addError(`Failed to get ${attribute ? `attribute "${attribute}"` : 'text content'} from element: ${error}`);
+    }
+  },ed 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.
+ */
+import { z } from 'zod';
+import { defineTabTool } from './tool.js';
+import { elementSchema } from './snapshot.js';
+import { generateLocator } from './utils.js';
+const getTextSchema = elementSchema.extend({
+    attribute: z.string().optional().describe('Optional attribute to get instead of text content (e.g., "href", "src", "value")'),
+});
+const getText = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_text',
+        title: 'Get text content or attribute from element',
+        description: 'Get text content or attribute value from a specific element on the page',
+        inputSchema: getTextSchema,
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        const { ref, element, attribute } = params;
+        try {
+            const locator = await tab.refLocator(params);
+            let result;
+            if (attribute) {
+                result = await locator.getAttribute(attribute) || '';
+                response.addCode(`const attributeValue = await page.${await generateLocator(locator)}.getAttribute('${attribute}');`);
+            }
+            else {
+                result = await locator.textContent() || '';
+                response.addCode(`const textContent = await page.${await generateLocator(locator)}.textContent();`);
+            }
+            response.addResult(`${attribute ? `Attribute "${attribute}"` : 'Text content'}: ${result}`);
+        }
+        catch (error) {
+            response.addError(`Failed to get ${attribute ? `attribute "${attribute}"` : 'text content'} from element: ${error}`);
+        }
+    },
+});
+const getPageInfo = defineTabTool({
+    capability: 'core',
+    schema: {
+        name: 'browser_get_page_info',
+        title: 'Get page information',
+        description: 'Get basic information about the current page (title, URL, etc.)',
+        inputSchema: z.object({}),
+        type: 'readOnly',
+    },
+    handle: async (tab, params, response) => {
+        try {
+            const title = await tab.page.title();
+            const url = tab.page.url();
+            const viewport = tab.page.viewportSize();
+            response.addCode(`const title = await page.title();
+const url = page.url();
+const viewport = page.viewportSize();`);
+            response.addResult(`Page Information:
+- Title: ${title}
+- URL: ${url}
+- Viewport: ${viewport ? `${viewport.width}x${viewport.height}` : 'Not set'}`);
+        }
+        catch (error) {
+            response.addError(`Failed to get page information: ${error}`);
+        }
+    },
+});
+export default [
+    getText,
+    getPageInfo
+];

package/lib/tools/install.js

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+import { fork } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { z } from 'zod';
+import { defineTool } from './tool.js';
+const install = defineTool({
+    capability: 'core-install',
+    schema: {
+        name: 'browser_install',
+        title: 'Install the browser specified in the config',
+        description: 'Install the browser specified in the config. Call this if you get an error about the browser not being installed.',
+        inputSchema: z.object({}),
+        type: 'destructive',
+    },
+    handle: async (context, params, response) => {
+        const channel = context.config.browser?.launchOptions?.channel ?? context.config.browser?.browserName ?? 'chrome';
+        const cliUrl = import.meta.resolve('playwright/package.json');
+        const cliPath = path.join(fileURLToPath(cliUrl), '..', 'cli.js');
+        const child = fork(cliPath, ['install', channel], {
+            stdio: 'pipe',
+        });
+        const output = [];
+        child.stdout?.on('data', data => output.push(data.toString()));
+        child.stderr?.on('data', data => output.push(data.toString()));
+        await new Promise((resolve, reject) => {
+            child.on('close', code => {
+                if (code === 0)
+                    resolve();
+                else
+                    reject(new Error(`Failed to install browser: ${output.join('')}`));
+            });
+        });
+        response.setIncludeTabs();
+    },
+});
+export default [
+    install,
+];