How To Automate Date Pickers | Playwright With TypeScript Tutorial 🎭| Part VII | LambdaTest

About The Video

In this Part-VII of the Playwright tutorial series, 𝙆𝙤𝙪𝙨𝙝𝙞𝙠 𝘾𝙝𝙖𝙩𝙩𝙚𝙧𝙟𝙚𝙚, Content Creator at LetCode (@Koushik_chat) teaches you how to handle date pickers in Playwright using different functions like Fill and Moment with the help of real-time examples.

Video Chapters

0:00 Introduction

0:08 How to handle Date Pickers in Playwright?

0:46 Handling Date Pickers using the Fill method

4:59 Handling Date Pickers using the Moment method

29:16 Recap

30:07 Conclusion

Key Topics Covered

Introduction to Date Pickers: The video starts by explaining the two types of date pickers commonly encountered in web applications. One displays dates in a "DD MMM YYYY" format with options to navigate months, while the other showcases only months and years for selection.

Handling Date Pickers in Playwright: The tutorial demonstrates two methods for interacting with date pickers using Playwright: The first method involves directly sending the date as text to the date picker input field. This approach requires understanding the expected date format by the date picker. The second method involves navigating the calendar widget to select a specific date manually. This includes using selectors to interact with the next and previous buttons and selecting the date from the calendar view.

Navigating Through Months: The presenter shows how to programmatically click the next or previous buttons to reach the desired month and year, highlighting the importance of correctly formatting the date to match the date picker's requirements.

Selecting Dates: Detailed instructions are provided on selecting specific dates within the calendar, including handling different calendar formats and ensuring the correct date is chosen according to the test scenario.

Using Moment.js for Date Comparisons: The video introduces Moment.js, a JavaScript library for parsing, validating, manipulating, and formatting dates, to simplify working with dates. The presenter uses Moment.js to compare dates and determine whether to navigate forward or backward in the calendar.

Writing Reusable Functions for Date Selection: Towards the end, the tutorial focuses on creating reusable functions for date selection in Playwright tests. This includes writing functions that take parameters like the date, month, and year, and using these functions to navigate and select dates in the date picker.

Practical Demonstration: Throughout the video, the presenter provides a hands-on demonstration by writing and executing Playwright test scripts that interact with date pickers in a sample web application. This includes live coding in Visual Studio Code and executing tests to verify the correct dates are selected.

Related Blogs & Hubs

How To Run Playwright Tests On LambdaTest Platform

How To Run Playwright Tests In Parallel

Migrate Existing Playwright Test Suites On LambdaTest

Run Local Tests Using Playwright

Running Playwright Tests With Playwright Test Runner

Running Playwright Tests With Cucumber.js

Running Playwright Tests In CI/CD