Cypress vs Selenium vs Playwright comparison - Automation Approaches Compared

Verify login functionality using Cypress

Preconditions (2)

Step 1: Open the login page at 'http://localhost:3000/login'

Step 2: Enter 'testuser' in the username input field with id 'username'

Step 3: Enter 'Test@1234' in the password input field with id 'password'

Step 4: Click the login button with id 'loginBtn'

Step 5: Wait for the dashboard page to load

Step 6: Verify that the URL is 'http://localhost:3000/dashboard'

Step 7: Verify that the page contains a welcome message with id 'welcomeMsg' and text 'Welcome, testuser!'

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

Automation Requirements - Cypress

Assertions Needed:

URL should be 'http://localhost:3000/dashboard' after login

Welcome message with correct text should be visible

Best Practices:

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

Use explicit assertions with .should()

Avoid hardcoded waits; rely on Cypress automatic waits

Organize test steps clearly with comments

Automated Solution

Cypress

describe('Login Functionality Test', () => {
  it('should log in successfully and show welcome message', () => {
    // Open login page
    cy.visit('http://localhost:3000/login');

    // Enter username
    cy.get('#username').type('testuser');

    // Enter password
    cy.get('#password').type('Test@1234');

    // Click login button
    cy.get('#loginBtn').click();

    // Verify URL is dashboard
    cy.url().should('eq', 'http://localhost:3000/dashboard');

    // Verify welcome message
    cy.get('#welcomeMsg').should('be.visible').and('have.text', 'Welcome, testuser!');
  });
});

This Cypress test script automates the manual test case step-by-step.

First, cy.visit() opens the login page.

Then, cy.get('#username') and cy.get('#password') select the input fields by their IDs and type the credentials.

The login button is clicked using cy.get('#loginBtn').click().

After login, cy.url().should('eq', ...) asserts the URL is the dashboard page.

Finally, cy.get('#welcomeMsg') checks the welcome message is visible and has the correct text.

Cypress automatically waits for elements to appear, so no explicit waits are needed.

Common Mistakes - 3 Pitfalls

Using hardcoded waits like cy.wait(5000) instead of relying on Cypress automatic waits

Using non-unique or complex selectors instead of simple ID selectors

Not asserting the URL after login

Bonus Challenge

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

Show Hint