Blog # 12: Bye-Bye Calendar Headaches: My Playwright Automation Breakthrough

So, I’ve been messing with date pickers lately—you know, those little calendar pop-ups that seem simple until you try automating them. I hit up Test Automation Practice to play around, and I ended up trying three different ways to pick a date using Playwright. One’s super lazy (but effective), one’s like flipping through a calendar, and the last one’s all about dropdowns. Here’s what I did, what worked, and what I thought was kinda cool.

Method 1: The Lazy Direct Fill

First up, I tried the easiest trick in the book—just shove the date right into the input field and call it a day. Here’s the code:

const { test } = require('@playwright/test');

test('Date picker - just fill it', async ({ page }) => {
    // 🚀 Launch the target page
    await page.goto('https://testautomationpractice.blogspot.com/');
    
    // 💥 Directly inject the date like a boss
    await page.locator('#datepicker').fill('02/05/2026');
    
    // 🕶️ Purely theatrical wait (not recommended for production!)
    await page.waitForTimeout(2000); // "Look Ma, the date sticks!"
});

                 

What’s Going On?

I found this #datepicker field, and instead of clicking around, I just typed 02/05/2026 (MM/DD/YYYY) straight into it.

The waitForTimeout was me being nosy—I wanted to watch it sit there for a sec.

My Take

This is the “I’m too tired for this” method. It’s fast, it’s dirty, and it works… until it doesn’t. Some date pickers are picky and won’t let you type—they force you to use the UI. Plus, you’ve gotta know the exact format the site wants (like, is it MM/DD/YYYY or DD-MM-YY?). Still, when it works, it feels like cheating in the best way.

Method 2: Flipping Through the Calendar Like It’s 1999

Next, I tackled the same #datepicker but went full manual—clicking through months like I’m browsing an old desk calendar. Check it out:

test('Date picker - calendar clicker', async ({ page }) => {
    await page.goto('https://testautomationpractice.blogspot.com/');
    
    const day = '04';
    const month = 'March';
    const year = '2026';

    // Open calendar widget
    await page.locator('#datepicker').click();
    
    // Navigate through months
    while (true) {
        const currentMonth = await page.locator('.ui-datepicker-month').textContent();
        const currentYear = await page.locator('.ui-datepicker-year').textContent();

        // Break condition for target month/year
        if (currentMonth === month && currentYear === year) {
            break;
        }
        await page.locator('[data-handler="next"]').click();
    }

    // Select target day
    const dates = page.locator('a.ui-state-default');
    for (const date of await dates.all()) {
        if (await date.textContent() === day) {
            await date.click();
            break;
        }
    }
});

What’s Happening?

Click the field to pop open the calendar.

Loop through months by smashing the "Next" button until I hit March 2026.

Then, hunt down the 04 in the grid and click it.

My Take

This felt old-school—like I was actually using the thing. It’s cool how Playwright lets you grab stuff like .ui-datepicker-month and check it on the fly. But girl, if your date’s years away, you’re clicking "Next" forever. 

Method 3: Dropdowns for the Win

Last up, I hit a different picker (#txtDate) that had dropdowns for months and years. Way less clicking, way more chill. Here’s the code:

test('Calendar dropdown type', async ({ page }) => {
    await page.goto('https://testautomationpractice.blogspot.com/');
    await page.locator('input#txtDate').click();

    const day = '4';
    const month = 'Mar';
    const year = '2028';

    // Select month from dropdown
    const monthDropDown = page.locator('select.ui-datepicker-month');
    await monthDropDown.selectOption(month);

    // Select year from dropdown
    const yearDropDown = page.locator('select.ui-datepicker-year');
    await yearDropDown.selectOption(year);

    // Click target day
    const dates = page.locator('.ui-datepicker-calendar tbody tr td a');
    for (const date of await dates.all()) {
        if (await date.textContent() === day) {
            await date.click();
            break;
        }
    }

    await page.waitForTimeout(3000); // Visual verification
});

What’s Going On?

Click to open the calendar.

Pick Mar from the month dropdown and 2028 from the year dropdown.

Find 4 in the grid and click it.

My Take

This one’s my favorite. No endless clicking—just bam, set the month, set the year, grab the day. It’s like the calendar’s handing you the keys. I threw in a waitForTimeout to watch it work, but in a real test, I’d swap that for something smarter. Feels slick, though—Playwright’s selectOption is a total time-saver.

What I Learned (and Liked)

Direct Fill: Lazy and awesome when it works. Kinda like sneaking past the bouncer.

Clicky Calendar: Fun to code, but slow as heck for far-off dates. Nostalgic vibes, though.

Dropdowns: Fast, clean, and modern. Probably what I’d use in a real project.

I’m hooked on how Playwright makes this stuff doable—grabbing elements, looping through dates, whatever. Next time, I might try handling past dates (clicking "Previous" instead) or maybe test a site that fights back with weird formats. What’s your go-to for date pickers? Hit me up—I’m curious!