In this blog we will be utilizing Playwright Java to handle calendars and date picks.<\/em><\/p>\n

\n

\n<\/ins>\n<\/div>\n
Topics that we will cover:<\/strong><\/p>\n
\n
Select date\/month\/year on a given website<\/li>\n
Source code<\/li>\n<\/ul>\n
Select date\/month\/year on a given website<\/strong><\/p>\n
Go to<\/p>\n
https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Our goal is to automate the selection of \u2018Delivery Date\u2019 calendar that is shown above.<\/p>\n
We will first click the delivery date field, let us inspect delivery date field. Right click on the date\u00a0<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
#root > div > div.date-field-container > div > div > div > input<\/em>.react-date-picker__inputGroup<\/em><\/strong>__input.react-date-picker__inputGroup__day<\/em><\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Copy css selector<\/p>\n
#root > div > div.date-field-container > div > span > div > div > div.react-calendar__navigation > button<\/em>.react-calendar__navigation__label<\/em><\/strong><\/p>\n
We can pick the above class<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
We will now inspect the year label<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Once we click the year label (using above), lot of years would be shown, see below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
Notice below that the year is represented as type \u2018button\u2019 having text 2027<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Once we click the desired year (using above), the 12 months come up, see below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Copy the xpath of January<\/p>\n
\/\/*[@id=”root”]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[<\/em>1<\/em><\/strong>]\/abbr<\/em><\/p>\n
Similarly the xpath of Feb and March would be<\/p>\n
\/\/*[@id=”root”]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[<\/em>2<\/em><\/strong>]\/abbr<\/em><\/p>\n
\/\/*[@id=”root”]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[<\/em>3<\/em><\/strong>]\/abbr<\/em><\/p>\n
So notice above that [<\/em>1<\/em><\/strong>]<\/em> <\/em>[<\/em>2<\/em><\/strong>]<\/em> <\/em>[<\/em>3<\/em><\/strong>]<\/em> <\/em>are varying and hence this is a variable, rest all is constant.<\/p>\n
So we can break the expression in 3 parts<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Next, once we click the desired month (using above), the dates come up, see below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Notice above that the date \u201822\u2019 is represented as type \u2018abbr\u2019 having text 22.\u00a0<\/p>\n
So we can write like below<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0Execute.<\/p>\n
Notice below that respective year\/month\/date gets selected<\/p>\n<\/div>\n
$\"\"$ <\/span><\/div>\n
\n
\u00a0So this is how we can handle the calendars.<\/p>\n
Source code<\/strong><\/p>\n
package<\/strong> com.rsa.playwrightjava;<\/p>\n
<\/p>\n
import<\/strong> org.testng.annotations.AfterMethod;<\/p>\n
import<\/strong> org.testng.annotations.BeforeMethod;<\/p>\n
import<\/strong> org.testng.annotations.Test;<\/p>\n
import<\/strong> com.microsoft.playwright.Browser;<\/p>\n
import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n
import<\/strong> com.microsoft.playwright.Page;<\/p>\n
import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n
<\/p>\n
public<\/strong>
\nclass<\/strong> Blog34_Calendar_Example1_PWJava {<\/p>\n
private<\/strong> Browser browser;<\/p>\n
private<\/strong> Page page;<\/p>\n
@BeforeMethod<\/p>\n
public<\/strong>
\nvoid<\/strong> setUp() {<\/p>\n
Playwright playwright = Playwright.create<\/em>();\u00a0<\/p>\n
browser = playwright.chromium().launch(new<\/strong> BrowserType.LaunchOptions().setHeadless(false<\/strong>));<\/p>\n
page = browser.newPage();<\/p>\n
}<\/p>\n
@Test<\/p>\n
public<\/strong>
\nvoid<\/strong> test_1() {<\/p>\n
int<\/strong> month = 1;<\/p>\n
String date = “15”;<\/p>\n
String year = “2027”;<\/p>\n
<\/p>\n
page.navigate(“https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers”);<\/p>\n
\/\/click delivery date field<\/p>\n
page.locator(“.react-date-picker__inputGroup”).click();<\/p>\n
\/\/click month-year label (example March 2024)<\/p>\n
page.locator(“.react-calendar__navigation__label”).click();<\/p>\n
\/\/click year label (example 2024)<\/p>\n
page.locator(“.react-calendar__navigation__label”).click();<\/p>\n
<\/p>\n
\/\/click Year (example 2027)<\/p>\n
page.locator(“\/\/button[text()='”+year+”‘]”).click();<\/p>\n
<\/p>\n
\/\/click month (example January)<\/p>\n
\/\/page.locator(“\/\/*[@id=”root”]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[1]\/abbr”).click();<\/p>\n
page.locator(“\/\/*[@id=”root”]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[” + month + “]\/abbr”).click();<\/p>\n
\/\/click date (example 15)<\/p>\n
page.locator(“\/\/abbr[text()='”+date+”‘]”).click();<\/p>\n
}<\/p>\n
@AfterMethod<\/p>\n
public<\/strong>
\nvoid<\/strong> tearDown() {<\/p>\n
page.pause();<\/p>\n
browser.close();<\/p>\n
page.close();<\/p>\n
}<\/p>\n
}<\/p>\n
<\/p>\n
Thanks.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00a0 Our goal is to automate the selection of \u2018Delivery Date\u2019 calendar that is shown above. We will first […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,9],"tags":[],"class_list":["post-3587","post","type-post","status-publish","format-standard","hentry","category-java","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3587"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3587\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}