This MCP server automatically generates Cypress Page Object classes and comprehensive test suites for any web page by analyzing its structure.
Core Capabilities:
Web Scraping & Analysis: Uses Puppeteer to fetch and render web pages (including dynamic content) and Cheerio to parse HTML elements
Page Object Generation: Creates TypeScript classes with private element locators, public getters, interaction methods (click, type, select, clear), and workflow methods for common patterns like login and search
Comprehensive Test Generation: Produces test suites covering positive tests (interactions, workflows, validation), negative tests (error handling, edge cases), and additional tests (accessibility, performance, responsive design, security)
Element Support: Handles buttons, input fields, links, select dropdowns, textareas, and forms
Workflow Detection: Intelligently identifies patterns like login forms, search forms, and navigation flows to generate appropriate methods and tests
File Creation: Directly writes Page Object and test files into your Cypress project structure with custom naming and workspace path options
Available Tools:
generateLocator: Returns generated Page Object and test suite code for a given URLcreateCypressFiles: Creates and saves files directly into your Cypress project with configuration options
Uses Cheerio to parse HTML and extract element information from web pages for test generation
Generates complete Cypress Page Object classes and comprehensive test suites for web pages, including positive and negative test cases, workflow tests, and accessibility tests
Uses Puppeteer for web scraping and page rendering to fetch and analyze web pages before generating tests
Creates TypeScript Page Object classes with private element locators, public getter methods, and interaction methods
Utilizes Zod for schema validation in the generated test suites
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP Cypress Page Object Generatorcreate a page object for the login page at https://example.com/login"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Cypress Page Object Generator
This MCP server automatically generates Cypress Page Object classes for any web page provided.
NPM package:
Related MCP server: QASE MCP Server
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.)
Sample prompt:
Generated Output
The server generates:
1. Page Object Class ({ClassName}.ts)
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
Installation
Follow standard procedures to install an MCP in the client of your choice
Usage
Start the server:
node index.jsUse with an MCP client: The server exposes a
generatePageObjectFiletool that accepts a URL parameter.Example tool call:
{ "method": "tools/call", "params": { "name": "generatePageObjectFile", "arguments": { "url": "https://example.com/login" } } }Response format: The server returns both the Page Object class:
// ===== PAGE OBJECT CLASS ===== // Save this as: ExampleComLoginPage.ts export class ExampleComLoginPage { ... }
Dependencies
@modelcontextprotocol/sdk: MCP server implementationpuppeteer: Web scraping and page renderingcheerio: HTML parsing and element selectionzod: Schema validationtypescript: 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 function in index.js.
Troubleshooting: Updating to the Latest MCP Version
If you are intending to update to the latest version of this MCP server package but the new version is not being pulled by npm, try this:
Clear the NPM cache and reinstall the package:
npm cache clean --force npm install @jprealini/cypress-mcp@latest --save-devIf using a lockfile (
npm installFor global installs, update globally:
npm install -g @jprealini/cypress-mcp@latestVerify the installed version:
npm list @jprealini/cypress-mcp
These steps ensure consumers always get the latest published MCP version and avoid issues with cached or locked old versions.
Example: Generated Page Object Format (saucedemo.com)
Below is an example of the expected Page Object format generated by MCP for saucedemo.com:
This format follows one of the mostly used page object standards, using data attributes for selectors, private element encapsulation, public getters, value/state getters, and interaction methods for each element.
If you need or expect a different pattern, you can generate this base structure using this MCP, and then use your own instruction set to edit it to fit your needs, using a prompt like: