DEV Community

Cover image for Developer can write unit test by cypress prompt
Taki
Taki

Posted on

Developer can write unit test by cypress prompt

#typescript #nextjs #cypress #ai

🚀 TECHNICAL DOCUMENT: Cypress Prompt – Natural Language Test Automation (2025)

1. OBJECTIVE

This document explains:

  • What Cypress Prompt is and how NLP-based test automation works.
  • How Cypress converts natural language → test execution.
  • How to integrate it into our TypeScript + POM + SOLID Cypress framework.
  • A complete example using your code.
  • Comparison with Microsoft Playwright MCP Agent.

2. INTRODUCTION TO CYPRESS PROMPT (NLP)

🔍 What is Cypress Prompt?

Cypress Prompt is a new feature (2024–2025) that allows engineers to write Cypress tests in natural language, for example:

cy.prompt([
  "visit https://todomvc.com/examples/react/dist/",
  'type "Daily Report" into the new todo field',
  'type {enter} into the new todo field',
  'verify "Daily Report" todo is created successfully',
])
Enter fullscreen mode Exit fullscreen mode

Cypress will:

  1. Parse the natural language instructions
  2. Identify intents (visit, click, type, verify)
  3. Execute the steps automatically in the browser
  4. Generate a full run log in Cypress Cloud
  5. Optionally export code into traditional Cypress test syntax

🔥 Strengths

  • Create tests extremely fast (up to 80% faster for simple flows)
  • QA with basic English can participate
  • Very useful for prototyping and rapid regression test creation
  • Integrates directly into Cypress Cloud

⚠️ Limitations

  • Not a replacement for real automation architecture
  • Not suitable for highly dynamic or complex UI flows
  • Not good for API tests or data-driven scenarios
  • Requires strong English instruction clarity
  • Should be paired with POM for maintainability

3. NLP WORKFLOW OF CYPRESS PROMPT

🧠 1. User writes test instructions in English

Example:

“visit home page → add todo → verify new item exists”

⚙️ 2. Cypress parses the instructions

  • Detects action intent
  • Extracts selector context
  • Interprets entities (text input, button name, field)

🤖 3. Executes the test in the browser

  • Timelines
  • Snapshots
  • Screenshots
  • Logs

🧪 4. (Optional) Export to real code

You can generate Cypress .cy.ts code from the executed actions.

4. INTEGRATING CYPRESS PROMPT INTO OUR TYPESCRIPT + SOLID FRAMEWORK

Below is your code, reorganized cleanly using common SDET design patterns.

4.1 BasePage (abstract class) 

export abstract class BasePage {
  abstract visit(): void;

  protected find(selector: string) {
    return cy.get(selector);
  }
}
Enter fullscreen mode Exit fullscreen mode

4.2 DashboardTodoPage 

import { BasePage } from "./BasePage";

export class DashboardTodoPage extends BasePage {
  visit(): void {
    cy.visit("/");
  }

  loginWithPrompt() {
    cy.prompt([
      'visit https://todomvc.com/examples/react/dist/',
      'type "Daily Report" into the new todo field',
      'type {enter} into the new todo field',
      'verify "Daily Report" todo is created successfully',
    ]);
  }
}
Enter fullscreen mode Exit fullscreen mode

4.3 Test spec 

import { DashboardTodoPage } from "../pages/DashboardTodoPage";

describe("Create new todo app by prompt", () => {
  const dashboard = new DashboardTodoPage();

  it("create todo using cy prompt", () => {
    dashboard.visit();
    dashboard.loginWithPrompt();
  });
});
Enter fullscreen mode Exit fullscreen mode

4.4 cypress.config.ts 

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://todomvc.com/',
    supportFile: 'cypress/support/e2e.ts',
    specPattern: 'cypress/e2e/**/*.cy.{js,ts}',
    env: {
      CYPRESS_PROMPT_ENABLED: true,
    },
    experimentalPromptCommand: true,
  },
  projectId: '...',
})
Enter fullscreen mode Exit fullscreen mode

5. CYPRESS CLOUD WORKFLOW (WITH PROMPT)

  1. Code pushed to GitHub
  2. GitHub Action triggers Cypress Cloud
  3. Tests run in real browsers
  4. Cypress Cloud processes NLP steps
  5. Cloud provides:
* screenshots
* video
* snapshots
* execution timeline
* AI-generated summary
Enter fullscreen mode Exit fullscreen mode

6. WHEN TO USE CYPRESS PROMPT

✔ Ideal use cases:

  • Quickly validating new features
  • Creating UI tests rapidly
  • Helping manual testers write automation
  • Rapid prototyping
  • Simple end-to-end flows

❌ Not recommended for:

  • Complex UI with dynamic selectors
  • Large-scale regression suites
  • API chained tests
  • Data-driven scenarios
  • Performance, security, or load testing
  • Scenarios requiring high stability & consistency

7. CYPRESS PROMPT vs PLAYWRIGHT MCP AGENT (2025)

🎯 Overview

Playwright MCP Agent (Microsoft AI Agent) is a significantly more advanced AI automation model compared to Cypress Prompt.

Capability Cypress Prompt Playwright MCP Agent
NLP quality Good Excellent (Azure AI + MCP)
Code generation Medium Extremely strong
AI Decision Making Basic Multi-agent reasoning
Selector engine Medium Best in class (AI Locator 2.0)
API support Weak Strong
Parallel execution Good Enterprise-grade
Cross-browser Yes Yes (better)
Convert NLP → code Yes Yes (much better)
Designed for Rapid test creation Enterprise AI automation
Multi-step chaining Limited Strong (agent-to-agent reasoning)
Error recovery Weak Advanced self-healing

Top comments (0)