{"id":3587,"date":"2025-01-17T08:55:36","date_gmt":"2025-01-17T08:55:36","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3587"},"modified":"2025-01-17T10:56:21","modified_gmt":"2025-01-17T10:56:21","slug":"handle-calendars-and-date-picks-using-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/17\/handle-calendars-and-date-picks-using-playwright-java\/","title":{"rendered":"Handle Calendars and Date picks using Playwright Java"},"content":{"rendered":"<p><em>In this blog we will be utilizing Playwright Java to handle calendars and date picks.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Select date\/month\/year on a given website<\/li>\n<li>Source code<\/li>\n<\/ul>\n<p><strong>Select date\/month\/year on a given website<\/strong><\/p>\n<p>Go to<\/p>\n<p>https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3590\" width=\"496\" data-init-width=\"1170\" height=\"259\" data-init-height=\"612\" title=\"Screenshot 2025-01-17 at 2.26.51\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.26.51\u202fPM.png\" data-width=\"496\" data-height=\"259\" style=\"aspect-ratio: auto 1170 \/ 612;\"><\/span><\/p>\n<p>Our goal is to automate the selection of \u2018Delivery Date\u2019 calendar that is shown above.<\/p>\n<p>We will first click the delivery date field, let us inspect delivery date field. Right click on the date&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3591\" width=\"529\" data-init-width=\"1170\" height=\"629\" data-init-height=\"1392\" title=\"Screenshot 2025-01-17 at 2.27.41\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.27.41\u202fPM.png\" data-width=\"529\" data-height=\"629\" style=\"aspect-ratio: auto 1170 \/ 1392;\"><\/span><\/p>\n<p><em>#root &gt; div &gt; div.date-field-container &gt; div &gt; div &gt; div &gt; input<\/em><strong><em>.react-date-picker__inputGroup<\/em><\/strong><em>__input.react-date-picker__inputGroup__day<\/em><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3592\" width=\"578\" data-init-width=\"1170\" height=\"820\" data-init-height=\"1660\" title=\"Screenshot 2025-01-17 at 2.28.51\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.28.51\u202fPM.png\" data-width=\"578\" data-height=\"820\" style=\"aspect-ratio: auto 1170 \/ 1660;\"><\/span><\/p>\n<p>&nbsp;Copy css selector<\/p>\n<p><em>#root &gt; div &gt; div.date-field-container &gt; div &gt; span &gt; div &gt; div &gt; div.react-calendar__navigation &gt; button<\/em><strong><em>.react-calendar__navigation__label<\/em><\/strong><\/p>\n<p>We can pick the above class<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3593\" width=\"589\" data-init-width=\"1170\" height=\"609\" data-init-height=\"1210\" title=\"Screenshot 2025-01-17 at 2.39.30\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.39.30\u202fPM.png\" data-width=\"589\" data-height=\"609\" style=\"aspect-ratio: auto 1170 \/ 1210;\"><\/span><\/p>\n<p>We will now inspect the year label<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3594\" width=\"465\" data-init-width=\"1208\" height=\"520\" data-init-height=\"1352\" title=\"Screenshot 2025-01-17 at 2.40.03\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.40.03\u202fPM.png\" data-width=\"465\" data-height=\"520\" style=\"aspect-ratio: auto 1208 \/ 1352;\"><\/span><\/p>\n<p>Once we click the year label (using above), lot of years would be shown, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3595\" width=\"474\" data-init-width=\"940\" height=\"750\" data-init-height=\"1488\" title=\"Screenshot 2025-01-17 at 2.40.51\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.40.51\u202fPM.png\" data-width=\"474\" data-height=\"750\" style=\"aspect-ratio: auto 940 \/ 1488;\"><\/span><\/p>\n<p>Notice below that the year is represented as type \u2018button\u2019 having text 2027<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3596\" width=\"609\" data-init-width=\"1234\" height=\"705\" data-init-height=\"1428\" title=\"Screenshot 2025-01-17 at 2.41.30\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.41.30\u202fPM.png\" data-width=\"609\" data-height=\"705\" style=\"aspect-ratio: auto 1234 \/ 1428;\"><\/span><\/p>\n<p>&nbsp;Once we click the desired year (using above), the 12 months come up, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3597\" width=\"569\" data-init-width=\"1234\" height=\"634\" data-init-height=\"1376\" title=\"Screenshot 2025-01-17 at 2.41.59\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.41.59\u202fPM.png\" data-width=\"569\" data-height=\"634\" style=\"aspect-ratio: auto 1234 \/ 1376;\"><\/span><\/p>\n<p>&nbsp;Copy the xpath of January<\/p>\n<p><em>\/\/*[@id=&#8221;root&#8221;]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[<\/em><strong><em>1<\/em><\/strong><em>]\/abbr<\/em><\/p>\n<p>Similarly the xpath of Feb and March would be<\/p>\n<p><em>\/\/*[@id=&#8221;root&#8221;]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[<\/em><strong><em>2<\/em><\/strong><em>]\/abbr<\/em><\/p>\n<p><em>\/\/*[@id=&#8221;root&#8221;]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[<\/em><strong><em>3<\/em><\/strong><em>]\/abbr<\/em><\/p>\n<p>So notice above that <em>[<\/em><strong><em>1<\/em><\/strong><em>]<\/em><em> <\/em><em>[<\/em><strong><em>2<\/em><\/strong><em>]<\/em><em> <\/em><em>[<\/em><strong><em>3<\/em><\/strong><em>]<\/em><em> <\/em>are varying and hence this is a variable, rest all is constant.<\/p>\n<p>So we can break the expression in 3 parts<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3598\" width=\"532\" data-init-width=\"1234\" height=\"429\" data-init-height=\"994\" title=\"Screenshot 2025-01-17 at 2.42.33\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.42.33\u202fPM.png\" data-width=\"532\" data-height=\"429\" style=\"aspect-ratio: auto 1234 \/ 994;\"><\/span><\/p>\n<p>&nbsp;Next, once we click the desired month (using above), the dates come up, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3599\" width=\"580\" data-init-width=\"1234\" height=\"567\" data-init-height=\"1206\" title=\"Screenshot 2025-01-17 at 2.43.11\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.43.11\u202fPM.png\" data-width=\"580\" data-height=\"567\" style=\"aspect-ratio: auto 1234 \/ 1206;\"><\/span><\/p>\n<p>&nbsp;Notice above that the date \u201822\u2019 is represented as type \u2018abbr\u2019 having text 22.&nbsp;<\/p>\n<p>So we can write like below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3600\" width=\"585\" data-init-width=\"1234\" height=\"327\" data-init-height=\"690\" title=\"Screenshot 2025-01-17 at 2.43.45\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.43.45\u202fPM.png\" data-width=\"585\" data-height=\"327\" style=\"aspect-ratio: auto 1234 \/ 690;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>Notice below that respective year\/month\/date gets selected<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3601\" width=\"561\" data-init-width=\"1234\" height=\"396\" data-init-height=\"870\" title=\"Screenshot 2025-01-17 at 2.44.41\u202fPM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-2.44.41\u202fPM.png\" data-width=\"561\" data-height=\"396\" style=\"aspect-ratio: auto 1234 \/ 870;\"><\/span><\/p>\n<p>&nbsp;So this is how we can handle the calendars.<\/p>\n<p><strong>Source code<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> org.testng.annotations.AfterMethod;<\/p>\n<p><strong>import<\/strong> org.testng.annotations.BeforeMethod;<\/p>\n<p><strong>import<\/strong> org.testng.annotations.Test;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog34_Calendar_Example1_PWJava {<\/p>\n<p><strong>private<\/strong> Browser browser;<\/p>\n<p><strong>private<\/strong> Page page;<\/p>\n<p>@BeforeMethod<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> setUp() {<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();&nbsp;<\/p>\n<p>browser = playwright.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<p>page = browser.newPage();<\/p>\n<p>}<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> test_1() {<\/p>\n<p><strong>int<\/strong> month = 1;<\/p>\n<p>String date = &#8220;15&#8221;;<\/p>\n<p>String year = &#8220;2027&#8221;;<\/p>\n<\/p>\n<p>page.navigate(&#8220;https:\/\/rahulshettyacademy.com\/seleniumPractise\/#\/offers&#8221;);<\/p>\n<p>\/\/click delivery date field<\/p>\n<p>page.locator(&#8220;.react-date-picker__inputGroup&#8221;).click();<\/p>\n<p>\/\/click month-year label (example March 2024)<\/p>\n<p>page.locator(&#8220;.react-calendar__navigation__label&#8221;).click();<\/p>\n<p>\/\/click year label (example 2024)<\/p>\n<p>page.locator(&#8220;.react-calendar__navigation__label&#8221;).click();<\/p>\n<\/p>\n<p>\/\/click Year (example 2027)<\/p>\n<p>page.locator(&#8220;\/\/button[text()='&#8221;+year+&#8221;&#8216;]&#8221;).click();<\/p>\n<\/p>\n<p>\/\/click month (example January)<\/p>\n<p>\/\/page.locator(&#8220;\/\/*[@id=&#8221;root&#8221;]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[1]\/abbr&#8221;).click();<\/p>\n<p>page.locator(&#8220;\/\/*[@id=&#8221;root&#8221;]\/div\/div[2]\/div\/span\/div\/div\/div[2]\/div\/div\/button[&#8221; + month + &#8220;]\/abbr&#8221;).click();<\/p>\n<p>\/\/click date (example 15)<\/p>\n<p>page.locator(&#8220;\/\/abbr[text()='&#8221;+date+&#8221;&#8216;]&#8221;).click();<\/p>\n<p>}<\/p>\n<p>@AfterMethod<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> tearDown() {<\/p>\n<p>page.pause();<\/p>\n<p>browser.close();<\/p>\n<p>page.close();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&nbsp; Our goal is to automate the selection of \u2018Delivery Date\u2019 calendar that is shown above. We will first [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3587\/revisions"}],"predecessor-version":[{"id":3755,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3587\/revisions\/3755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"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}]}}