JavaScript · Cypress

Hospitality with Cypress

Search a destination, filter by stars, price and amenities, pick a room with add-ons, enter guest details, pay and manage the reservation.

App under test

🏨 StayEase

URL: /apps/hotel
Login: not required
Taxes: 12%
Card: any 16 digits

Launch 🏨 StayEase →📘 Project KT 📋 View all 15 test cases

Scenarios to automate

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

1
Search validation
Beginner
Search with no destination or date shows error-city and error-checkin.
2
Steppers & date chips
Beginner
nights-inc / guests-inc change the summary; pick checkin-day by index.
3
Filters & sorting
Intermediate
Combine star-*, max-price (range), amenity-* and sort; assert result-count and price order.
4
Room capacity
Intermediate
With 3+ guests the Standard room is disabled and shows room-standard-capacity.
5
Live price summary
Intermediate
addon-* checkboxes update price-addons, price-taxes and price-total.
6
Checkout validation
Intermediate
Submit empty to get form-errors and error-* per field; Pay at hotel hides card fields.
7
Async confirmation
Advanced
confirm-booking shows a processing overlay (~1.5s) before booking-confirmed.
8
Cancel with reason
Advanced
cancel-<id> opens cancel-modal; a reason is required before confirm-cancel.

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.

stayease.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×3 · #id ×6 · [name] ×5 · [placeholder] ×1 · [aria-label] ×1 · getByTestId ×10
describe('StayEase — hotel booking', () => {
  it('books a hotel end to end', () => {
    cy.visit('/apps/hotel');
    cy.get('#city').select('goa');
    cy.getByTestId('checkin-day').eq(2).click();
    cy.get('[aria-label="Increase Nights"]').click();
    cy.contains('button', 'Search hotels').click();
    cy.location('pathname').should('include', '/apps/hotel/results');

    // Filter to 5-star stays, cheapest first
    cy.getByTestId('star-5').check();
    cy.get('[name="sort"]').select('price-asc');
    cy.getByTestId('result-count').should('contain', '2 properties');
    cy.getByTestId('view-rooms-g1').click();
    cy.location('pathname').should('include', '/apps/hotel/hotel/g1');
    cy.getByTestId('hotel-title').should('contain', 'Palm Grove Resort');
    cy.getByTestId('select-room-deluxe').click();
    cy.get('#addon-breakfast').check();
    cy.getByTestId('price-total').should('be.visible');
    cy.contains('button', 'Continue to booking').click();

    // Guest details and card payment
    cy.get('[name="guest-first-name"]').type('Ada');
    cy.get('#guest-last-name').type('Lovelace');
    cy.get('[name="guest-email"]').type('ada@example.com');
    cy.get('#guest-phone').type('5551234567');
    cy.get('[name="arrival-time"]').select('14:00 – 16:00');
    cy.getByTestId('pay-now').click();
    cy.get('#card-number').type('4242424242424242');
    cy.get('[placeholder="MM/YY"]').type('1230');
    cy.get('[name="card-cvv"]').type('123');
    cy.get('#accept-policy').check();
    cy.contains('button', 'Confirm booking').click();
    cy.getByTestId('booking-confirmed').should('be.visible');
    cy.getByTestId('reservation-id').should('contain', 'SE-');
    cy.getByTestId('confirmed-room').should('contain', 'Deluxe Room');
  });
});