What is Mcp Frontend Testing

mcp-frontend-testing is a server that provides tools for frontend testing, specifically designed for the Model Context Protocol. It includes features for code analysis, test generation, test execution, and component testing.

Use cases

Use cases include analyzing code for testing strategies, generating automated tests for components and unit tests, running tests to ensure code quality, and specifically testing React components in a frontend application.

How to use

To use mcp-frontend-testing, clone the repository, navigate to the project directory, install dependencies, and then build and start the server using either HTTP or Stdio transport. You can utilize tools like analyzeCode, generateTest, and runTest for various testing tasks.

Key features

Key features include: 1) Code Analysis for JavaScript/TypeScript to determine testing strategies, 2) Test Generation for unit and component tests compatible with Jest and Cypress, 3) Test Running capabilities to execute tests and return results, and 4) Component Testing tools specifically for React components.

Where to use

mcp-frontend-testing can be used in software development environments where frontend applications are built, particularly those utilizing JavaScript or TypeScript frameworks like React.

MCP Frontend Testing Server

Description

This MCP server provides tools for frontend testing, including:

• Code Analysis: Analyzes JavaScript/TypeScript code to determine appropriate testing strategies.
• Test Generation: Generates unit and component tests for Jest and Cypress.
• Test Running: Executes tests using Jest and Cypress and returns results.
• Component Testing: Provides a tool specifically for testing React components.

Getting Started

Installation

1. Clone the repository:
   `git clone mcp-frontend-testing`
2. Navigate to the project directory:
   `cd mcp-frontend-testing`
3. Install dependencies:
   `npm install`

Running the Server

HTTP Transport

```bash

Build the server

npm run build

Start the server with HTTP transport

npm run start:http
```

Stdio Transport

```bash

Build the server

npm run build

Start the server with Stdio transport

npm run start:stdio
```

Usage

Tools

• analyzeCode: Analyzes code and returns analysis results.
  • Parameters:
    • `code` (string, required): The source code to analyze.
    • `language` (enum, optional): Language of the code (`javascript` | `typescript` | `jsx` | `tsx`, default: `javascript`).
• generateTest: Generates test code based on source code and framework.
  • Parameters:
    • `code` (string, required): The source code to generate tests for.
    • `framework` (enum, required): Testing framework (`jest` | `cypress`).
    • `type` (enum, required): Type of test (`unit` | `component` | `e2e`).
    • `language` (enum, optional): Language of the code (`javascript` | `typescript` | `jsx` | `tsx`, default: `javascript`).
    • `description` (string, optional): Description of the test case.
• runTest: Runs tests and returns results.
  • Parameters:
    • `sourceCode` (string, required): The source code being tested.
    • `testCode` (string, required): The test code to execute.
    • `framework` (enum, required): Testing framework (`jest` | `cypress`).
    • `type` (enum, required): Type of test (`unit` | `component` | `e2e`).
    • `config` (record, optional): Configuration object for test execution.
• testReactComponent: Runs component tests specifically for React components.
  • Parameters:
    • `componentCode` (string, required): The source code of the React component.
    • `testCode` (string, optional): Test code for the component (auto-generated if not provided).
    • `framework` (enum, optional): Testing framework (`jest` | `cypress`, default: `jest`).
    • `props` (record, optional): Props to pass to the component during testing.
    • `autoGenerateTest` (boolean, optional): Automatically generate test code if not provided (default: `true`).

Resources

• templates: Provides test templates.
  • URI: `templates://{framework}/{type}`
  • Parameters:
    • `framework` (string, required): Testing framework (`jest` | `cypress`).
    • `type` (string, required): Type of template (`unit` | `component`).
• docs: Provides documentation for testing frameworks.
  • URI: `docs://{topic}`
  • Parameters:
    • `topic` (string, required): Documentation topic (`jest` | `cypress` | `react-testing-library`).

Deployment

Docker

Build and run the server using Docker:

```bash
docker build -t mcp-frontend-testing .
docker run -p 3000:3000 mcp-frontend-testing
```

Cloud

Deploy to cloud platforms like AWS Lambda, Google Cloud Run, or Azure Functions for serverless or containerized deployments.

Note: This server is designed to be used with an MCP client to enable LLMs to perform frontend testing tasks.