Why doesn't sendKeys() work on some date pickers?

Custom calendar widgets render day cells as or elements — they do not accept keyboard input like a real . You must click the trigger to open the calendar, navigate with the prev/next buttons, then click the target day cell.

What is the correct date format for fill() and sendKeys()?

For native , always use the ISO format YYYY-MM-DD regardless of the locale displayed in the browser. Sending a locale-specific string like "15 Jun 2025" will not work.

How do I select a date in a month that isn't currently shown?

Click the next or previous month navigation buttons until the target month is displayed, then click the day cell. Some pickers also have a year/month dropdown — click that and select directly.

How do I assert a date picker's selected value?

For native inputs use inputValue() / getAttribute("value"). For custom widgets, look for a result text element, an aria-label on the trigger button, or an aria-selected attribute on the selected day cell.

How to Handle Date Pickers in Selenium and Playwright

Practice date picker automation — open calendars, select dates, navigate months, handle date ranges, constraints, and keyboard entry in Playwright, Selenium & Cypress.

Intermediate15 min8 scenarios14 test cases

Interactive Scenarios

S01Scenario 1: Basic Date Input

Select a date

No date selected

S02Scenario 2: Calendar Open & Select

Calendar not opened

S03Scenario 3: Month Navigation

July 2026

Month not navigated

S04Scenario 4: Date Range Picker

Start date

→

End date

Range not set

S05Scenario 5: Disabled / Min-Max Dates

Book appointment (Jun – Dec 2025 only)

Min: 2025-06-01 · Max: 2025-12-31

Constraints not tested

S06Scenario 6: Sibling-Located Date Fields

Appointment Date

For your next visit

Return Date

Expected return visit

Sibling date not filled

S07Scenario 7: Repeated Date Cards (Scoped)

Morning2025-08-1209:00 – 10:00 AM

Afternoon2025-08-1201:00 – 02:00 PM

Evening2025-08-1205:00 – 06:00 PM

Card date not booked

S08Scenario 8: Dynamic Date Display (Challenge)CHALLENGE

The date below is rendered dynamically. Locate it without data-testid.

Today's date:7/14/2026

Dynamic date not asserted

Showing 14 test cases

ID	Scenario	Type	Priority
DP_001	Verify date can be typed into a native date input Expected: Input value equals the typed date string. ✅ positivehigh	positive	high
DP_002	Verify calendar opens on trigger click Expected: Calendar grid becomes visible after clicking the trigger. ✅ positivehigh	positive	high
DP_003	Verify a specific day can be selected from the calendar Expected: Clicking a day cell updates the displayed selected date. ✅ positivehigh	positive	high
DP_004	Verify next-month navigation updates the calendar header Expected: Month heading increments by one after clicking next. ✅ positivemedium	positive	medium
DP_005	Verify previous-month navigation updates the calendar header Expected: Month heading decrements by one after clicking previous. ✅ positivemedium	positive	medium
DP_006	Verify date range start and end inputs accept valid dates Expected: Both inputs hold the correct date strings and the range summary updates. ✅ positivehigh	positive	high
DP_007	Verify constrained input rejects dates before min Expected: Input is invalid or shows browser validation error when value < min. ❌ negativehigh	negative	high
DP_008	Verify constrained input rejects dates after max Expected: Input is invalid when value > max. ❌ negativehigh	negative	high
DP_009	Verify sibling date field located via XPath ancestor Expected: Input fills correctly when located through a label sibling. ✅ positivemedium	positive	medium
DP_010	Verify scoped booking card date button click Expected: Clicking Book inside the Morning card produces the correct result text. ✅ positivemedium	positive	medium
DP_011	Verify dynamic date display shows today's date Expected: The displayed date matches the current local date. ✅ positivemedium	positive	medium
DP_012	Verify date input is accessible via keyboard Tab navigation Expected: Date input receives focus when tabbed to. ✅ positivemedium	positive	medium
DP_013	Verify calendar day buttons have correct aria-label attributes Expected: Each day cell announces its full date to screen readers. ✅ positivelow	positive	low
DP_014	Verify clearing a date input resets the display Expected: After clearing, the result shows the empty/reset state. ⚠️ edgelow	edge	low

Overview

Date pickers come in two forms: a plain HTML <input type="date"> and a custom calendar widget built with divs or dialog. The automation strategy differs significantly between the two — always inspect the DOM first to identify which type you are working with.

1 · Native Date Input

Native date inputs accept ISO-format strings (YYYY-MM-DD) directly via fill() or sendKeys(). They expose min, max, and value attributes that are easy to assert. Avoid using keyboard arrow keys to navigate — just set the value string directly.

TypeScript

// Fill a native date input
await page.getByTestId('dp-basic-input').fill('2025-06-15');

// Assert value
const val = await page.getByTestId('dp-basic-input').inputValue();
expect(val).toBe('2025-06-15');

// Clear
await page.getByTestId('dp-basic-input').fill('');

2 · Calendar Widget

Custom calendar widgets require click-based interaction: open the picker, navigate months with next/previous buttons, then click the target day cell. Scope all selectors inside the open calendar container to avoid matching hidden instances.

TypeScript

// Open the calendar
await page.getByTestId('dp-calendar-trigger').click();

// Navigate to next month
await page.getByTestId('dp-next-month').click();

// Select a specific day using data-date attribute
await page.locator('[data-testid="dp-day-btn"][data-date="2025-07-20"]').click();

// Assert selected date
await expect(page.locator('#result-s02')).toContainText('2025-07-20');

3 · Date Range

Date range pickers expose two inputs — start and end. Fill them in order; some implementations reset the end date if you set it before the start. Assert the visual summary element after both inputs are filled.

TypeScript

// Fill date range
await page.getByTestId('dp-range-start').fill('2025-08-01');
await page.getByTestId('dp-range-end').fill('2025-08-15');

// Assert range summary
await expect(page.locator('#result-s04')).toContainText('2025-08-01');
await expect(page.locator('#result-s04')).toContainText('2025-08-15');

4 · Min / Max Constraints

Constrained inputs have min and max attributes that browsers enforce natively. Test the boundary: a date one day before min and one day after max should produce an invalid state. Use checkValidity() or assert aria-invalid.

TypeScript

// Assert min / max attributes
const min = await page.getByTestId('dp-constrained-input').getAttribute('min');
const max = await page.getByTestId('dp-constrained-input').getAttribute('max');
expect(min).toBeTruthy();
expect(max).toBeTruthy();

// Fill out-of-range date and check validity
await page.getByTestId('dp-constrained-input').fill('2020-01-01');
const isValid = await page.getByTestId('dp-constrained-input').evaluate(
  (el: HTMLInputElement) => el.checkValidity()
);
expect(isValid).toBe(false);

Method Summary

Action	Selenium	Playwright JS	Playwright PY	Cypress
Fill date	`sendKeys("YYYY-MM-DD")`	`fill("YYYY-MM-DD")`	`fill("YYYY-MM-DD")`	`.type("YYYY-MM-DD")`
Get value	`getAttribute("value")`	`inputValue()`	`input_value()`	`.invoke('val')`
Get min	`getAttribute("min")`	`getAttribute("min")`	`get_attribute("min")`	`.invoke('attr', 'min')`
Get max	`getAttribute("max")`	`getAttribute("max")`	`get_attribute("max")`	`.invoke('attr', 'max')`
Clear input	`clear()`	`fill("")`	`fill("")`	`.clear()`

FAQ