How to Test Calendly Booking Flows with Playwright: Complete 2026 Guide

The standalone flow is when the user navigates directly to a calendly.com link (for example, calendly.com/your-org/30-minute-meeting). This is the simplest Calendly test because there is no iframe boundary to cross. The entire page is the Calendly application.

Goal

Navigate to the Calendly event page, select the next available date, pick the first available time slot, fill in name and email, and confirm the booking. Assert the confirmation screen is displayed.

Playwright Implementation

Key Details

The calendar renders date cells as buttons. Disabled buttons represent past dates or dates with no availability. By selecting the first enabled button, you avoid hard-coding a specific date. The time slot buttons appear only after a date is selected, so always wait for them to become visible before clicking. The confirmation screen includes the invitee email, which serves as your primary assertion anchor.

import { test, expect } from '@playwright/test';

test('standalone booking: happy path', async ({ page }) => {
  const email = `test+${Date.now()}@assrt.ai`;
  await page.goto(process.env.CALENDLY_EVENT_URL!);
  await page.waitForSelector('[data-container="calendar"]', {
    timeout: 15_000,
  });
  const availableDate = page.locator(
    'button[data-container="date-cell"]:not([disabled])'
  ).first();
  await availableDate.click();
  const timeSlot = page.getByTestId('time-button').first();
  await expect(timeSlot).toBeVisible({ timeout: 10_000 });
  await timeSlot.click();
  await page.getByRole('button', { name: /next/i }).click();
  await page.getByLabel(/^name/i).fill('Jane Tester');
  await page.getByLabel(/email/i).fill(email);
  await page.getByRole('button', { name: /schedule event/i }).click();
  await expect(
    page.getByRole('heading', { name: /confirmed/i })
  ).toBeVisible({ timeout: 15_000 });
  await expect(page.getByText(email)).toBeVisible();
});

When you embed Calendly on your own site using their inline embed script, the entire booking widget runs inside an iframe from calendly.com. This is the most common production setup and also the hardest to test. Every interaction must go through Playwright's frameLocator to reach inside the cross-origin iframe.

The Embed Structure

Calendly's inline embed injects a <div class="calendly-inline-widget"> containing an iframe whose src points to calendly.com. The iframe loads the same scheduling UI you see on the standalone page, but now it is sandboxed inside your page's DOM. Playwright's frameLocator lets you target elements inside this iframe by matching on the iframe's src attribute.

Playwright Implementation

Listening for the Parent Page Callback

Calendly's embed SDK fires postMessage events to the parent window when certain actions happen. The most important event is calendly.event_scheduled, which fires after a successful booking. You can listen for this event in your test to verify the parent page received the callback.

// After navigating to the embed page, set up a listener
const scheduledEvent = page.evaluate(() => {
  return new Promise<any>((resolve) => {
    window.addEventListener('message', (e) => {
      if (e.data?.event === 'calendly.event_scheduled') {
        resolve(e.data);
      }
    });
  });
});

// ... complete the booking flow ...

// After confirming, verify the postMessage was received
const eventData = await scheduledEvent;
expect(eventData.event).toBe('calendly.event_scheduled');
expect(eventData.payload.invitee.uri).toBeTruthy();

Calendly event types can include custom questions: text inputs, multi-line text areas, radio buttons, dropdowns, checkboxes, and phone number fields. These appear on the details step alongside the standard name and email fields. If your event type requires a phone number or a custom "Company name" field, the booking will fail unless your test fills them in. This is a frequent source of test failures when someone adds a required question to the event type without updating the test.

Playwright Implementation

test('booking with custom intake form fields', async ({ page }) => {
  const email = `intake+${Date.now()}@assrt.ai`;

  await page.goto(process.env.CALENDLY_EVENT_URL!);

  // Select date and time (same pattern as happy path)
  const availableDate = page.locator(
    'button[data-container="date-cell"]:not([disabled])'
  ).first();
  await availableDate.click();
  await page.getByTestId('time-button').first().click();
  await page.getByRole('button', { name: /next/i }).click();

  // Fill standard fields
  await page.getByLabel(/^name/i).fill('Intake Tester');
  await page.getByLabel(/email/i).fill(email);

  // Fill custom text question
  await page.getByLabel(/company name/i).fill('Assrt Inc.');

  // Fill custom phone number field (if configured)
  const phoneField = page.getByLabel(/phone/i);
  if (await phoneField.isVisible()) {
    await phoneField.fill('+1 555 123 4567');
  }

  // Fill custom dropdown (if configured)
  const dropdown = page.getByLabel(/how did you hear/i);
  if (await dropdown.isVisible()) {
    await dropdown.selectOption({ label: 'Search engine' });
  }

  // Fill custom radio button (if configured)
  const radio = page.getByLabel(/team size/i);
  if (await radio.first().isVisible()) {
    await page.getByLabel('1-10').check();
  }

  // Submit
  await page.getByRole('button', { name: /schedule event/i }).click();

  // Assert confirmation
  await expect(
    page.getByRole('heading', { name: /confirmed/i })
  ).toBeVisible({ timeout: 15_000 });
});

Handling Validation Errors

If you try to submit without filling a required custom field, Calendly displays inline validation errors. A good defensive test submits the form with a required field left blank, asserts the validation error appears, fills the field, then submits again. This verifies that your event type's validation configuration actually works and that users are not silently blocked from booking.

Playwright Implementation

test.describe('timezone handling', () => {
  test('displays times in the browser timezone', async ({ browser }) => {
    // Create a context with a specific timezone
    const context = await browser.newContext({
      timezoneId: 'Asia/Tokyo',
      locale: 'en-US',
    });
    const page = await context.newPage();

    await page.goto(process.env.CALENDLY_EVENT_URL!);

    // Wait for the calendar to load
    await page.waitForSelector('[data-container="calendar"]', {
      timeout: 15_000,
    });

    // Verify the timezone indicator shows Japan Standard Time
    const tzLabel = page.locator('[data-container="timezone"]');
    await expect(tzLabel).toContainText(/Japan|JST|Tokyo/i);

    // Select a date and verify time slots are in JST range
    const availableDate = page.locator(
      'button[data-container="date-cell"]:not([disabled])'
    ).first();
    await availableDate.click();

    const firstTimeSlot = page.getByTestId('time-button').first();
    await expect(firstTimeSlot).toBeVisible({ timeout: 10_000 });

    // Time should be displayed in Japan timezone format
    const timeText = await firstTimeSlot.textContent();
    expect(timeText).toBeTruthy();
    // Calendly shows times like "9:00am" or "2:30pm"
    expect(timeText).toMatch(/\d{1,2}:\d{2}(am|pm)/i);

    await context.close();
  });

  test('times differ when timezone changes', async ({ browser }) => {
    // Book with US Eastern timezone
    const eastContext = await browser.newContext({
      timezoneId: 'America/New_York',
      locale: 'en-US',
    });
    const eastPage = await eastContext.newPage();
    await eastPage.goto(process.env.CALENDLY_EVENT_URL!);
    await eastPage.waitForSelector('[data-container="calendar"]');

    const eastDate = eastPage.locator(
      'button[data-container="date-cell"]:not([disabled])'
    ).first();
    await eastDate.click();
    const eastTime = await eastPage
      .getByTestId('time-button')
      .first()
      .textContent();

    // Now check the same event with Pacific timezone
    const westContext = await browser.newContext({
      timezoneId: 'America/Los_Angeles',
      locale: 'en-US',
    });
    const westPage = await westContext.newPage();
    await westPage.goto(process.env.CALENDLY_EVENT_URL!);
    await westPage.waitForSelector('[data-container="calendar"]');

    const westDate = westPage.locator(
      'button[data-container="date-cell"]:not([disabled])'
    ).first();
    await westDate.click();
    const westTime = await westPage
      .getByTestId('time-button')
      .first()
      .textContent();

    // The displayed times should differ by 3 hours
    // (Eastern is UTC-5, Pacific is UTC-8 during standard time)
    expect(eastTime).not.toBe(westTime);

    await eastContext.close();
    await westContext.close();
  });
});

The key insight is that Playwright's timezoneId context option controls what Intl.DateTimeFormat returns inside the browser. Calendly reads this to detect the visitor's timezone. By creating two browser contexts with different timezones and loading the same event page, you can verify that Calendly correctly adjusts the displayed time slots. This test catches the bug where your embed page overrides or ignores the browser timezone.

When all time slots for a given date are booked, or when the event type has no availability for an entire month, Calendly displays an empty state. Your application needs to handle this gracefully. If your embed page shows a loading spinner indefinitely because it never receives a calendly.event_scheduled callback, that is a bug your test should catch.

Testing with a Fully Booked Event Type

The cleanest approach is to create a second event type in your test Calendly account with zero availability. Set its schedule to have no open hours on any day. When your test navigates to that event type, Calendly will display the "no times available" message.

test('no availability: shows empty state message', async ({ page }) => {
  // Use an event type configured with zero availability
  await page.goto(
    'https://calendly.com/test-account/no-availability-event'
  );

  // Wait for the calendar to load
  await page.waitForSelector('[data-container="calendar"]', {
    timeout: 15_000,
  });

  // Assert there are no enabled date buttons
  const enabledDates = page.locator(
    'button[data-container="date-cell"]:not([disabled])'
  );
  await expect(enabledDates).toHaveCount(0, { timeout: 10_000 });

  // Calendly shows a message when no times are available
  await expect(
    page.getByText(/no times available/i)
  ).toBeVisible();
});

test('no availability: embedded widget shows fallback UI', async ({ page }) => {
  // Navigate to your embed page pointing at the no-availability event
  await page.goto('/schedule-unavailable');

  const calendlyFrame = page.frameLocator(
    'iframe[src*="calendly.com"]'
  );

  // Verify the iframe loaded
  await expect(
    calendlyFrame.locator('[data-container="calendar"]')
  ).toBeVisible({ timeout: 20_000 });

  // Assert no enabled dates
  const enabledDates = calendlyFrame.locator(
    'button[data-container="date-cell"]:not([disabled])'
  );
  await expect(enabledDates).toHaveCount(0, { timeout: 10_000 });

  // Your parent page should display a fallback message or
  // contact link when Calendly has no availability
  await expect(
    page.getByText(/contact us directly/i)
  ).toBeVisible();
});

Testing a Single Fully Booked Day

To test the case where a specific date has no remaining slots (rather than the entire event type having zero availability), you can use the Calendly API to pre-book all slots for a target date in your test setup, then verify that clicking that date shows no available times. This requires API access and should be part of your test setup and teardown, canceling the bookings after the test completes.

Calendly supports configuring a redirect URL that the user is sent to after confirming a booking. This is commonly used to redirect to a thank-you page, an onboarding flow, or a page that captures additional information. When the event type has a redirect URL configured, Calendly navigates the browser (or the parent frame) to that URL after the booking confirmation screen. Your test needs to verify that the redirect actually fires and that the destination page loads correctly.

Standalone Redirect

test('post-booking redirect to thank-you page', async ({ page }) => {
  const email = `redirect+${Date.now()}@assrt.ai`;

  await page.goto(process.env.CALENDLY_EVENT_URL!);

  // Complete the booking flow
  const availableDate = page.locator(
    'button[data-container="date-cell"]:not([disabled])'
  ).first();
  await availableDate.click();
  await page.getByTestId('time-button').first().click();
  await page.getByRole('button', { name: /next/i }).click();
  await page.getByLabel(/^name/i).fill('Redirect Tester');
  await page.getByLabel(/email/i).fill(email);
  await page.getByRole('button', { name: /schedule event/i }).click();

  // Wait for the confirmation screen first
  await expect(
    page.getByRole('heading', { name: /confirmed/i })
  ).toBeVisible({ timeout: 15_000 });

  // Then wait for the redirect to your configured URL
  await page.waitForURL(/\/booking-confirmed/, { timeout: 30_000 });

  // Assert the thank-you page loaded correctly
  await expect(
    page.getByRole('heading', { name: /thank you/i })
  ).toBeVisible();

  // Verify query parameters passed by Calendly
  const url = new URL(page.url());
  expect(url.searchParams.get('invitee_email')).toBe(email);
});

Embedded Redirect

When Calendly is embedded, the redirect behavior depends on how the embed is configured. By default, the redirect navigates the top-level page (your application), not just the iframe. If your embed uses the parentDomain parameter, you can also listen for the calendly.event_scheduled postMessage and handle the redirect in your own JavaScript. Test both paths to make sure one or the other fires reliably.

test('embedded redirect navigates parent page', async ({ page }) => {
  const email = `embed-redirect+${Date.now()}@assrt.ai`;

  await page.goto('/schedule');
  const calendlyFrame = page.frameLocator('iframe[src*="calendly.com"]');

  // Complete booking inside iframe
  await expect(
    calendlyFrame.locator('[data-container="calendar"]')
  ).toBeVisible({ timeout: 20_000 });
  await calendlyFrame.locator(
    'button[data-container="date-cell"]:not([disabled])'
  ).first().click();
  await calendlyFrame.getByTestId('time-button').first().click();
  await calendlyFrame.getByRole('button', { name: /next/i }).click();
  await calendlyFrame.getByLabel(/^name/i).fill('Embed Redirect');
  await calendlyFrame.getByLabel(/email/i).fill(email);
  await calendlyFrame
    .getByRole('button', { name: /schedule event/i })
    .click();

  // The redirect should navigate the parent page
  await page.waitForURL(/\/booking-confirmed/, { timeout: 30_000 });
  await expect(
    page.getByRole('heading', { name: /thank you/i })
  ).toBeVisible();
});