personamanagmentlayer Cypress Expert
Core Concepts
Cypress Framework
- JavaScript-Based - Native JavaScript testing
- Real-Time Reloads - Auto-reloading on file changes
- Time Travel - Debug via snapshots
- Automatic Waiting - No explicit waits needed
- Network Control - Request stubbing and spying
- Screenshots & Videos - Built-in capture
Test Structure
- describe/it - Mocha-style test organization
- Hooks - before, beforeEach, after, afterEach
- Custom Commands - Reusable test logic
- Fixtures - Test data management
- Aliases - Reference DOM elements and requests
- Chains - Fluent command interface
Advanced Features
- Intercepts - Network request control
- Component Testing - React, Vue, Angular components
- Visual Testing - Applitools integration
- Code Coverage - Test coverage reports
- Parallelization - Cypress Cloud parallel execution
- Plugins - Extend functionality
Best Practices
Test Organization
- Keep tests independent and isolated
- Use descriptive test names
- Group related tests with describe blocks
- Use beforeEach for common setup
- Clean up after tests
- Avoid test interdependencies
Selectors
- Prefer data-* attributes for testing
- Use cy.contains() for text-based selection
- Avoid CSS classes and IDs tied to styling
- Use role-based selectors when possible
- Create stable selectors
- Document selector strategies
Assertions
- Use should() for auto-retry assertions
- Chain assertions when appropriate
- Test both positive and negative cases
- Provide meaningful assertion messages
- Use explicit assertions
- Verify multiple aspects
Performance
- Use cy.session() for authentication
- Leverage fixtures for test data
- Mock external API calls
- Minimize page visits
- Use aliases to avoid repeated queries
- Run tests in parallel with Cypress Cloud
Anti-Patterns
Common Mistakes
- Using cy.wait() with arbitrary time
- Not using data-testid attributes
- Overly complex test logic
- Sharing state between tests
- Testing implementation details
- Missing cleanup in afterEach
Selector Issues
- Using fragile CSS selectors
- Relying on element position
- Not using data attributes
- Over-specific selectors
- Using XPath unnecessarily
- Coupling tests to UI structure
Test Design Problems
- Tests depending on execution order
- Too many assertions in one test
- Not testing edge cases
- Missing error scenarios
- Duplicate test logic
- Poor fixture management
Reference Documentation
Detailed material lives alongside this skill and is read on demand:
- Implementation Examples — Basic Test Structure, Custom Commands, Network Interception, Fixtures and Test Data, Page Object Pattern, Component Testing, Configuration (cypress.config.js)
Resources
Official Documentation
- Cypress Documentation - Complete guide
- API Reference - API docs
- Best Practices - Guidelines
- Real World App - Example app
Learning Resources
- Cypress YouTube - Video tutorials
- Cypress Examples - Live examples
- Cypress Discord - Community chat
- Cypress Blog - Articles and updates
Tools & Extensions
- Cypress Studio - Test generator
- Cypress Dashboard - Test analytics
- Testing Library - Better selectors
- Cypress Plugins - Plugin directory
Community Resources
- GitHub Discussions - Q&A
- Stack Overflow - Community help
- Awesome Cypress - Curated resources
- Gitter Chat - Real-time chat