JavaScript · Cypress

Travel & Airline with Cypress

One-way or round trip with airport autocomplete and swap, passenger steppers with infant rules, filters and sort tabs, fare families, traveller forms, a seat map, payment and PNR.

App under test

✈️ SkyWays

URL: /apps/flights
Login: not required
Max travellers: 9 (1 infant/adult)
Card: any 16 digits

Launch ✈️ SkyWays →📘 Project KT 📋 View all 15 test cases

Scenarios to automate

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

1
Airport autocomplete
Beginner
Type in from-city, pick from-option-<code>; free text without picking fails search-errors.
2
Swap & same-city rule
Beginner
swap-cities exchanges both fields; the same city on both sides is rejected.
3
Passenger rules
Intermediate
infants-inc is disabled once infants = adults; the total never exceeds 9.
4
Round trip dates
Intermediate
return-day chips before the departure date are disabled.
5
Filters & sorting
Intermediate
Combine stops-*, airline-*, dep-* and max-fare; sort-fastest orders by duration.
6
Fare families
Intermediate
select-flight expands fare-basic / fare-flex inside that card only.
7
Seat map
Advanced
Pick seats with data-status="available"; selection auto-advances to the next traveller (assigned-seat-*).
8
Round-trip booking
Advanced
Select outbound, then the return list appears; the ticket shows two ticket-leg rows.

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.

skyways.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×6 · #id ×7 · [name] ×7 · [placeholder] ×1 · getByTestId ×9
describe('SkyWays — flight booking', () => {
  it('books a one-way flight for two', () => {
    cy.visit('/apps/flights');
    cy.contains('button', 'One way').click();
    cy.get('#from-city').type('Mum');
    cy.getByTestId('from-option-bom').click();
    cy.get('#to-city').type('Del');
    cy.getByTestId('to-option-del').click();
    cy.getByTestId('depart-day').eq(1).click();
    cy.getByTestId('passengers-toggle').click();
    cy.getByTestId('adults-inc').click();
    cy.contains('button', 'Done').click();
    cy.getByTestId('passengers-summary').should('contain', '2 adults');
    cy.get('[name="cabin-class"]').select('economy');
    cy.contains('button', 'Search flights').click();
    cy.location('pathname').should('include', '/apps/flights/results');
    cy.get('#stops-0').check();
    cy.contains('button', 'cheapest').click();
    cy.getByTestId('select-flight').eq(0).click();
    cy.getByTestId('fare-flex').click();
    cy.location('pathname').should('include', '/apps/flights/passengers');
    cy.get('[name="pax-0-title"]').select('mr');
    cy.get('[name="pax-0-first"]').type('Amir');
    cy.get('#pax-0-last').type('Khan');
    cy.get('[name="pax-1-title"]').select('ms');
    cy.get('#pax-1-first').type('Sara');
    cy.get('[name="pax-1-last"]').type('Khan');
    cy.get('#contact-email').type('amir@example.com');
    cy.get('[name="contact-phone"]').type('9876543210');
    cy.contains('button', 'Continue to seats').click();

    // Each pick auto-advances to the next traveller
    cy.get('[data-testid^="seat-"][data-status="available"]').first().click();
    cy.get('[data-testid^="seat-"][data-status="available"]').first().click();
    cy.contains('button', 'Continue to payment').click();
    cy.get('#card-number').type('4242424242424242');
    cy.get('[placeholder="MM/YY"]').type('1230');
    cy.get('[name="card-cvv"]').type('123');
    cy.getByTestId('pay-flight').click();
    cy.getByTestId('ticket-confirmed').should('be.visible');
    cy.getByTestId('ticket-passengers').should('contain', 'Sara Khan');
  });
});