Playwright fill() function not working on Kendo DatePicker, but works on native <input type="date" />

[Jason]

Our web application uses Kendo Angular Date Picker. And we are creating testcases on our web with a tool called Playwright from Microsoft. This tool mimics human interaction with the web. And on any form input control regardless of type, this fill() is used. For example:

await page.locator('input[name="expireDate"]').fill('2025-08-21');

; ----> this code will set the date input value to 2025 august 21st. But on kendo angular date picker, the resulting code is this:

await page.getByRole('button', { name: 'Toggle calendar' }).click();

await page.getByTitle('Monday, August 25,').locator('span').click();

Which will not bulletproof the testcase for future runs, as it does not contain the whole date including its year.

My question is can this component function just like native date input in this regard?

[Yanmario]

Hi Jason,

What I can suggest in your specific use-case scenario is to download our source code and see how dates are being set for the component. This information is available in the following article:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/testing-environment

It is generally recommended to set the value of the component with a Date object. However, you can also target the DatePicker input directly and set the value, as shown in our unit tests. In your case, it might look like this:

// This should work if the DatePicker accepts string input
await page.locator('kendo-datepicker input').fill('08/21/2025');

// Trigger blur to ensure parsing
await page.locator('kendo-datepicker input').blur();

// Verify the value was set correctly
const value = await page.locator('kendo-datepicker input').inputValue();
expect(value).toBe('08/21/2025');

or 

await page.evaluate(() => {
  const datePicker = document.querySelector('kendo-datepicker');
  if (datePicker) {
    datePicker.value = new Date('2025-08-21');
    datePicker.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

I hope the provided information is helpful. 

Regards,
Yanmario
Progress Telerik