BrauzerLab
← Back to missions 19 / 50

Custom Date Picker

Hard ~240 sec

Instead of a standard <input type="date">, this mission uses a custom calendar widget made entirely of buttons — each button represents a single day.

Click 15 in the May 2026 calendar on the right. When the correct day is selected, the #calendar element’s data-selected-date attribute will be set to 2026-05-15.

The page object is already available. There are several ways to locate the day buttons.

Take note: each day button has a data-date attribute, a data-testid, and visible text. All three are valid selectors.

TASK

Select May 15, 2026 in the calendar.

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

test('Custom Date Picker', async ({ page }) => {
  await page.goto('https://lab.local/mission/date-picker');
  // ↓ Your code goes below ↓
});
Editor
https://lab.local/mission/date-picker
Loading...
Console Found a bug in this mission? Report it
Results will appear here — press Run or Check.