JavaScript · Cypress

Event ticketing with Cypress

Filter events, pick quantities across ticket tiers (sold out, only-N-left, max 5 per order), fill details per attendee with unique emails, apply a promo, pay and get QR tickets — or join a waitlist.

App under test

🎟️ EventHive

URL: /apps/events
Promo: EARLY10 (10%)
Booking fee: 5%
Max per order: 5 tickets

Launch 🎟️ EventHive →📘 Project KT 📋 View all 15 test cases

Scenarios to automate

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

1
Filters & switch
Beginner
category-*, event-city, event-range and free-only combine; assert event-count.
2
Stock & order cap
Intermediate
tier-*-inc disables at the tier's stock (VIP has 3) and when the order reaches 5 tickets.
3
Sold-out states
Beginner
tier-sold-out-early shows on TestCon; Design Systems Meetup is fully sold out and shows the waitlist.
4
Dynamic attendee forms
Intermediate
One attendee-N block per ticket; first-is-buyer copies your details into ticket 1.
5
Unique emails
Intermediate
Two attendees with the same email show error-unique-emails.
6
Totals maths
Advanced
Check ticket-subtotal, event-discount (10%), event-fees (5% after discount) and event-total.
7
Free registration
Beginner
The free workshop skips card fields; the button says Register.
8
Waitlist position
Intermediate
join-waitlist validates the email and shows waitlist-joined with your position.

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.

eventhive.cy.js

// Uses the getByTestId custom command from the Cypress setup (cypress/support/commands.js).
// Locators in this suite: cy.contains ×4 · #id ×5 · [name] ×5 · [placeholder] ×2 · getByTestId ×10
describe('EventHive — event ticketing', () => {
  it('buys tickets for three attendees', () => {
    cy.visit('/apps/events');
    cy.contains('button', 'tech').click();
    cy.getByTestId('event-count').should('contain', '2 events');
    cy.getByTestId('open-event-e1').click();
    cy.getByTestId('tier-sold-out-early').should('be.visible');
    cy.getByTestId('tier-regular-inc').click();
    cy.getByTestId('tier-regular-inc').click();
    cy.getByTestId('tier-vip-inc').click();
    cy.getByTestId('ticket-count').should('contain', '3');
    cy.getByTestId('ticket-subtotal').should('contain', '₹10,997');
    cy.contains('button', 'Continue').click();
    cy.get('#buyer-name').type('Amir Khan');
    cy.get('[name="buyer-email"]').type('amir@example.com');
    cy.get('#buyer-phone').type('9876543210');
    cy.get('#first-is-buyer').check();
    cy.get('[name="attendee-1-name"]').type('Sara Khan');
    cy.get('[name="attendee-1-email"]').type('sara@example.com');
    cy.get('#attendee-2-name').type('Dev Patel');
    cy.get('[name="attendee-2-email"]').type('dev@example.com');
    cy.get('[placeholder="Promo code"]').type('EARLY10');
    cy.contains('button', 'Apply').click();
    cy.getByTestId('event-total').should('contain', '₹10,392');
    cy.get('#card-number').type('4242424242424242');
    cy.get('[placeholder="MM/YY"]').type('1230');
    cy.get('[name="card-cvv"]').type('123');
    cy.contains('button', 'Pay & get tickets').click();
    cy.getByTestId('tickets-issued').should('be.visible');
    cy.getByTestId('ticket-holder').eq(2).should('contain', 'Dev Patel');
  });
});