Why assertions verify expected behavior in Cypress - Automation Benefits in Action

Verify that the login button is enabled after entering valid credentials

Preconditions (1)

Step 1: Enter '[e-mail]' in the email input field with id 'email'

Step 2: Enter 'Password123' in the password input field with id 'password'

Step 3: Check if the login button with id 'login-btn' is enabled

✅ Expected Result: The login button should be enabled after entering valid email and password

Automation Requirements - Cypress

Assertions Needed:

Verify the login button is enabled after entering valid credentials

Best Practices:

Use cy.get() with id selectors for reliable element targeting

Use should() assertions to verify element state

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Login Button Enablement Test', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should enable login button after valid credentials are entered', () => {
    cy.get('#email').type('[e-mail]');
    cy.get('#password').type('Password123');
    cy.get('#login-btn').should('be.enabled');
  });
});

The test starts by visiting the login page before each test to ensure a clean state.

We use cy.get() with id selectors to find the email and password input fields and type valid credentials.

Finally, we assert that the login button is enabled using should('be.enabled'). This verifies the expected behavior that the button becomes clickable only after valid inputs.

Cypress automatically waits for elements to appear and become actionable, so no manual waits are needed.

Common Mistakes - 3 Pitfalls

Using incorrect selectors like class names that change frequently

Using cy.wait() with fixed time instead of relying on automatic waits

Not asserting the button state after typing inputs

Bonus Challenge

Now add data-driven testing with 3 different sets of valid credentials to verify the login button enables each time

Show Hint