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