Cypress + GitHub Actions test for the Account Management App

I’ve recently created a Account Manager App for testing purposes. You may check it out here: https://account-manager-app-express-mong-production.up.railway.app/ I’ve decided to further update it with some automated testing features. Namely, I want to make sure that the basic functions are working as expected every time I update my app. Even with some minor changes. These are features such as Sign up, Login, Logout, Change Password and Delete Account that should always work no matter the new changes I introduce. To make my plan work I need 2 tools: Cypress to actually make the testing of the above mentioned features and GitHub Actions to trigger the Cypress test each time some change is made to the app.

You can check out the GitHub repository here: https://github.com/NoToolsNoCraft/Account-Manager-App-Express-MongoDB

Here is the Cypress script:

describe('Account Manager App - Cypress Test', () => {
  const baseUrl = 'https://account-manager-app-express-mong-production.up.railway.app';

  it('should test account creation, password change, login, and account deletion', () => {
    // Step 1: Navigate to the main page
    cy.visit(`${baseUrl}/`);

    // Step 2: Click on the "Create a new account" button
    cy.get('a[href="/signup"]').click();

    // Step 3: Verify navigation to the signup page
    cy.url().should('eq', `${baseUrl}/signup`);

    // Step 4: Fill in the signup form and submit
    cy.get('input[name="name"]').type('CypressUsername');
    cy.get('input[name="password"]').type('CypressPassword');
    cy.get('input.sub[type="submit"]').click();

    // Step 5: Verify navigation to the dashboard page
    cy.url().should('eq', `${baseUrl}/signup`);

    // Step 6: Change the password
    cy.get('input#oldPassword').type('CypressPassword');
    cy.get('input#newPassword').type('CypressNew');
    cy.get('button[type="submit"]').contains('Change Password').click();

    // Step 7: Verify success message
    cy.contains('p', 'Password successfully changed.').should('be.visible');

    // Step 8: Click "Go back to the homepage"
    cy.get('a[href="/home"]').click();

    // Step 9: Click on the logout button
    cy.get('button[type="submit"]').contains('Logout').click();

    // Step 10: Verify navigation back to the login page
    cy.url().should('eq', `${baseUrl}/`);

    // Step 11: Log in with the new password
    cy.get('input[name="name"]').type('CypressUsername');
    cy.get('input[name="password"]').type('CypressNew');
    cy.get('input.sub[type="submit"]').click();

    // Verify navigation to the homepage
    cy.url().should('eq', `${baseUrl}/login`);

    // Step 12: Delete the account
    cy.get('button[type="submit"]').contains('Delete Account').click();

    // Confirm the popup
    cy.on('window:confirm', (text) => {
      expect(text).to.eq('Are you sure you want to delete your account?');
      return true; // Click OK
    });

    // Verify navigation to the delete-account page
    cy.url().should('eq', `${baseUrl}/delete-account`);

    // Final step: Navigate back to the login page
    cy.get('a[href="/"]').click();
  });
});

Also here is the YAML file used in my GitHub repository to activate the Cypress test above each time some change has been made to the repository:

name: Run Cypress Tests

on:
  push:
    branches:
      - main  # or the branch you want to trigger the tests on
  pull_request:
    branches:
      - main  # or the branch you want to trigger the tests on

jobs:
  cypress-run:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16'  # Specify the Node.js version

    - name: Install dependencies
      run: |
        npm ci  # Install dependencies from package-lock.json

    - name: Install Cypress
      run: npm install cypress --save-dev  # Install Cypress as a dev dependency

    - name: Run Cypress tests
      run: npx cypress run --spec 'cypress/e2e/'  # Runs all tests in the e2e folder