JavaScript · Cypress

Ticket booking with Cypress

Automate a movie booking — dates, filters, a seat map, snacks, promos, OTP payment and a seat-hold timer.

App under test

ShowTime

URL: /tickets
Login: not required
Promos: MOVIE50 · FIRSTSHOW
Card OTP: 123456
Seat hold: 5 minutes

Launch ShowTime →

Scenarios to automate

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

1
Date strip
Beginner
Seven date-option chips from today; dates are computed from the browser clock.
2
Filters
Beginner
Combine genre-* toggles, language-filter and movie-search; assert movie-card count.
3
Showtime states
Intermediate
data-status is available / filling / soldout / started — disabled ones can't be clicked.
4
Seat map
Intermediate
Pick seats by data-status, verify selected-seat chips and seat-total per tier.
5
Seat limit
Intermediate
The 9th seat shows seat-limit-error.
6
Snacks & promo codes
Intermediate
MOVIE50 halves tickets (max $10); FIRSTSHOW only works on a first booking.
7
OTP payment
Advanced
Card payments open otp-modal; 123456 passes, anything else shows otp-error.
8
Async UPI approval
Advanced
UPI shows payment-processing for ~3s before the confirmation page.
9
Hold timer
Advanced
Seats are held for 5:00. Mock the clock to hit timer-expired without waiting.
10
Cancel a booking
Advanced
Cancel from My bookings, confirm the dialog, and find it under the Cancelled tab.

Sample Cypress suite

A working starting point written against this app's real data-testids.

tickets.cy.js

describe('ShowTime tickets', () => {
  it('books two seats and pays by card with OTP', () => {
    cy.visit('/tickets');
    cy.getByTestId('date-option').eq(1).click();   // tomorrow: no "started" shows
    cy.getByTestId('city-select').select('London');

    cy.contains('[data-testid="movie-card"]', 'Nebula Drift')
      .find('[data-testid="showtime"]:enabled').first().click();
    cy.location('pathname').should('match', /^\/tickets\/show\//);

    const freeSeat = '[data-testid^="seat-"][data-status="available"]';
    cy.get(freeSeat).first().click();
    cy.get(freeSeat).first().click();
    cy.getByTestId('selected-seat').should('have.length', 2);
    cy.getByTestId('proceed-button').click();

    cy.getByTestId('contact-name').type('Grace Hopper');
    cy.getByTestId('contact-email').type('grace@example.com');
    cy.getByTestId('contact-phone').type('5559876543');
    cy.getByTestId('snack-popcorn-inc').click();
    cy.getByTestId('promo-input').type('MOVIE50');
    cy.getByTestId('apply-promo').click();
    cy.getByTestId('promo-message').should('contain', 'applied');

    cy.getByTestId('card-number').type('4242424242424242');
    cy.getByTestId('card-expiry').type('1230');
    cy.getByTestId('card-cvv').type('123');
    cy.getByTestId('accept-terms').check();
    cy.getByTestId('pay-button').click();

    cy.getByTestId('otp-modal').should('be.visible');
    cy.getByTestId('otp-input').type('123456');
    cy.getByTestId('otp-submit').click();

    cy.getByTestId('booking-success').should('be.visible');
    cy.getByTestId('booking-ref').invoke('text').should('match', /^ST[A-Z0-9]{6}$/);
  });

  it('pays with UPI (async approval)', () => {
    // ...reach checkout as above, then:
    // cy.getByTestId('pay-upi').click();
    // cy.getByTestId('upi-id').type('grace@okbank');
    // cy.getByTestId('pay-button').click();
    // cy.getByTestId('booking-success', { timeout: 10000 }).should('be.visible');
  });
});