Handling Date field /picker in Playwright

.

//Date Picker - User type date manually in date field

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

test('Date Picker Manual Entry - Comprehensive Test Suite', async ({ page }) => {

    // Navigate to the practice page

    await page.goto('https://testautomationpractice.blogspot.com/');

    // Unique Locator for Date Field

    const dateInputField = page.locator('#datepicker');

    // ==========================================

    // 1. Initial State & Visibility Assertions

    // ==========================================

    // Verify visibility and enabled state

    await expect(dateInputField).toBeVisible();

    await expect(dateInputField).toBeEnabled();

    await expect(dateInputField).toBeEditable();

    // Verify initial state is empty (or has default date)

    await expect(dateInputField).toBeEmpty();

    // ==========================================

    // 2. Action 1: Direct Entry using fill()

    // ==========================================

    const targetDate = '10/15/2026'; // MM/DD/YYYY format (adjust format as per UI)

    // Type date directly using fill

    await dateInputField.fill(targetDate);

    // Assertion: Verify entered date value

    await expect(dateInputField).toHaveValue(targetDate);

    // Read and verify value using Javascript evaluation

    const capturedDateValue = await dateInputField.inputValue();

    console.log('Entered Date (fill):', capturedDateValue);

    // Clear the input field for next action

    await dateInputField.clear();

    await expect(dateInputField).toBeEmpty();

    // ==========================================

    // 3. Action 2: Typing sequentially like a Real User

    // ==========================================

    const sequentialDate = '12/25/2026';

    await dateInputField.focus();

    // Simulate real user typing character by character with slight delay

    await dateInputField.pressSequentially(sequentialDate, { delay: 100 });

    // Assertion: Verify value after key-by-key typing

    await expect(dateInputField).toHaveValue(sequentialDate);

    // ==========================================

    // 4. Action 3: Overwriting Date using Keyboard Shortcuts

    // ==========================================

    const updatedDate = '01/01/2027';

    // Select existing text and replace it using keyboard

    await dateInputField.focus();

    await dateInputField.press('Control+A'); // Select All

    await dateInputField.press('Backspace'); // Delete selected

    await dateInputField.fill(updatedDate);

    // Assertion: Verify replaced date

    await expect(dateInputField).toHaveValue(updatedDate);

    // ==========================================

    // 5. Edge Case: Triggering On-Blur / Calendar Closure

    // ==========================================

    // Many date pickers need a Tab key press or Blur event to save/validate the date

    await dateInputField.focus();

    await dateInputField.press('Tab'); // Move focus out of the date picker

    // Or trigger blur manually

    await dateInputField.blur();

    // Verify element is no longer focused

    await expect(dateInputField).not.toBeFocused();

    // ==========================================

    // 6. Formatting & Attribute Assertions

    // ==========================================

    // Verify placeholder text if available (e.g., "mm/dd/yyyy")

    const datePlaceholder = await dateInputField.getAttribute('placeholder');

    console.log('Date Field Placeholder:', datePlaceholder);

    // Verify maxlength if restricted by input field

    const dateMaxLength = await dateInputField.getAttribute('maxlength');

    console.log('Date Max Length Limit:', dateMaxLength ?? 'No maxlength attribute set');

    // ==========================================

    // 7. Invalid Date Entry / Validation Test

    // ==========================================

    await dateInputField.clear();

    await dateInputField.fill('99/99/9999'); // Invalid date pattern

    await dateInputField.press('Tab');

    // If application has validation error message

    const dateErrorMessage = page.locator('.date-error-msg');

    if (await dateErrorMessage.count() > 0) {

        await expect(dateErrorMessage).toBeVisible();

        await expect(dateErrorMessage).toHaveText('Invalid date format');

    }

    // Clean up

    await dateInputField.clear();

    await expect(dateInputField).toBeEmpty();

    console.log('Date Picker (Manual Entry) tests completed successfully!');

}); 

//Date picker - User select date from date picker

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

test('Date Picker 2 UI Selection - Comprehensive Test Suite', async ({ page }) => {

    // 1. Navigate to the practice website

    await page.goto('https://testautomationpractice.blogspot.com/');

    // 2. Unique Locators for Date Picker 2 components

    const datePickerTwoField = page.locator('#txtDate');

    const dateCalendarWidget = page.locator('#ui-datepicker-div');

    const monthDropdownSelector = page.locator('.ui-datepicker-month');

    const yearDropdownSelector = page.locator('.ui-datepicker-year');

    const calendarDayLinksGrid = page.locator('.ui-datepicker-calendar td a');

    // ==========================================

    // 3. Initial State Assertions

    // ==========================================

    await expect(datePickerTwoField).toBeVisible();

    await expect(datePickerTwoField).toBeEnabled();

   

    // Verify that the input field has the readonly attribute set to "readonly"

    await expect(datePickerTwoField).toHaveAttribute('readonly', 'readonly');

    // ==========================================

    // 4. Open Calendar Popup

    // ==========================================

    await datePickerTwoField.click();

    await expect(dateCalendarWidget).toBeVisible();

    // ==========================================

    // 5. Select Month and Year directly using selectOption()

    // ==========================================

    const selectedMonthLabel = 'Nov';

    const selectedYearValue = '2027';

    // Directly select month and year from the native dropdowns using unique variables

    await monthDropdownSelector.selectOption({ label: selectedMonthLabel });

    await yearDropdownSelector.selectOption({ label: selectedYearValue });

    // ==========================================

    // 6. Select Specific Day from Grid

    // ==========================================

    const specificTargetDayNumber = '20';

    await calendarDayLinksGrid.filter({ hasText: specificTargetDayNumber }).click();

    // ==========================================

    // 7. Post-Selection Assertions

    // ==========================================

    // Verify calendar popup closes automatically

    await expect(dateCalendarWidget).not.toBeVisible();

    // Verify selected date format in input box (dd/mm/yyyy -> 20/11/2027)

    await expect(datePickerTwoField).toHaveValue('20/11/2027');

    console.log('Date Picker 2 selection completed successfully with unique variables!');

});