In this blog we will be utilizing Playwright Java to handle calendars and date picks.

Topics that we will cover:

• Select date/month/year on a given website
• Source code

Select date/month/year on a given website

Go to

https://rahulshettyacademy.com/seleniumPractise/#/offers 

Our goal is to automate the selection of ‘Delivery Date’ calendar that is shown above.

We will first click the delivery date field, let us inspect delivery date field. Right click on the date 

#root > div > div.date-field-container > div > div > div > input.react-date-picker__inputGroup__input.react-date-picker__inputGroup__day

 Copy css selector

#root > div > div.date-field-container > div > span > div > div > div.react-calendar__navigation > button.react-calendar__navigation__label

We can pick the above class

We will now inspect the year label

Once we click the year label (using above), lot of years would be shown, see below

Notice below that the year is represented as type ‘button’ having text 2027

 Once we click the desired year (using above), the 12 months come up, see below

 Copy the xpath of January

//*[@id="root"]/div/div[2]/div/span/div/div/div[2]/div/div/button[1]/abbr

Similarly the xpath of Feb and March would be

//*[@id="root"]/div/div[2]/div/span/div/div/div[2]/div/div/button[2]/abbr

//*[@id="root"]/div/div[2]/div/span/div/div/div[2]/div/div/button[3]/abbr

So notice above that [1] [2] [3] are varying and hence this is a variable, rest all is constant.

So we can break the expression in 3 parts

 Next, once we click the desired month (using above), the dates come up, see below

 Notice above that the date ‘22’ is represented as type ‘abbr’ having text 22. 

So we can write like below

 Execute.

Notice below that respective year/month/date gets selected

 So this is how we can handle the calendars.

Source code

package com.rsa.playwrightjava;

import org.testng.annotations.AfterMethod;

import org.testng.annotations.BeforeMethod;

import org.testng.annotations.Test;

import com.microsoft.playwright.Browser;

import com.microsoft.playwright.BrowserType;

import com.microsoft.playwright.Page;

import com.microsoft.playwright.Playwright;

public class Blog34_Calendar_Example1_PWJava {

private Browser browser;

private Page page;

@BeforeMethod

public void setUp() {

Playwright playwright = Playwright.create(); 

browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));

page = browser.newPage();

}

@Test

public void test_1() {

int month = 1;

String date = "15";

String year = "2027";

page.navigate("https://rahulshettyacademy.com/seleniumPractise/#/offers");

//click delivery date field

page.locator(".react-date-picker__inputGroup").click();

//click month-year label (example March 2024)

page.locator(".react-calendar__navigation__label").click();

//click year label (example 2024)

page.locator(".react-calendar__navigation__label").click();

//click Year (example 2027)

page.locator("//button[text()='"+year+"']").click();

//click month (example January)

//page.locator("//*[@id=\"root\"]/div/div[2]/div/span/div/div/div[2]/div/div/button[1]/abbr").click();

page.locator("//*[@id=\"root\"]/div/div[2]/div/span/div/div/div[2]/div/div/button[" + month + "]/abbr").click();

//click date (example 15)

page.locator("//abbr[text()='"+date+"']").click();

}

@AfterMethod

public void tearDown() {

page.pause();

browser.close();

page.close();

}

}

Thanks.