Skill

Generate Cypress tests with AI assistants on cloud browsers

A Cypress E2E/component testing skill covering correct chaining, network interception, and LambdaTest cloud execution.

Works with cypresstestmuailambdatestgithubclaude

35
Spark score
out of 100
Updated last month
Version 1.0.0

Add to Favorites

Why it matters

Enable AI coding assistants to write production-grade Cypress test automation code that runs on TestMu AI's cloud infrastructure with 10K+ real devices and 3,000+ browsers, eliminating manual test authoring and accelerating quality engineering workflows.

Outcomes

What it gets done

01

Generate expert-level Cypress test scripts through natural language prompts to AI assistants

02

Execute Cypress tests across thousands of browser and device combinations on TestMu AI cloud

03

Integrate Cypress automation with CI/CD pipelines and GitHub Actions workflows

04

Test locally hosted applications using TestMu AI tunnel with cloud-based Cypress execution

Install

Add it to your toolbox

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-cypress-skill | bash

Overview

Cypress Automation Skill

This skill generates Cypress E2E, component, and API tests with correct command chaining, data-cy selectors, network interception, auth caching via cy.session, and LambdaTest cloud execution configuration. Use it when a user asks to write Cypress tests, set up Cypress, or mentions cy.visit, cy.get, or cy.intercept.

What it does

This skill generates production-grade Cypress E2E and component tests in JavaScript or TypeScript, supporting both local execution and LambdaTest's TestMu AI cloud. It first determines the execution target - local via the Cypress open command, or cloud via a LambdaTest CLI plugin, defaulting to local when ambiguous - and the test type, whether E2E, component tests for React or Vue, or API tests via cy.request. Core patterns emphasize Cypress's specific async model: chain cy commands directly without async/await and never assign a cy.get() result to a variable for later use, since Cypress commands are enqueued rather than immediately resolved. Selector priority favors data-cy attributes, then data-testid, then text-based matching, then ID, with class selectors flagged as fragile. Documented anti-patterns include arbitrary timed waits instead of intercept-based waiting on an aliased request, assigning cy.get() results to variables instead of chaining, async/await with cy commands instead of then-based chaining, testing third-party sites directly instead of stubbing or mocking them, and one bloated setup hook instead of multiple focused, isolated spec files. It shows a basic describe and beforeEach test structure for a login flow covering valid and invalid credential scenarios, network interception patterns for stubbing an API response and asserting the intercepted request body or waiting on a real API call before proceeding, and a custom command pattern using session caching to preserve an authenticated login across tests.

Cloud execution on LambdaTest is configured through a JSON config specifying environment-variable-backed authentication, a browser and platform matrix such as Chrome on Windows or Firefox on macOS, and run settings like build name, parallel count, and spec glob, run through a dedicated CLI. A validation workflow checklist enforces zero arbitrary waits, data-cy selector preference, no async/await, should-based assertions, and per-test isolation through session-based auth caching. A quick-reference table covers common commands for opening interactively, running headless, running a specific spec or browser, component tests, environment variables, fixtures, file upload, viewport, and screenshots. Four topical reference files cover cloud integration, component testing, custom commands, and debugging flaky tests, and a fifteen-section advanced playbook covers production configuration, session-based auth patterns, the Page Object pattern, deeper network interception, component testing variants, custom command TypeScript declarations, database reset and seeding, time control, file operations, iframe and Shadow DOM access, accessibility audits, visual regression testing, CI/CD integration, a debugging table of common problems, and a best-practices checklist.

When to use - and when NOT to

Use it when a user asks to write Cypress tests, set up Cypress, test with cy commands, or mentions Cypress-specific terms like cy.visit, cy.get, or cy.intercept.

Inputs and outputs

Given a testing requirement, it produces Cypress E2E, component, or API test files following the correct chaining model, selector priority, and anti-pattern-free structure, plus cloud-execution configuration when requested.

Integrations

Cypress itself, local or cloud, LambdaTest's TestMu AI cloud grid via its dedicated Cypress CLI, and companion tools referenced in the advanced playbook such as an accessibility testing plugin, visual regression tooling, and Cypress's own cloud dashboard.

Who it's for

QA engineers and developers writing Cypress test suites who need correct async-model chaining, robust selectors, and production patterns like auth caching and network interception rather than flaky, ad hoc test scripts.

Source README

Cypress Automation Skill

When to Use

Use this skill when you need generates production-grade Cypress E2E and component tests in JavaScript or TypeScript. Supports local execution and TestMu AI cloud. Use when the user asks to write Cypress tests, set up Cypress, test with cy commands, or mentions "Cypress", "cy.visit", "cy.get", "cy.intercept"....

You are a senior QA automation architect specializing in Cypress.

Step 1 - Execution Target

User says "test" / "automate"
│
├─ Mentions "cloud", "TestMu", "LambdaTest", "cross-browser"?
│  └─ TestMu AI cloud via cypress-cli plugin
│
├─ Mentions "locally", "open", "headed"?
│  └─ Local: npx cypress open
│
└─ Ambiguous? → Default local, mention cloud option

Step 2 - Test Type

Signal Type Config
"E2E", "end-to-end", page URL E2E test cypress/e2e/
"component", "React", "Vue" Component test cypress/component/
"API test", "cy.request" API test via Cypress cypress/e2e/api/

Core Patterns

Command Chaining - CRITICAL

// ✅ Cypress chains — no await, no async
cy.visit('/login');
cy.get('#username').type('user@test.com');
cy.get('#password').type('password123');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');

// ❌ NEVER use async/await with cy commands
// ❌ NEVER assign cy.get() to a variable for later use

Selector Priority

1. cy.get('[data-cy="submit"]')     ← Best practice
2. cy.get('[data-testid="submit"]') ← Also good
3. cy.contains('Submit')            ← Text-based
4. cy.get('#submit-btn')            ← ID
5. cy.get('.btn-primary')           ← Class (fragile)

Anti-Patterns

Bad Good Why
cy.wait(5000) cy.intercept() + cy.wait('@alias') Arbitrary waits
const el = cy.get() Chain directly Cypress is async
async/await with cy Chain .then() if needed Different async model
Testing 3rd party sites Stub/mock instead Flaky, slow
Single beforeEach with everything Multiple focused specs Better isolation

Basic Test Structure

describe('Login', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should login with valid credentials', () => {
    cy.get('[data-cy="username"]').type('user@test.com');
    cy.get('[data-cy="password"]').type('password123');
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.get('[data-cy="welcome"]').should('contain', 'Welcome');
  });

  it('should show error for invalid credentials', () => {
    cy.get('[data-cy="username"]').type('wrong@test.com');
    cy.get('[data-cy="password"]').type('wrong');
    cy.get('[data-cy="submit"]').click();
    cy.get('[data-cy="error"]').should('be.visible');
  });
});

Network Interception

// Stub API response
cy.intercept('POST', '/api/login', {
  statusCode: 200,
  body: { token: 'fake-jwt', user: { name: 'Test User' } },
}).as('loginRequest');

cy.get('[data-cy="submit"]').click();
cy.wait('@loginRequest').its('request.body').should('deep.include', {
  email: 'user@test.com',
});

// Wait for real API
cy.intercept('GET', '/api/dashboard').as('dashboardLoad');
cy.visit('/dashboard');
cy.wait('@dashboardLoad');

Custom Commands

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-cy="username"]').type(email);
    cy.get('[data-cy="password"]').type(password);
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// Usage in tests
cy.login('user@test.com', 'password123');

TestMu AI Cloud

// cypress.config.js
module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // LambdaTest plugin
    },
  },
};

// lambdatest-config.json
{
  "lambdatest_auth": {
    "username": "${LT_USERNAME}",
    "access_key": "${LT_ACCESS_KEY}"
  },
  "browsers": [
    { "browser": "Chrome", "platform": "Windows 11", "versions": ["latest"] },
    { "browser": "Firefox", "platform": "macOS Sequoia", "versions": ["latest"] }
  ],
  "run_settings": {
    "build_name": "Cypress Build",
    "parallels": 5,
    "specs": "cypress/e2e/**/*.cy.js"
  }
}

Run on cloud:

npx lambdatest-cypress run

Validation Workflow

  1. No arbitrary waits: Zero cy.wait(number) - use intercepts
  2. Selectors: Prefer data-cy attributes
  3. No async/await: Pure Cypress chaining
  4. Assertions: Use .should() chains, not manual checks
  5. Isolation: Each test independent, use cy.session() for auth

Quick Reference

Task Command
Open interactive npx cypress open
Run headless npx cypress run
Run specific spec npx cypress run --spec "cypress/e2e/login.cy.js"
Run in browser npx cypress run --browser chrome
Component tests npx cypress run --component
Environment vars CYPRESS_BASE_URL=http://localhost:3000 npx cypress run
Fixtures cy.fixture('users.json').then(data => ...)
File upload cy.get('input[type="file"]').selectFile('file.pdf')
Viewport cy.viewport('iphone-x') or cy.viewport(1280, 720)
Screenshot cy.screenshot('login-page')

Reference Files

File When to Read
reference/cloud-integration.md LambdaTest Cypress CLI, parallel, config
reference/component-testing.md React/Vue/Angular component tests
reference/custom-commands.md Advanced commands, overwrite, TypeScript
reference/debugging-flaky.md Retry-ability, detached DOM, race conditions

Advanced Playbook

For production-grade patterns, see reference/playbook.md:

Section What's Inside
§1 Production Config Multi-env configs, setupNodeEvents
§2 Auth with cy.session() UI login, API login, validation
§3 Page Object Pattern Fluent page classes, barrel exports
§4 Network Interception Mock, modify, delay, wait for API
§5 Component Testing React/Vue mount, stubs, variants
§6 Custom Commands TypeScript declarations, drag-drop
§7 DB Reset & Seeding API reset, Cypress tasks, Prisma
§8 Time Control cy.clock(), cy.tick()
§9 File Operations Upload, drag-drop, download verify
§10 iframe & Shadow DOM Content access patterns
§11 Accessibility cypress-axe, WCAG audits
§12 Visual Regression Percy, cypress-image-snapshot
§13 CI/CD GitHub Actions matrix + Cypress Cloud parallel
§14 Debugging Table 11 common problems with fixes
§15 Best Practices 15-item production checklist

Limitations

  • Use this skill only when the task clearly matches its upstream source and local project context.
  • Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
  • Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

FAQ

Common questions

Discussion

Questions & comments · 0

Sign In Sign in to leave a comment.