Common assertions (exist, be.visible, have.text) in Cypress - Framework Patterns

Framework Mode - Common assertions (exist, be.visible, have.text)

Folder Structure

  cypress/
  ├── e2e/
  │   ├── login.cy.js          # Test files with assertions
  │   └── dashboard.cy.js
  ├── support/
  │   ├── commands.js          # Custom commands for assertions
  │   └── e2e.js               # Global setup
  ├── fixtures/
  │   └── user.json            # Test data
  cypress.config.js             # Cypress configuration
  

Test Framework Layers

• Test Files (e2e/): Contains test scripts using common assertions like exist, be.visible, and have.text.
• Support Layer (support/): Holds reusable commands and setup code to simplify assertions and test steps.
• Fixtures (fixtures/): Stores static test data used in assertions to verify UI text or element presence.
• Configuration (cypress.config.js): Defines environment settings, base URL, and browser options.

Configuration Patterns

Use cypress.config.js to set base URL and environment variables.

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      username: 'testuser',
      password: 'password123'
    },
    setupNodeEvents(on, config) {
      // event listeners
    }
  }
})
  

Access environment variables in tests via Cypress.env('username').

Use fixtures for static text data to assert with have.text.

Test Reporting and CI/CD Integration

• Use built-in Cypress reporter for test results with pass/fail status.
• Integrate with CI tools like GitHub Actions or Jenkins to run tests on code push.
• Generate HTML reports using plugins like mochawesome for detailed assertion outcomes.
• Fail tests clearly when assertions like exist, be.visible, or have.text do not pass.

Best Practices

1. Use cy.get() with clear selectors for reliable element targeting.
2. Assert exist before checking visibility or text to avoid flaky tests.
3. Use be.visible to confirm the user can see the element, not just that it exists in the DOM.
4. Use have.text with exact or partial matching depending on test needs.
5. Keep assertions simple and focused on one condition per test step for clarity.

Self Check

Where in this folder structure would you add a new custom command to assert that an element has a specific CSS class?

Key Result

Organize Cypress tests with clear folder layers and use common assertions for reliable UI validation.