QA Workshop – Cypress Boilerplate

Welcome to the QA Workshop. This project is your starting point for writing automated end-to-end tests with Cypress.

You will be writing tests for the Login, Sign Up, and Password Reset flows of the TalentLMS Plus portal. The requirements are documented in the PRD – read it before you touch any code.

---

Prerequisites

• Node.js v18 or higher
• A TalentLMS dev portal (you should already have one)
• A test user account on your portal

---

Setup

1. Install dependencies

npm install

2. Configure your portal URL

Open cypress.config.js and replace the baseUrl value with your own portal:

baseUrl: 'https://your-subdomain.dev.talentlms.com'

3. Set up your credentials

Copy the example file and fill in your own values:

cp cypress.env.json.example cypress.env.json

Then open cypress.env.json and add your test account credentials:

{
  "username": "your_test_username",
  "password": "your_test_password"
}

cypress.env.json is listed in .gitignore — credentials are never committed to the repository.

---

Running Tests

Open the interactive Cypress runner (recommended while writing tests):

npm run cy:open

Run all tests headlessly (useful for CI):

npm run cy:run

Run a single spec:

npm run cy:run:login
npm run cy:run:signup
npm run cy:run:password-reset

---

Project Structure

cypress/
├── e2e/                         # Test files – one per feature flow
│   ├── login.cy.js              # Happy path scaffold – implement and expand from the PRD
│   ├── signup.cy.js             # Happy path scaffold – includes fixture usage hint
│   └── password-reset.cy.js    # Happy path scaffold – write everything from the PRD
│
├── fixtures/
│   └── users.json               # Test data for signup scenarios (newUser, invalidUser)
│
├── page-objects/
│   ├── LoginPage.js             # Selectors + actions for /plus/login
│   ├── SignupPage.js            # Selectors + actions for /plus/signup
│   └── PasswordResetPage.js    # Selectors + actions for /plus/password-reset
│
└── support/
    ├── e2e.js                   # Loaded before every test – imports commands
    └── commands.js              # Custom cy.login() and cy.logout() commands

---

How to Approach This

Step 1 – Read the PRD

The PRD defines exactly what the application should do. Every it() block in the test files maps to a scenario in the PRD. Read it first.

Login, Signup & Password Reset – PRD for QA Workshop

Step 2 – Explore the application

Open your portal in the browser. Use DevTools to inspect the elements and find their data-testid attributes. These are your selectors.

Step 3 – Complete the Page Objects

Before writing tests, implement the Page Objects in cypress/page-objects/. Each file has comments guiding you on what to add.

Step 4 – Implement the custom commands

Open cypress/support/commands.js and implement cy.login() and cy.logout(). These are used across multiple test files.

Step 5 – Write the tests

Each test file has a happy path scaffold to show you the structure. Implement it, then add the remaining scenarios from the PRD.

For signup.cy.js, check the fixture hint at the top of the file — signup tests use data from cypress/fixtures/users.json.

---

Key Concepts

Concept	Description
Page Object Model	Separates selectors and actions from test logic. One class per page.
Selectors	HTML attributes used for testing. Try to find stable ones across style changes.
Fixtures	JSON files in cypress/fixtures/ that store reusable test data. Used in signup tests via cy.fixture('users').
Custom Commands	Reusable Cypress commands defined in commands.js (e.g. cy.login()).
cy.env()	Reads values from cypress.env.json – used for credentials and secrets.

---

Things to Think About

• Why do we use data-testid instead of CSS classes?
• Why do we put credentials in cypress.env.json and not directly in the test file?
• The happy-path signup test will fail the second time you run it. Why? How would you fix this in a real project?
• On the password reset page: should the app tell you if the account doesn't exist?