Why test structure organizes assertions in Cypress - Automation Benefits in Action

Verify login page elements and successful login

Preconditions (1)

Step 1: Open the login page at 'https://example.com/login'

Step 2: Verify the email input field is visible and enabled

Step 3: Verify the password input field is visible and enabled

Step 4: Verify the login button is visible and enabled

Step 5: Enter '[e-mail]' in the email input field

Step 6: Enter 'Password123!' in the password input field

Step 7: Click the login button

Step 8: Verify the URL changes to 'https://example.com/dashboard'

Step 9: Verify the dashboard heading contains text 'Welcome, User!'

✅ Expected Result: All elements are visible and enabled before interaction. After login, the user is redirected to the dashboard page with a welcome message.

Automation Requirements - Cypress

Assertions Needed:

Check visibility and enabled state of email input

Check visibility and enabled state of password input

Check visibility and enabled state of login button

Check URL after login

Check dashboard welcome text

Best Practices:

Use Cypress commands chaining for clear test flow

Group related assertions logically within the test

Use descriptive test and assertion messages

Avoid redundant assertions by organizing them in a structured way

Use selectors by data attributes for stability

Automated Solution

Cypress

describe('Login Page Test', () => {
  it('should verify login page elements and perform successful login', () => {
    cy.visit('https://example.com/login');

    // Verify input fields and button are visible and enabled
    cy.get('[data-cy=email-input]')
      .should('be.visible')
      .and('be.enabled');

    cy.get('[data-cy=password-input]')
      .should('be.visible')
      .and('be.enabled');

    cy.get('[data-cy=login-button]')
      .should('be.visible')
      .and('be.enabled');

    // Enter credentials
    cy.get('[data-cy=email-input]').type('[e-mail]');
    cy.get('[data-cy=password-input]').type('Password123!');

    // Click login
    cy.get('[data-cy=login-button]').click();

    // Verify URL changed to dashboard
    cy.url().should('eq', 'https://example.com/dashboard');

    // Verify welcome message on dashboard
    cy.get('[data-cy=dashboard-heading]')
      .should('be.visible')
      .and('contain.text', 'Welcome, User!');
  });
});

This test script uses Cypress to automate the manual test case steps.

First, it visits the login page URL.

Then it groups assertions to check that the email input, password input, and login button are all visible and enabled before interacting with them. Grouping these assertions helps keep the test organized and clear.

Next, it types the provided credentials into the input fields and clicks the login button.

After the login action, it asserts that the URL changes to the dashboard page, confirming navigation success.

Finally, it verifies that the dashboard heading contains the expected welcome text.

Selectors use data-cy attributes for stability and clarity.

This structure organizes assertions logically: first verifying page readiness, then performing actions, then verifying results. This approach makes the test easy to read, maintain, and debug.

Common Mistakes - 4 Pitfalls

Not grouping assertions and mixing checks with actions

Using fragile selectors like CSS classes or XPath that change often

Not verifying element visibility and enabled state before interacting

{'mistake': 'Hardcoding URLs without checking navigation properly', 'why_bad': 'May miss navigation failures or partial page loads.', 'correct_approach': "Use Cypress's cy.url() assertion to confirm correct page navigation."}

Bonus Challenge

Now add data-driven testing with 3 different sets of login credentials (valid and invalid) to verify login success and failure messages.

Show Hint