End-to-end Testing Login and Signup Pages with Cypress

When building web applications, it’s essential to ensure the login and signup pages work smoothly. One of the most efficient ways to achieve this is through automated testing using Cypress. Cypress makes it simple to write tests that check user interactions, ensuring everything behaves as expected.

In this post, we'll walk through how to test login and signup pages using Cypress. We'll focus on three core functionalities:

• Login Process: Verifying that a user can log in with correct credentials.

• Signup Process: Ensuring that a new user can sign up successfully.

• Post-login Verification: Confirming that the user is redirected to the correct success page.

Setting Up Cypress

Before writing the tests, ensure you have Cypress set up in your project. If you haven’t already installed Cypress, run:

npm install cypress --save-dev

Once installed, open Cypress for the first time:

npx cypress open

This will launch the Cypress Test Runner and open the Cypress UI, where you can run your tests.

Writing Login Tests

First, let’s create tests to ensure users can log in properly.

Test Case 1: Successful Login

• Visit the Login Page

• Fill in the login form with valid credentials

• Click the Submit button

• Verify that the user is redirected to the success page

• Confirm the page displays "Congratulations student. You successfully logged in!"

Cypress Test Code:

describe('Login Page Tests', () => {
  it('should log in with valid credentials', () => {
    cy.visit('https://practicetestautomation.com/practice-test-login/');
    
    cy.get('#username').type('student');
    cy.get('#password').type('Password123');
    cy.get('#submit').click();
    
    cy.url().should('include', '/logged-in-successfully');
    cy.contains('Congratulations student. You successfully logged in!').should('be.visible');
  });

  it('should display an error for invalid credentials', () => {
    cy.visit('https://practicetestautomation.com/practice-test-login/');
    
    cy.get('#username').type('wronguser');
    cy.get('#password').type('wrongpassword');
    cy.get('#submit').click();
    
    cy.contains('Your username is invalid!').should('be.visible');
  });
});

Writing Signup Tests

Next, let’s test the signup page to ensure that new users can sign up.

Test Case 2: Successful Signup

• Visit the Signup Page

• Fill in the form with valid information

• Click the Submit button

• Verify the user is redirected to the login page

Cypress Test Code:

describe('Signup Page Tests', () => {
  it('should sign up a new user', () => {
    cy.visit('/signup');
    
    cy.get('input[name="username"]').type('newuser');
    cy.get('input[name="email"]').type('newuser@example.com');
    cy.get('input[name="password"]').type('newpassword');
    cy.get('input[name="confirmPassword"]').type('newpassword');
    cy.get('button[type="submit"]').click();
    
    cy.url().should('include', '/login');
    cy.contains('Please log in to continue').should('be.visible');
  });
});

Post-Login Verification

Once a user logs in successfully, they should be redirected to the Logged In Successfully page.

Test Case 3: Verify Logged In Successfully Page

• Confirm the URL is /logged-in-successfully

• Verify the page title is "Logged In Successfully"

• Ensure the message "Congratulations student. You successfully logged in!" is displayed

• Verify the Log Out button is present and functional

Cypress Test Code:

describe('Logged In Successfully Page Tests', () => {
  it('should display success message after login', () => {
    cy.visit('https://practicetestautomation.com/practice-test-login/');
    
    cy.get('#username').type('student');
    cy.get('#password').type('Password123');
    cy.get('#submit').click();
    
    cy.url().should('include', '/logged-in-successfully');
    cy.contains('Congratulations student. You successfully logged in!').should('be.visible');
  });
  
  it('should log out successfully', () => {
    cy.get('a').contains('Log out').click();
    cy.url().should('include', '/practice-test-login/');
  });
});

Best Practices for Cypress Testing

• Keep Tests Independent: Each test should be able to run on its own, without relying on other tests to pass first.

• Clean the State: Ensure that the application is in a clean state before running each test. Use Cypress commands to reset the app state if necessary.

• Test Edge Cases: Consider testing invalid inputs, network errors, and other edge cases to ensure your app behaves as expected in all scenarios.

Conclusion

Testing login and signup pages with Cypress can help automate the process of ensuring your app's authentication functionality works as expected. By writing simple tests for login, signup, and post-login verification, you can catch potential issues early and improve the overall reliability of your application.

Happy testing!