Skip to main content
Glama

MCP Cypress Page Object & Test Generator

by jprealini

MCP Cypress Page Object & Test Generator

This MCP (Model Context Protocol) server automatically generates complete Cypress Page Object classes AND comprehensive test suites for any web page.

Features

  • Web Scraping: Uses Puppeteer to fetch and render web pages
  • HTML Parsing: Uses Cheerio to parse HTML and extract element information
  • Page Object Generation: Creates complete TypeScript Page Object classes with:
    • Private element locators
    • Public getter methods
    • Interaction methods (click, type, select, etc.)
    • Workflow methods for common test scenarios
  • Test Suite Generation: Creates comprehensive Cypress test files with:
    • Positive test cases for all elements
    • Negative test cases for error handling
    • Workflow tests for common scenarios
    • Accessibility, performance, and edge case tests

Generated Output

The server generates two files:

1. Page Object Class ({ClassName}.ts)

export class ExampleComLoginPage { // Private elements #elements = { button_login: () => cy.get('#login-button'), input_username: () => cy.get('input[name="username"]'), link_home: () => cy.contains('a', 'Home') } // Public getters get ButtonLogin() { return this.#elements.button_login() } get InputUsername() { return this.#elements.input_username() } get LinkHome() { return this.#elements.link_home() } // Interaction methods clickButtonLogin() { return this.#elements.button_login().click() } typeInputUsername(text: string) { return this.#elements.input_username().type(text) } clickLinkHome() { return this.#elements.link_home().click() } // Workflow methods login(username: string, password: string) { this.typeInputUsername(username) this.typeInputPassword(password) this.clickButtonLogin() return this } }

2. Test Suite ({ClassName}.cy.ts)

import { ExampleComLoginPage } from './ExampleComLoginPage' describe('ExampleComLoginPage Tests', () => { let page: ExampleComLoginPage beforeEach(() => { cy.visit('https://example.com/login') page = new ExampleComLoginPage() }) describe('Element Interactions', () => { it('should click button_login', () => { page.clickButtonLogin() }) it('should type in input_username', () => { page.typeInputUsername('test input') page.getInputUsername().should('have.value', 'test input') }) }) describe('Login Workflow', () => { it('should login with valid credentials', () => { page.login('validuser@example.com', 'validpassword') cy.url().should('not.include', '/login') }) it('should show error with invalid credentials', () => { page.login('invalid@example.com', 'wrongpassword') cy.contains('Invalid credentials').should('be.visible') }) }) describe('Error Handling', () => { it('should handle network errors gracefully', () => { cy.intercept('GET', '**', { forceNetworkError: true }) cy.visit('https://example.com/login') }) }) })

Test Categories Generated

Positive Test Cases

  • Element Interactions: Click, type, clear, check/uncheck for all detected elements
  • Workflow Tests: Login, search, navigation workflows
  • Form Validation: Successful form submissions
  • Element Visibility: All elements are visible and accessible

Negative Test Cases

  • Error Handling: Network errors, server errors, slow connections
  • Validation Errors: Empty fields, invalid formats, required field validation
  • Edge Cases: Large inputs, special characters, unicode text
  • Accessibility: ARIA labels, keyboard navigation

🔧 Additional Test Types

  • Performance Tests: Load times, rapid interactions
  • Responsive Tests: Different viewport sizes
  • Accessibility Tests: ARIA compliance, keyboard navigation
  • Security Tests: Input sanitization, XSS prevention

Element Types Supported

  • Buttons: Click interactions with validation
  • Input Fields: Type, clear, check/uncheck (for checkboxes/radio)
  • Links: Click interactions with navigation verification
  • Select Dropdowns: Select options with validation
  • Textareas: Type and clear with content verification
  • Forms: Submit interactions with success/error handling

Workflow Detection

The server intelligently detects common patterns and generates appropriate tests:

  • Login Forms: Username/password validation, error handling
  • Search Forms: Query validation, results verification
  • Navigation: Home links, breadcrumbs, menu items
  • Form Submissions: Success states, validation errors

Installation

npm install

Usage

  1. Start the server:
    npx tsx main.ts
  2. Use with an MCP client: The server exposes a generateLocator tool that accepts a URL parameter.Example tool call:
    { "method": "tools/call", "params": { "name": "generateLocator", "arguments": { "url": "https://example.com/login" } } }
  3. Response format: The server returns both the Page Object class and test suite:
    // ===== PAGE OBJECT CLASS ===== // Save this as: ExampleComLoginPage.ts export class ExampleComLoginPage { ... } // ===== CYPRESS TESTS ===== // Save this as: ExampleComLoginPage.cy.ts describe('ExampleComLoginPage Tests', () => { ... }

Example Usage in Tests

// Use the generated Page Object import { ExampleComLoginPage } from './ExampleComLoginPage' describe('Login Page', () => { const page = new ExampleComLoginPage() it('should login successfully', () => { page.login('username', 'password') page.verifyPageLoaded() }) }) // Run the generated test suite // npx cypress run --spec "cypress/e2e/ExampleComLoginPage.cy.ts"

Dependencies

  • @modelcontextprotocol/sdk: MCP server implementation
  • puppeteer: Web scraping and page rendering
  • cheerio: HTML parsing and element selection
  • zod: Schema validation
  • typescript: Type safety

Error Handling

The server includes comprehensive error handling for:

  • Invalid URLs
  • Network connectivity issues
  • Page loading failures
  • HTML parsing errors

Browser Configuration

The server uses Puppeteer with the following settings:

  • Headless mode for server environments
  • No-sandbox mode for containerized deployments
  • Network idle waiting for dynamic content

Contributing

To add support for new element types, interaction methods, or test patterns, modify the generatePageObjectClass and generateCypressTests functions in main.ts.

-
security - not tested
F
license - not found
-
quality - not tested

An MCP server that automatically generates TypeScript Page Object classes and comprehensive Cypress test suites for any web page, supporting element interactions, workflow tests, and both positive and negative testing scenarios.

  1. Features
    1. Generated Output
      1. Page Object Class ({ClassName}.ts)
      2. Test Suite ({ClassName}.cy.ts)
    2. Test Categories Generated
      1. ✅ Positive Test Cases
      2. ❌ Negative Test Cases
      3. 🔧 Additional Test Types
    3. Element Types Supported
      1. Workflow Detection
        1. Installation
          1. Usage
            1. Example Usage in Tests
              1. Dependencies
                1. Error Handling
                  1. Browser Configuration
                    1. Contributing

                      Related MCP Servers

                      • A
                        security
                        A
                        license
                        A
                        quality
                        A TypeScript-based MCP server utilizing the UseScraper API to provide web scraping capabilities, allowing users to extract content from webpages in various formats.
                        Last updated -
                        1
                        1
                        JavaScript
                        MIT License
                        • Apple
                      • A
                        security
                        A
                        license
                        A
                        quality
                        A TypeScript-based MCP server that provides integration with the Qase test management platform, allowing you to manage projects, test cases, runs, results, plans, suites, and shared steps.
                        Last updated -
                        26
                        4
                        JavaScript
                        MIT License
                        • Apple
                      • -
                        security
                        A
                        license
                        -
                        quality
                        A TypeScript framework for building MCP servers with client session management capabilities, supporting tools definition, authentication, image content, logging, and error handling.
                        Last updated -
                        6,371
                        TypeScript
                        MIT License
                      • -
                        security
                        A
                        license
                        -
                        quality
                        An AI-powered MCP server that automates web testing workflows by enabling recording, execution, and discovery of tests through natural language prompts.
                        Last updated -
                        46
                        Python
                        Apache 2.0
                        • Linux
                        • Apple

                      View all related MCP servers

                      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/jprealini/cypress-mcp'

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