Playwright with Javascript | How to Handle Date Pickers/Calendars| Part 20

• 01:10 Explanation of Date Picker
• 02:58 Direct Date Input Approach
• 05:51 While Loop Approach for Date Selection
• 10:15 Capturing Dates and Selecting Date with Loop
• 13:49 Direct Date Selection Without Loop
• 16:06 Choosing Previous Year, Month and Date

In this video, the presenter discussed in detail how to automate the date picker in the Playwright test automation framework. The elements necessary for the task were identified, and a script was written to interact with them. Although the video was based on a specific example, the speaker mentioned that the processes they demonstrated could be applicable to similar web applications and date picker elements.

He began by highlighting that the date picker consists of multiple elements and is customizable, hence, different web pages or web applications could have different designs. This fact means unique automation scripts have to be written according to the design of the date picker for each application. Crucially, whenever the date picker UI changes, corresponding amendments to the automation codes are required.

The speaker used the test automationpractice.com application for his demonstration. Within it, he selected an input field that displayed the date picker upon clicking. The date picker had months, years, dates and navigation buttons. He mentioned two ways of handling the date picker: one way was by filling the text directly and the other was indirectly by using the date picker, which requires a script.

The script was written in JavaScript by using Playwright Test module and a precreated .spec file in VS code editor. Variables for the year, month, and date you want to select from the date picker are defined before writing the script.

To manage date selections, the speaker used a 'while' loop for iterative clicks until the expected year and month appeared on the date picker. He indicated how to capture all the dates into an array, where each date is iterated one by one till the expected date is found and clicked on.

The presenter demonstrated that you could select the previous year, month, and date by clicking on the previous button instead of the next button. Lastly, he explained how these methods could be applied to different date pickers and applications, and he underscored the necessity of rewriting scripts when a data picker UI changes.

In sum, this video illustrates how automation of the date field can be achieved using Playwright for individual applications, providing a valuable tutorial for those seeking to integrate date pickers seamlessly in their web application projects.