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.

Practice

1. Which Cypress assertion checks if an element is present in the DOM, regardless of visibility?

easy

A. should('contain.text')

B. should('be.visible')

C. should('have.text')

D. should('exist')

Solution

1. Step 1: Understand the meaning of exist assertion

   The exist assertion checks if the element is present in the DOM, even if it is hidden.

2. Step 2: Compare with other assertions

   be.visible checks if the element is visible, have.text checks exact text content, and contain.text checks partial text. Only exist fits the question.

3. Final Answer:

   should('exist') -> Option D

4. Quick Check:

   Check presence = should('exist') [OK]

Hint: Exist means element is in DOM, visible or not [OK]

Common Mistakes:

• Confusing 'exist' with 'be.visible'
• Using 'have.text' to check presence
• Thinking 'contain.text' checks existence

2. Which of the following is the correct Cypress syntax to assert that an element with id submitBtn is visible?

easy

A. cy.get('#submitBtn').should('exist')

B. cy.get('#submitBtn').should('contain', 'Submit')

C. cy.get('#submitBtn').should('be.visible')

D. cy.get('#submitBtn').should('have.text', 'Submit')

Solution

1. Step 1: Identify the assertion for visibility

   The assertion should('be.visible') checks if the element is visible on the page.

2. Step 2: Match syntax with element selector

   cy.get('#submitBtn') selects the element by id. Combining with should('be.visible') is correct syntax to check visibility.

3. Final Answer:

   cy.get('#submitBtn').should('be.visible') -> Option C

4. Quick Check:

   Visible check = should('be.visible') [OK]

Hint: Use should('be.visible') to check if element shows on page [OK]

Common Mistakes:

• Using 'exist' instead of 'be.visible' for visibility
• Confusing 'have.text' with visibility check
• Using 'contain' without 'text' for exact text check

3. What will be the result of this Cypress test code?

cy.get('.message').should('have.text', 'Welcome!')

Assuming the element <div class='message'>Welcome!</div> is present and visible.

medium

A. Test passes because text matches exactly

B. Test fails because element is not checked for visibility

C. Test fails because 'have.text' is incorrect syntax

D. Test passes but ignores text content

Solution

1. Step 1: Understand have.text assertion

   This assertion checks if the element's text content exactly matches the given string.

2. Step 2: Check element and text

   The element <div class='message'>Welcome!</div> matches the text 'Welcome!' exactly, so the assertion passes.

3. Final Answer:

   Test passes because text matches exactly -> Option A

4. Quick Check:

   Exact text match = test passes [OK]

Hint: Exact text match means test passes with have.text [OK]

Common Mistakes:

• Assuming visibility must be checked separately
• Thinking 'have.text' is invalid syntax
• Confusing 'have.text' with partial text check

4. Identify the error in this Cypress test code:

cy.get('.alert').should('be.visible').should('have.text', 'Error occurred')

Given the element <div class='alert' style='display:none'>Error occurred</div> is hidden.

medium

A. The element selector is incorrect

B. The element is hidden, so 'be.visible' assertion fails

C. 'have.text' assertion syntax is wrong

D. Chaining assertions is not allowed in Cypress

Solution

1. Step 1: Check element visibility

   The element has style='display:none', so it is hidden and not visible.

2. Step 2: Understand assertion failure

   The should('be.visible') assertion will fail because the element is hidden, causing the test to fail before checking text.

3. Final Answer:

   The element is hidden, so 'be.visible' assertion fails -> Option B

4. Quick Check:

   Hidden element fails 'be.visible' [OK]

Hint: Hidden elements fail 'be.visible' assertion [OK]

Common Mistakes:

• Assuming 'have.text' runs even if visibility fails
• Thinking chaining assertions is invalid
• Ignoring element's CSS display property

5. You want to write a Cypress test to confirm a button with class .save-btn exists, is visible, and has the exact text Save. Which code snippet correctly performs all these checks?

hard

A. cy.get('.save-btn').should('exist').should('be.visible').should('have.text', 'Save')

B. cy.get('.save-btn').should('be.visible').should('contain.text', 'Save')

C. cy.get('.save-btn').should('exist').should('have.text', 'Save')

D. cy.get('.save-btn').should('have.text', 'Save').should('be.visible')

Solution

1. Step 1: Check presence, visibility, and exact text

   We need to confirm the element exists, is visible, and has exact text 'Save'.

2. Step 2: Verify chaining of assertions

   cy.get('.save-btn').should('exist').should('be.visible').should('have.text', 'Save') chains should('exist'), should('be.visible'), and should('have.text', 'Save') correctly to check all conditions.

3. Final Answer:

   cy.get('.save-btn').should('exist').should('be.visible').should('have.text', 'Save') -> Option A

4. Quick Check:

   Chain exist, visible, exact text for full check [OK]

Hint: Chain all assertions to check presence, visibility, and text [OK]

Common Mistakes:

• Skipping 'exist' check before visibility
• Using 'contain.text' instead of 'have.text' for exact match
• Not chaining all required assertions