Cypress Automation Skill
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
- 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 |
1---2name: cypress-skill3description: 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". Triggers on: "Cypress", "cy.", "component test", "E2E test", "TestMu", "LambdaTest".4license: MIT5---6
7# Cypress Automation Skill
8
9You are a senior QA automation architect specializing in Cypress.
10
11## Step 1 — Execution Target
12
13```
14User says "test" / "automate"
15│
16├─ Mentions "cloud", "TestMu", "LambdaTest", "cross-browser"?
17│ └─ TestMu AI cloud via cypress-cli plugin
18│
19├─ Mentions "locally", "open", "headed"?
20│ └─ Local: npx cypress open
21│
22└─ Ambiguous? → Default local, mention cloud option
23```
24
25## Step 2 — Test Type
26
27| Signal | Type | Config |
28|--------|------|--------|
29| "E2E", "end-to-end", page URL | E2E test | `cypress/e2e/` |
30| "component", "React", "Vue" | Component test | `cypress/component/` |
31| "API test", "cy.request" | API test via Cypress | `cypress/e2e/api/` |
32
33## Core Patterns
34
35### Command Chaining — CRITICAL
36
37```javascript
38// ✅ Cypress chains — no await, no async
39cy.visit('/login');
40cy.get('#username').type('user@test.com');
41cy.get('#password').type('password123');
42cy.get('button[type="submit"]').click();
43cy.url().should('include', '/dashboard');
44
45// ❌ NEVER use async/await with cy commands
46// ❌ NEVER assign cy.get() to a variable for later use
47```
48
49### Selector Priority
50
51```
521. cy.get('[data-cy="submit"]') ← Best practice
532. cy.get('[data-testid="submit"]') ← Also good
543. cy.contains('Submit') ← Text-based
554. cy.get('#submit-btn') ← ID
565. cy.get('.btn-primary') ← Class (fragile)
57```
58
59### Anti-Patterns
60
61| Bad | Good | Why |
62|-----|------|-----|
63| `cy.wait(5000)` | `cy.intercept()` + `cy.wait('@alias')` | Arbitrary waits |
64| `const el = cy.get()` | Chain directly | Cypress is async |
65| `async/await` with cy | Chain `.then()` if needed | Different async model |
66| Testing 3rd party sites | Stub/mock instead | Flaky, slow |
67| Single `beforeEach` with everything | Multiple focused specs | Better isolation |
68
69### Basic Test Structure
70
71```javascript
72describe('Login', () => {
73 beforeEach(() => {
74 cy.visit('/login');
75 });
76
77 it('should login with valid credentials', () => {
78 cy.get('[data-cy="username"]').type('user@test.com');
79 cy.get('[data-cy="password"]').type('password123');
80 cy.get('[data-cy="submit"]').click();
81 cy.url().should('include', '/dashboard');
82 cy.get('[data-cy="welcome"]').should('contain', 'Welcome');
83 });
84
85 it('should show error for invalid credentials', () => {
86 cy.get('[data-cy="username"]').type('wrong@test.com');
87 cy.get('[data-cy="password"]').type('wrong');
88 cy.get('[data-cy="submit"]').click();
89 cy.get('[data-cy="error"]').should('be.visible');
90 });
91});
92```
93
94### Network Interception
95
96```javascript
97// Stub API response
98cy.intercept('POST', '/api/login', {
99 statusCode: 200,
100 body: { token: 'fake-jwt', user: { name: 'Test User' } },
101}).as('loginRequest');
102
103cy.get('[data-cy="submit"]').click();
104cy.wait('@loginRequest').its('request.body').should('deep.include', {
105 email: 'user@test.com',
106});
107
108// Wait for real API
109cy.intercept('GET', '/api/dashboard').as('dashboardLoad');
110cy.visit('/dashboard');
111cy.wait('@dashboardLoad');
112```
113
114### Custom Commands
115
116```javascript
117// cypress/support/commands.js
118Cypress.Commands.add('login', (email, password) => {
119 cy.session([email, password], () => {
120 cy.visit('/login');
121 cy.get('[data-cy="username"]').type(email);
122 cy.get('[data-cy="password"]').type(password);
123 cy.get('[data-cy="submit"]').click();
124 cy.url().should('include', '/dashboard');
125 });
126});
127
128// Usage in tests
129cy.login('user@test.com', 'password123');
130```
131
132### TestMu AI Cloud
133
134```javascript
135// cypress.config.js
136module.exports = {
137 e2e: {
138 setupNodeEvents(on, config) {
139 // LambdaTest plugin
140 },
141 },
142};
143
144// lambdatest-config.json
145{
146 "lambdatest_auth": {
147 "username": "${LT_USERNAME}",
148 "access_key": "${LT_ACCESS_KEY}"
149 },
150 "browsers": [
151 { "browser": "Chrome", "platform": "Windows 11", "versions": ["latest"] },
152 { "browser": "Firefox", "platform": "macOS Sequoia", "versions": ["latest"] }
153 ],
154 "run_settings": {
155 "build_name": "Cypress Build",
156 "parallels": 5,
157 "specs": "cypress/e2e/**/*.cy.js"
158 }
159}
160```
161
162**Run on cloud:**
163```bash
164npx lambdatest-cypress run
165```
166
167## Validation Workflow
168
1691. **No arbitrary waits**: Zero `cy.wait(number)` — use intercepts
1702. **Selectors**: Prefer `data-cy` attributes
1713. **No async/await**: Pure Cypress chaining
1724. **Assertions**: Use `.should()` chains, not manual checks
1735. **Isolation**: Each test independent, use `cy.session()` for auth
174
175## Quick Reference
176
177| Task | Command |
178|------|---------|
179| Open interactive | `npx cypress open` |
180| Run headless | `npx cypress run` |
181| Run specific spec | `npx cypress run --spec "cypress/e2e/login.cy.js"` |
182| Run in browser | `npx cypress run --browser chrome` |
183| Component tests | `npx cypress run --component` |
184| Environment vars | `CYPRESS_BASE_URL=http://localhost:3000 npx cypress run` |
185| Fixtures | `cy.fixture('users.json').then(data => ...)` |
186| File upload | `cy.get('input[type="file"]').selectFile('file.pdf')` |
187| Viewport | `cy.viewport('iphone-x')` or `cy.viewport(1280, 720)` |
188| Screenshot | `cy.screenshot('login-page')` |
189
190## Reference Files
191
192| File | When to Read |
193|------|-------------|
194| `reference/cloud-integration.md` | LambdaTest Cypress CLI, parallel, config |
195| `reference/component-testing.md` | React/Vue/Angular component tests |
196| `reference/custom-commands.md` | Advanced commands, overwrite, TypeScript |
197| `reference/debugging-flaky.md` | Retry-ability, detached DOM, race conditions |
198
199## Advanced Playbook
200
201For production-grade patterns, see `reference/playbook.md`:
202
203| Section | What's Inside |
204|---------|--------------|
205| §1 Production Config | Multi-env configs, setupNodeEvents |
206| §2 Auth with cy.session() | UI login, API login, validation |
207| §3 Page Object Pattern | Fluent page classes, barrel exports |
208| §4 Network Interception | Mock, modify, delay, wait for API |
209| §5 Component Testing | React/Vue mount, stubs, variants |
210| §6 Custom Commands | TypeScript declarations, drag-drop |
211| §7 DB Reset & Seeding | API reset, Cypress tasks, Prisma |
212| §8 Time Control | cy.clock(), cy.tick() |
213| §9 File Operations | Upload, drag-drop, download verify |
214| §10 iframe & Shadow DOM | Content access patterns |
215| §11 Accessibility | cypress-axe, WCAG audits |
216| §12 Visual Regression | Percy, cypress-image-snapshot |
217| §13 CI/CD | GitHub Actions matrix + Cypress Cloud parallel |
218| §14 Debugging Table | 11 common problems with fixes |
219| §15 Best Practices | 15-item production checklist |