JavaScript · Cypress

Ride hailing with Cypress

Pickup and drop autocomplete with swap, fares per vehicle computed from distance, a promo, then a live ride that moves from searching to completed — with OTP, a cancel fee rule, rating and tip.

App under test

🚕 RideGo

URL: /apps/ride
Promo: FIRSTRIDE (50%, max ₹75)
Stages: 2s · 5s · 8s · 11s
Cancel fee: ₹30 after arrival

Launch 🚕 RideGo →📘 Project KT 📋 View all 15 test cases

Scenarios to automate

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

1
Autocomplete
Beginner
Type in pickup-input / drop-input and choose *-option-<place>; the same place can't be both.
2
Swap & shortcut
Beginner
use-home fills pickup; swap-locations exchanges both inputs and redraws ride-map.
3
Fare maths
Intermediate
fare-<vehicle> = base + per-km × distance + per-min × time; check against trip-distance.
4
Promo cap
Intermediate
FIRSTRIDE halves the fare but caps at ₹75 — fare-payable reflects the cap.
5
Live status
Advanced
ride-status walks through all five stages on a timer — chain text waits, don't sleep.
6
Cancel rules
Advanced
Cancel before arrival is free; after “Driver arrived” cancel-fee-warning shows ₹30 and cancel-fee records it.
7
Moving marker
Intermediate
During the trip, map-car moves along the route (SVG text element).
8
Rate & tip
Beginner
After completion pick rate-driver-* and tip-*; trip-total includes the tip.

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.

ridego.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×3 · #id ×2 · [name] ×1 · [placeholder] ×1 · getByTestId ×14
describe('RideGo — ride hailing', () => {
  it('books a cab and completes the trip', () => {
    cy.visit('/apps/ride');
    cy.get('#pickup-input').type('Tech');
    cy.getByTestId('pickup-option-office').click();
    cy.get('[name="drop-input"]').type('air');
    cy.getByTestId('drop-option-airport').click();
    cy.getByTestId('trip-distance').should('contain', '24.7 km');
    cy.getByTestId('ride-mini').click();
    cy.get('[placeholder="Promo code"]').type('FIRSTRIDE');
    cy.contains('button', 'Apply').click();
    cy.getByTestId('fare-payable').should('contain', '₹432');
    cy.get('#ride-payment').select('upi');
    cy.contains('button', 'Book Mini').click();

    // The ride progresses on its own — wait for each status
    cy.getByTestId('ride-status').should('contain', 'Driver assigned');
    cy.getByTestId('ride-otp').should('be.visible');
    cy.getByTestId('ride-status').should('contain', 'Driver arrived');
    cy.getByTestId('ride-status').should('contain', 'On trip');
    cy.getByTestId('ride-status').should('contain', 'Completed');
    cy.getByTestId('rate-driver-5').click();
    cy.getByTestId('tip-20').click();
    cy.contains('button', 'Submit').click();
    cy.getByTestId('rating-saved').should('be.visible');
    cy.getByTestId('trip-total').should('contain', '₹452');
  });
});