Generate comprehensive Cypress end-to-end tests with commands, assertions, fixtures, and best practices for modern web applications
Generate comprehensive Cypress end-to-end tests following modern best practices from the official Cypress documentation (docs.cypress.io).
Creates production-ready Cypress test suites with:
When the user requests Cypress tests, follow these steps:
1. **Understand the Testing Context**
- Ask what application or feature needs testing
- Identify the type of test needed (E2E, component, API, accessibility)
- Determine the framework (React, Vue, Angular, Svelte, or vanilla JS)
2. **Structure the Test Suite**
- Use descriptive `describe()` blocks for test suites
- Write focused `it()` blocks for individual test cases
- Follow Cypress best practices: avoid conditional testing, use data attributes for selectors
- Implement proper test isolation
3. **Generate Core Test Patterns**
**E2E Test Structure:**
```javascript
describe('Feature Name', () => {
beforeEach(() => {
cy.visit('/path')
})
it('performs expected user action', () => {
cy.get('[data-cy="selector"]').type('input{enter}')
cy.get('[data-cy="result"]').should('have.length', 1)
})
})
```
**Component Test Structure:**
```javascript
import Component from './Component'
it('renders with expected props', () => {
cy.mount(<Component prop="value" />)
cy.get('element').should('contain.text', 'value')
})
```
4. **Implement Key Cypress Features**
- **Selectors:** Prefer `data-cy`, `data-test`, or `data-testid` attributes
- **Assertions:** Use `.should()` with automatic retry-ability
- **Network Control:** Intercept and stub API calls with `cy.intercept()`
- **Fixtures:** Load test data from `cypress/fixtures/`
- **Custom Commands:** Create reusable commands in `support/commands.js`
- **Automatic Waiting:** Rely on Cypress's built-in waiting (no manual `cy.wait()` without intercepts)
5. **Add Network Request Handling**
```javascript
cy.intercept('POST', '/api/todos', { fixture: 'todo.json' }).as('addTodo')
cy.get('[data-cy="add-btn"]').click()
cy.wait('@addTodo').its('response.statusCode').should('eq', 201)
```
6. **Include Accessibility Checks**
```javascript
it('has accessible form elements', () => {
cy.visit('/form')
cy.get('img#logo').should('have.attr', 'alt', 'Logo Text')
cy.get('input').should('have.attr', 'aria-label')
})
```
7. **Generate Configuration**
- Create `cypress.config.js` with base URL, viewport, and timeouts
- Set up folder structure: `e2e/`, `fixtures/`, `support/`
- Configure TypeScript support if needed
8. **Add Best Practices**
- Use `beforeEach()` for setup, not before test starts
- Avoid testing external sites
- Test user-visible behavior, not implementation details
- Keep tests independent and isolated
- Use Page Object Model for complex applications
9. **Include Example Fixtures**
Create JSON fixtures for common test data scenarios
10. **Document Test Commands**
- Add comments explaining complex assertions
- Document custom commands
- Include installation and run instructions
**Time Travel Debugging:**
```javascript
cy.get('button').click() // Hover in Command Log to see snapshot
```
**Chaining Assertions:**
```javascript
cy.get('[data-cy="list"]')
.should('be.visible')
.and('have.length', 3)
.first()
.should('contain', 'Item 1')
```
**Aliasing Elements:**
```javascript
cy.get('table').as('dataTable')
cy.get('@dataTable').find('tr').should('have.length', 5)
```
**Conditional Logic (Avoid when possible):**
```javascript
// Instead of conditional tests, ensure deterministic starting state
cy.request('POST', '/reset-db')
cy.visit('/app')
```
Provide:
1. Complete test file(s) with proper imports
2. `cypress.config.js` configuration
3. Fixture files (JSON) if needed
4. Custom commands in `cypress/support/commands.js`
5. Installation instructions
6. Run commands for local and CI environments
**User:** "Create Cypress tests for a todo app with add, complete, and delete functionality"
**Assistant:** Generates:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/cypress-e2e-testing-guide/raw