Back to App

Flight App — Automation Testing Guide

Complete reference for practicing Playwright test automation on the SkyHook flight reservation application.

Playwright End-to-End 30+ Scenarios Real-like App

App Overview & Architecture

SkyHook is a fully functional flight reservation application with 5 main sections and a multi-step booking flow. The app simulates real network behavior with loading states and delays, perfect for practicing automation waits.

Section URL / Navigation Key Functionality
Search Flights Default tab on load Search, filter, sort flights
My Bookings Sidebar → My Bookings View, cancel, check-in bookings
Check-In Sidebar → Check-In Online check-in by PNR
Flight Status Sidebar → Flight Status Live status by flight number
My Profile Sidebar → My Profile Save traveler info
Important for automation: The app uses simulated delays. Always wait for elements to be visible and ready before interacting with them.

2. Seat Selection Modal

After clicking Select on a flight card, a seat map modal opens. The map has 20 rows × 6 seats (A–F) with some pre-occupied seats.

  • 1Locate the Select button on any flight card in the results and click it
  • 2A modal dialog opens displaying the airplane seat map
  • 3Observe the seat grid layout — seats are arranged in rows with columns A through F
  • 4Notice that occupied seats appear in a different color and cannot be selected
  • 5Look for extra legroom seats highlighted in the exit rows (typically rows 1, 2, 10, 11)
  • 6Click an available seat to select it — the seat will change color to indicate selection
  • 7Observe that the Continue button becomes enabled only after selecting a seat
  • 8Click the Continue button to proceed to passenger details

3. Passenger Details Modal

One form block per passenger. The number of blocks matches the passenger count selected in search.

  • 1A modal dialog opens with a form for entering passenger information
  • 2Locate the First Name and Last Name input fields and enter the traveler's name
  • 3Find the Date of Birth date picker and select the passenger's birthdate
  • 4Locate the Gender dropdown and select the appropriate option
  • 5Find the Passport Number field and enter a valid passport number (required)
  • 6Locate the Nationality dropdown and select the passenger's country
  • 7Find the Email field and enter a contact email address (required for primary passenger)
  • 8Locate the Phone Number field and enter a contact number (primary passenger only)
  • 9For multiple passengers, scroll down to find additional passenger forms and repeat the above steps
  • 10Locate and click the Continue to Payment button — form validation runs before proceeding

4. Payment Modal

Supports 3 payment methods. Card form validates 16-digit number, MM/YY expiry, and 3-digit CVV. Promo codes give discounts.

  • 1A payment modal dialog opens showing the order summary and payment options
  • 2Locate the payment method options — choose between Credit/Debit Card, UPI, or Net Banking
  • 3Card: Find and fill in the cardholder name, card number (auto-formats with spaces), expiry date (MM/YY format), and CVV fields
  • 4UPI: Locate the UPI ID field and enter your UPI address (e.g., name@upi)
  • 5Net Banking: Find the bank selection dropdown and choose your bank
  • 6Locate the promo code input field and Apply button to add a discount code
  • 7Try these promo codes: SAVE10 (10% off), SKYHOOK20 (20% off), FIRST15 (15% off), SUMMER5 (5% off)
  • 8Observe the promo result message that appears after applying a code
  • 9Find and click the Confirm Payment button — a loading spinner appears while processing

5. My Bookings

  • 1Locate the My Bookings link in the sidebar and click to navigate
  • 2Wait for your bookings to load — a brief loading state appears while fetching data
  • 3Observe your booking cards displayed with flight details and status
  • 4Notice the status badge on each card — showing Confirmed, Cancelled, or Checked-In
  • 5Find the Check-In button on confirmed bookings to complete online check-in
  • 6Locate the Cancel button to cancel a booking — a confirmation dialog will appear
  • 7In the cancel dialog, find and click the Confirm button to complete cancellation
  • 8Look for the Download E-Ticket button to download your ticket — a notification appears on success

6. Online Check-In

  • 1Locate the Check-In link in the sidebar and click to navigate
  • 2Find the Booking Reference (PNR) input field and enter your booking code
  • 3Locate the Last Name input field and enter the passenger's surname
  • 4Find and click the Retrieve Booking button — wait for the search to complete
  • 5If the booking is found, your flight details appear with a Complete Check-In button
  • 6If not found, an error message is displayed — verify the PNR and last name are correct

7. Flight Status

  • 1Locate the Flight Status link in the sidebar and click to navigate
  • 2Find the flight number input field and enter a flight number (e.g., SK-101, PA-201, EJ-301)
  • 3Locate the date picker and select the travel date
  • 4Find and click the Check Status button — wait for the result to load
  • 5Observe the status badge showing On Time, Delayed, Boarding, or Cancelled
  • 6Note that the gate number is assigned dynamically and may change between checks

Test Scenarios

Happy Path

TC-001: Complete Booking Flow

Search → Select → Seat → Passenger → Pay → Confirm

TC-002: Round Trip Booking

Enable round trip, set return date, complete booking

TC-003: Multi-Passenger Booking

Select 3 passengers, fill all forms, verify total price

TC-004: Promo Code Applied

Apply SAVE10, verify 10% discount on total

TC-005: UPI Payment

Select UPI method, fill UPI ID, confirm payment

TC-006: Check-In by PNR

Book flight, go to Check-In tab, enter PNR + last name

TC-007: Flight Status Check

Enter SK-101, verify status badge is visible

TC-008: Save Profile

Fill profile form, save, verify sidebar name updates

Negative / Edge Cases

TC-009: Same City Search

Enter same city in From/To, verify error toast

TC-010: Empty Search

Click Search with empty fields, verify validation

TC-011: Invalid Promo Code

Enter INVALID123, verify error message appears below the promo field

TC-012: Incomplete Card Details

Leave CVV empty, click Pay, verify validation

TC-013: Missing Passenger Fields

Leave passport empty, click Proceed, verify error

TC-014: Invalid PNR Check-In

Enter wrong PNR, verify "not found" error message

TC-015: Cancel Booking

Cancel a booking, verify status changes to Cancelled

TC-016: No Flights Found

Search obscure route, verify empty state message

SkyHook Airlines — Playwright Practice App | Open App