CSS assertions in Cypress - Framework Patterns

Framework Mode - CSS assertions

Folder Structure

cypress/
├── e2e/                  # Test files with CSS assertions
│   └── styleAssertions.cy.js
├── support/              # Custom commands and reusable utilities
│   ├── commands.js       # Custom Cypress commands
│   └── index.js          # Support file loaded before tests
├── fixtures/             # Test data files (JSON, etc.)
├── videos/               # Recorded test runs
├── screenshots/          # Screenshots on test failure
cypress.config.js         # Cypress configuration file
package.json             # Project dependencies and scripts

Test Framework Layers

• Test Layer (cypress/e2e): Contains test files that include CSS assertions using cy.get() and .should() to check styles like color, font-size, visibility.
• Support Layer (cypress/support): Holds custom commands for reusable CSS assertions, e.g., assertCssProperty() to simplify style checks.
• Fixtures Layer (cypress/fixtures): Stores test data if needed for dynamic style tests or themes.
• Configuration Layer (cypress.config.js): Defines environment settings, base URLs, viewport sizes for responsive CSS testing.
• Reports & Artifacts: Screenshots and videos captured on test failures to help debug CSS issues visually.

Configuration Patterns

• Environment Variables: Use cypress.env.json or env in cypress.config.js to manage different base URLs or themes affecting CSS.
• Viewport Settings: Configure viewport sizes in tests or cypress.config.js to test responsive CSS styles.
• Custom Commands: Define reusable CSS assertion commands in cypress/support/commands.js to keep tests clean and consistent.
• Test Tags or Suites: Organize CSS-related tests in dedicated spec files or use tags to run only style checks when needed.

Test Reporting and CI/CD Integration

• Built-in Cypress Reporter: Shows pass/fail results with clear messages on CSS assertions.
• Screenshots & Videos: Automatically capture screenshots on failures to see exactly which CSS styles failed.
• CI/CD Integration: Run Cypress tests in pipelines (GitHub Actions, Jenkins) to catch CSS regressions early.
• Custom Reports: Use plugins like mochawesome for detailed HTML reports including CSS assertion results.

Best Practices for CSS Assertions Framework

1. Use Custom Commands: Create commands like cy.assertCssProperty(selector, property, value) to avoid repeating style checks.
2. Test Responsiveness: Include viewport changes in tests to verify CSS adapts correctly on different screen sizes.
3. Keep Tests Independent: Each CSS assertion test should not depend on others to avoid cascading failures.
4. Use Meaningful Selectors: Prefer data attributes or semantic classes for stable element targeting in CSS assertions.
5. Capture Visual Evidence: Enable screenshots on failure to help quickly identify style issues.

Self Check Question

Where in this folder structure would you add a new custom command to check if an element has a specific CSS property value?

Key Result

Organize Cypress tests with clear folder layers, reusable CSS assertion commands, and robust reporting for reliable style validation.