Generate Cypress tests with AI assistants on cloud browsers
A Cypress E2E/component testing skill covering correct chaining, network interception, and LambdaTest cloud execution.
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
Generate expert-level Cypress test scripts through natural language prompts to AI assistants
Execute Cypress tests across thousands of browser and device combinations on TestMu AI cloud
Integrate Cypress automation with CI/CD pipelines and GitHub Actions workflows
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
- No arbitrary waits: Zero
cy.wait(number)- use intercepts - Selectors: Prefer
data-cyattributes - 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.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.