Skip to main content
Glama
StudentOfJS

MCP Frontend Testing Server

by StudentOfJS

MCP 프런트엔드 테스트 서버

설명

이 MCP 서버는 다음을 포함하여 프런트엔드 테스트를 위한 도구를 제공합니다.

  • 코드 분석 : JavaScript/TypeScript 코드를 분석하여 적절한 테스트 전략을 결정합니다.

  • 테스트 생성 : Jest와 Cypress에 대한 단위 및 구성 요소 테스트를 생성합니다.

  • 테스트 실행 : Jest와 Cypress를 사용하여 테스트를 실행하고 결과를 반환합니다.

  • 구성 요소 테스트 : React 구성 요소를 테스트하기 위한 도구를 제공합니다.

Related MCP server: Frontend Code Analysis MCP

시작하기

설치

  1. 저장소를 복제합니다: `git clone mcp-frontend-testing`

  2. 프로젝트 디렉토리로 이동합니다: `cd mcp-frontend-testing`

  3. 종속성 설치: `npm install`

서버 실행

HTTP 전송

```배쉬

서버를 빌드하세요

npm 실행 빌드

HTTP 전송으로 서버 시작

npm 실행 시작:http ```

Stdio Transport

```배쉬

서버를 빌드하세요

npm 실행 빌드

Stdio 전송으로 서버 시작

npm 실행 시작:stdio ```

용법

도구

  • analyzeCode : 코드를 분석하고 분석 결과를 반환합니다.

    • 매개변수 :

      • `code` (문자열, 필수): 분석할 소스 코드.

      • `language` (enum, 선택 사항): 코드의 언어(`javascript` | `typescript` | `jsx` | `tsx`, 기본값: `javascript`).

  • generateTest : 소스 코드와 프레임워크를 기반으로 테스트 코드를 생성합니다.

    • 매개변수 :

      • `code` (문자열, 필수): 테스트를 생성할 소스 코드입니다.

      • `framework` (enum, 필수): 테스트 프레임워크(`jest` | `cypress`).

      • `type` (enum, 필수): 테스트 유형(`unit` | `component` | `e2e`).

      • `language` (enum, 선택 사항): 코드의 언어(`javascript` | `typescript` | `jsx` | `tsx`, 기본값: `javascript`).

      • `description` (문자열, 선택 사항): 테스트 사례에 대한 설명입니다.

  • runTest : 테스트를 실행하고 결과를 반환합니다.

    • 매개변수 :

      • `sourceCode` (문자열, 필수): 테스트 중인 소스 코드.

      • `testCode` (문자열, 필수): 실행할 테스트 코드.

      • `framework` (enum, 필수): 테스트 프레임워크(`jest` | `cypress`).

      • `type` (enum, 필수): 테스트 유형(`unit` | `component` | `e2e`).

      • `config` (레코드, 선택 사항): 테스트 실행을 위한 구성 객체.

  • testReactComponent : React 구성 요소에 대한 구성 요소 테스트를 실행합니다.

    • 매개변수 :

      • `componentCode` (문자열, 필수): React 컴포넌트의 소스 코드.

      • `testCode`(문자열, 선택 사항): 구성 요소에 대한 테스트 코드(제공되지 않으면 자동 생성됨).

      • `framework`(열거형, 선택 사항): 테스트 프레임워크(`jest` | `cypress`, 기본값: `jest`).

      • `props`(레코드, 선택 사항): 테스트 중에 구성 요소에 전달할 속성입니다.

      • `autoGenerateTest` (boolean, 선택 사항): 제공되지 않으면 자동으로 테스트 코드를 생성합니다(기본값: `true`).

자원

  • templates : 테스트 템플릿을 제공합니다.

    • URI : `templates://{framework}/{type}`

    • 매개변수 :

      • `framework` (문자열, 필수): 테스트 프레임워크(`jest` | `cypress`).

      • `type` (문자열, 필수): 템플릿 유형(`unit` | `component`).

  • docs : 테스트 프레임워크에 대한 문서를 제공합니다.

    • URI : `docs://{topic}`

    • 매개변수 :

      • `topic` (문자열, 필수): 문서 주제(`jest` | `cypress` | `react-testing-library`).

전개

도커

Docker를 사용하여 서버를 빌드하고 실행합니다.

```bash docker build -t mcp-프런트엔드-테스팅 . docker run -p 3000:3000 mcp-프런트엔드-테스팅 ```

구름

AWS Lambda, Google Cloud Run 또는 Azure Functions와 같은 클라우드 플랫폼에 배포하여 서버리스 또는 컨테이너화된 배포를 구현합니다.


참고 : 이 서버는 LLM이 프런트엔드 테스트 작업을 수행할 수 있도록 MCP 클라이언트와 함께 사용하도록 설계되었습니다.

Available Tools

4 tools
analyzeCodeD
ParametersJSON Schema
NameRequiredDescriptionDefault
codeYes
languageNojavascript

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generateTestD
ParametersJSON Schema
NameRequiredDescriptionDefault
codeYes
descriptionNo
frameworkYes
languageNojavascript
typeYes

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

runTestD
ParametersJSON Schema
NameRequiredDescriptionDefault
configNo
frameworkYes
sourceCodeYes
testCodeYes
typeYes

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

testReactComponentD
ParametersJSON Schema
NameRequiredDescriptionDefault
autoGenerateTestNo
componentCodeYes
frameworkNojest
propsNo
testCodeNo

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 4 tool updatesv1.0.0
    • First observedanalyzeCode
    • First observedgenerateTest
    • First observedrunTest
    • First observedtestReactComponent

TDQS

D1.6/5.0
Disambiguation3/5

The tools have some overlap in purpose, particularly 'generateTest' and 'testReactComponent' which both relate to testing, but they appear to target different scopes (general vs. React-specific). 'analyzeCode' and 'runTest' are more distinct, focusing on analysis and execution respectively. The lack of descriptions makes disambiguation more challenging but not impossible.

Naming Consistency2/5

The naming is inconsistent with mixed conventions: 'analyzeCode', 'generateTest', and 'runTest' use camelCase, while 'testReactComponent' uses a different style that blends verb and noun without clear separation. There is no uniform pattern across all tools, making them less predictable and readable.

Tool Count4/5

With 4 tools, the count is reasonable for a frontend testing server, as it covers key areas like analysis, test generation, execution, and component testing. It's slightly lean but appropriate for the apparent scope, avoiding bloat while providing essential functionality.

Completeness3/5

The tool set covers core testing workflows (analyze, generate, run, and component test), but there are notable gaps such as missing tools for mocking, debugging, or reporting results. Without descriptions, it's hard to assess full coverage, but the surface seems functional yet incomplete for comprehensive frontend testing.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • F
    license
    C
    quality
    D
    maintenance
    Enables comprehensive analysis of JavaScript/TypeScript project testing setups by detecting frameworks like Jest, Vitest, and Cypress, analyzing test coverage metrics, and generating actionable recommendations for improving test quality. Provides detailed insights into test structure, dependencies, and coverage thresholds with visual feedback.
    3
    1
    -
  • A
    license
    Not graded
    quality
    D
    maintenance
    Analyzes frontend project code (React, Vue, Angular) and converts it into AI-understandable flow diagrams and object structures. Provides tools for code analysis, variable/function/component inspection, and project structure insights.
    22
    MIT
  • F
    license
    Not graded
    quality
    D
    maintenance
    Enables AI-powered frontend code review and unit test generation for Phabricator diffs, supporting React/TypeScript analysis, multi-dimensional code review (performance, security, accessibility, i18n), and intelligent test case generation with Vitest/Jest support.
    1
    -
  • F
    license
    Not graded
    quality
    D
    maintenance
    Provides real-time debugging, code quality monitoring, and performance insights for React/Next.js applications with features including Chrome DevTools integration, breakpoint management, complexity analysis, and live error streaming.
    13
    1
    -

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/StudentOfJS/mcp-frontend-testing'

If you have feedback or need assistance with the MCP directory API, please join our Discord server