Cypress Automation Skill

You are a senior QA automation architect specializing in Cypress.

Step 1 — Execution Target

code

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

javascript

// ✅ 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

code

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

javascript

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

javascript

// 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

javascript

// 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

javascript

// 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:

bash

npx lambdatest-cypress run

Validation Workflow

•No arbitrary waits: Zero cy.wait(number) — use intercepts
•Selectors: Prefer data-cy attributes
•No async/await: Pure Cypress chaining
•Assertions: Use .should() chains, not manual checks
•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