JavaScript · Cypress

HR with Cypress

Clock in with a live timer, apply for leave with weekend-aware day counts and half days, approve as the HR manager, watch the balance drop, browse a paginated directory and download payslips.

App under test

👥 PeopleHub

URL: /apps/hr
Employee: emp / Hr@123
HR manager: hrmanager / Hr@123
Casual leave: 8 days

Launch 👥 PeopleHub →📘 Project KT 📋 View all 15 test cases

Scenarios to automate

Work top to bottom — each one adds a new technique.

1
Role-based pages
Beginner
The employee sees access-denied on Approvals; the manager can't open Apply leave.
2
Clock in/out
Beginner
clock-in starts worked-time ticking; clock-out records last-session.
3
Disabled weekends
Intermediate
Saturday/Sunday chips in leave-from/leave-to are disabled; leave-to before leave-from is disabled too.
4
Working-day maths
Intermediate
A Fri → Mon range counts 2 days in leave-days; half-day (same day only) counts 0.5.
5
Validation rules
Intermediate
Exceeding the balance, overlapping an existing request or a short reason each show error-*.
6
Approval workflow
Advanced
Employee submits → manager approves → leave-status Approved and balance-* drops by leave-days.
7
Reject with comment
Advanced
reject-leave requires a reason; the employee sees it under their request.
8
Directory paging
Beginner
Filter by department, page with page-next, open an employee-modal and read employee-email.

Sample Cypress suite

A working starting point that finds elements every way Cypress can — by role, label, text, id, name, CSS, XPath and data-testid — so you practice them all. Pick your language, switch to data-testid only to compare, or try your own in the Locator Playground.

Language

Cypress runs inside the browser, so it only supports JavaScript and TypeScript — there is no Python, Java or C# version of Cypress. For those languages, see Selenium or Playwright.

peoplehub.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×8 · #id ×6 · [name] ×3 · getByTestId ×8
describe('PeopleHub — HR', () => {
  it('applies for leave and gets it approved', () => {
    cy.visit('/apps/hr');
    cy.get('#hr-username').type('emp');
    cy.get('[name="hr-password"]').type('Hr@123');
    cy.contains('button', 'Sign in').click();
    cy.getByTestId('balance-casual').should('contain', '8');
    cy.contains('button', 'Clock in').click();
    cy.getByTestId('attendance-status').should('contain', 'Clocked in');
    cy.getByTestId('apply-leave').click();
    cy.get('#leave-type').select('casual');

    // First working day for both ends → a single-day, half-day leave
    cy.get('[data-testid="leave-from"]:not([disabled])').first().click();
    cy.get('[data-testid="leave-to"]:not([disabled])').first().click();
    cy.get('#half-day').check();
    cy.getByTestId('leave-days').should('contain', '0.5');
    cy.get('#leave-reason').type('Doctor\'s appointment in the morning');
    cy.contains('button', 'Submit request').click();
    cy.getByTestId('leave-submitted').should('be.visible');
    cy.getByTestId('leave-status').should('contain', 'Pending');
    cy.contains('button', 'Log out').click();

    // HR manager approves
    cy.get('#hr-username').type('hrmanager');
    cy.get('[name="hr-password"]').type('Hr@123');
    cy.contains('button', 'Sign in').click();
    cy.contains('a', 'Approvals').click();
    cy.getByTestId('approve-leave').eq(0).click();
    cy.getByTestId('approval-toast').should('contain', 'approved');
    cy.contains('button', 'Log out').click();

    // The employee's balance has dropped
    cy.get('#hr-username').type('emp');
    cy.get('[name="hr-password"]').type('Hr@123');
    cy.contains('button', 'Sign in').click();
    cy.getByTestId('balance-casual').should('contain', '7.5');
  });
});