Add API mocking functionality to Playwright MCP

[NebelskyiDmytro]

API Mocking Functionality for Playwright MCP

Overview

This pull request introduces API mocking capabilities to the Playwright MCP project, allowing users to intercept and modify network requests during testing and automation. This feature enhances the toolkit by providing a way to test applications without relying on actual backend services.

Features Added

• browser_mock_api: A new tool to intercept and mock API responses

  • Allows specifying URL patterns with glob and regex support
  • Supports filtering by HTTP methods
  • Provides full control over response status codes, headers, and body content
  • Works in both snapshot and screenshot modes

• browser_clear_mock: A complementary tool to remove API mocks

  • Can clear specific URL patterns
  • Can remove all mocks at once

Implementation Details

New Files

• src/tools/mock.ts: Implements the core API mocking functionality

Modified Files

• src/index.ts: Integrates the mocking tools into both tool modes
• README.md: Updated documentation to include the new features

Use Cases

1. Testing without backend dependencies:

   • Mock API responses to test frontend behavior without actual backend services
   • Simulate different API states (success, error, slow responses)

2. Offline development:

   • Continue development and testing when backend services are unavailable

3. Edge case testing:

   • Create specific API response scenarios that would be difficult to trigger with real services
   • Test error handling with simulated API failures

4. Consistent testing environments:

   • Ensure repeatable test conditions regardless of external services

Example Usage

// Example: Mock a JSON API endpoint
await client.callTool({
  name: 'browser_mock_api',
  arguments: {
    url: 'https://api.example.com/users/*',
    method: 'GET',
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({
      users: [
        { id: 1, name: "Test User" },
        { id: 2, name: "Another User" }
      ]
    })
  }
});

// Example: Simulate an error response
await client.callTool({
  name: 'browser_mock_api',
  arguments: {
    url: 'https://api.example.com/orders',
    method: 'POST',
    status: 500,
    contentType: 'application/json',
    body: JSON.stringify({
      error: "Internal server error",
      code: "SERVER_ERROR"
    })
  }
});

// Clear a specific mock
await client.callTool({
  name: 'browser_clear_mock',
  arguments: {
    url: 'https://api.example.com/users/*'
  }
});

// Clear all mocks
await client.callTool({
  name: 'browser_clear_mock',
  arguments: {}
});

Technical Design

The implementation leverages Playwright's route handling capabilities, allowing precise control over network requests. The tools are designed to integrate seamlessly with the existing Playwright MCP architecture and follow the established patterns for consistency.

The API mocking feature is designed to work in both snapshot and screenshot modes, ensuring compatibility with all usage scenarios of Playwright MCP.

[Skn0tt]

The primary objective of this MCP is to allow for general purpose browsing. Narrow requests for testing and debugging will use a different specialized server.

Please open an issue so we can discuss before you put in the work to create a PR.