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