Why Cypress is built for modern web testing - Automation Benefits in Action

Verify Cypress can test a modern web application login flow

Preconditions (2)

Step 1: Open the web application homepage

Step 2: Locate the username input field and enter 'testuser'

Step 3: Locate the password input field and enter 'Test@1234'

Step 4: Click the login button

Step 5: Wait for the dashboard page to load

Step 6: Verify the URL contains '/dashboard'

Step 7: Verify the dashboard page shows a welcome message containing 'Welcome, testuser'

✅ Expected Result: User is successfully logged in and redirected to the dashboard page with a welcome message

Automation Requirements - Cypress

Assertions Needed:

Verify URL contains '/dashboard' after login

Verify welcome message contains username 'testuser'

Best Practices:

Use cy.get() with data-cy attributes for selectors

Use cy.contains() for text verification

Use explicit waits with cy.intercept() or cy.wait() for network calls

Keep tests isolated and independent

Use beforeEach() to set up preconditions

Automated Solution

Cypress

describe('Modern Web App Login Flow', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000')
  })

  it('logs in successfully and shows dashboard', () => {
    cy.get('[data-cy=username-input]').type('testuser')
    cy.get('[data-cy=password-input]').type('Test@1234')
    cy.get('[data-cy=login-button]').click()

    // Wait for dashboard to load by checking URL
    cy.url().should('include', '/dashboard')

    // Verify welcome message
    cy.contains('Welcome, testuser').should('be.visible')
  })
})

This Cypress test suite automates the login flow of a modern web application.

beforeEach() ensures the homepage is loaded before each test.

Selectors use data-cy attributes for stable and clear targeting.

We type the username and password, then click the login button.

We assert the URL contains /dashboard to confirm navigation.

Finally, we check the welcome message is visible and contains the username.

This approach uses Cypress best practices like explicit assertions and clear selectors.

Common Mistakes - 3 Pitfalls

Using CSS classes or IDs that frequently change as selectors

Not waiting for page or network to load before assertions

Mixing multiple test steps in one test without clear separation

Bonus Challenge

Now add data-driven testing to run the login test with 3 different username and password combinations

Show Hint