├── README.md
├── pom.xml
├── src
    ├── main
    │   └── java
    │   │   └── components
    │   │       └── DatePicker.java
    └── test
    │   └── java
    │       ├── base
    │           └── BaseTests.java
    │       └── datepicker
    │           └── DatePickerTests.java
└── web
    └── datepicker.html


/README.md:
--------------------------------------------------------------------------------
1 | # Automation Coding Recipe for Date Pickers
2 | 
3 | This creates a model class to automate the interaction with a Date Picker component. Useful for automating UI tests.
4 | 
5 | This projet uses Selenium WebDriver and Java.
6 | 
7 | [Accompanying Blog Post](https://wp.me/p9CQEV-1oe) | [Live Stream Video](https://youtu.be/C72DOoI0fwk)
8 | 


--------------------------------------------------------------------------------
/pom.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project xmlns="http://maven.apache.org/POM/4.0.0"
 3 |          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4 |          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 5 |     <modelVersion>4.0.0</modelVersion>
 6 | 
 7 |     <groupId>org.example</groupId>
 8 |     <artifactId>recipes</artifactId>
 9 |     <version>1.0-SNAPSHOT</version>
10 | 
11 |     <properties>
12 |         <maven.compiler.source>1.14</maven.compiler.source>
13 |         <maven.compiler.target>1.14</maven.compiler.target>
14 |     </properties>
15 | 
16 |     <dependencies>
17 |         <dependency>
18 |             <groupId>org.seleniumhq.selenium</groupId>
19 |             <artifactId>selenium-chrome-driver</artifactId>
20 |             <version>4.0.0-alpha-2</version>
21 |         </dependency>
22 | 
23 |         <dependency>
24 |             <groupId>org.seleniumhq.selenium</groupId>
25 |             <artifactId>selenium-support</artifactId>
26 |             <version>4.0.0-alpha-2</version>
27 |         </dependency>
28 | 
29 |         <dependency>
30 |             <groupId>org.seleniumhq.selenium</groupId>
31 |             <artifactId>selenium-server</artifactId>
32 |             <version>4.0.0-alpha-2</version>
33 |         </dependency>
34 | 
35 |         <dependency>
36 |             <groupId>org.junit.jupiter</groupId>
37 |             <artifactId>junit-jupiter-api</artifactId>
38 |             <version>RELEASE</version>
39 |             <scope>test</scope>
40 |         </dependency>
41 | 
42 |         <dependency>
43 |             <groupId>io.github.bonigarcia</groupId>
44 |             <artifactId>webdrivermanager</artifactId>
45 |             <version>RELEASE</version>
46 |             <scope>test</scope>
47 |         </dependency>
48 | 
49 |     </dependencies>
50 | 
51 | </project>


--------------------------------------------------------------------------------
/src/main/java/components/DatePicker.java:
--------------------------------------------------------------------------------
 1 | package components;
 2 | 
 3 | import org.openqa.selenium.By;
 4 | import org.openqa.selenium.WebDriver;
 5 | 
 6 | import java.time.LocalDate;
 7 | import java.time.Month;
 8 | import java.time.temporal.ChronoUnit;
 9 | 
10 | import static java.lang.String.format;
11 | 
12 | public class DatePicker {
13 | 
14 |     private WebDriver driver;
15 | 
16 |     private By openCalendarButton = By.cssSelector("#datepicker ~ span button");
17 |     private By calendar = By.cssSelector("div[role='calendar']");
18 |     private By period = By.cssSelector("div[role='period']");
19 |     private By leftArrow = By.cssSelector("div[role='navigator'] i.chevron-left");
20 |     private By rightArrow = By.cssSelector("div[role='navigator'] i.chevron-right");
21 |     private String day_FORMAT = "//td[@day='%d' and contains(@class, 'current-month')]";
22 | 
23 |     public DatePicker(WebDriver driver){
24 |         this.driver = driver;
25 |     }
26 | 
27 |     public LocalDate chooseDate(LocalDate date){
28 |         open();
29 |         chooseMonth(date);
30 |         chooseDay(date.getDayOfMonth());
31 |         return getSelectedDate();
32 |     }
33 | 
34 |     public LocalDate getSelectedDate(){
35 |        var fields = driver.findElement(calendar).getAttribute("selectedday").split("-");
36 |        return LocalDate.of(
37 |                Integer.parseInt(fields[0]),
38 |                Integer.parseInt(fields[1]) + 1,
39 |                Integer.parseInt(fields[2]));
40 |     }
41 | 
42 |     public void chooseDay(int dayOfMonth) {
43 |         By locator = By.xpath(format(day_FORMAT, dayOfMonth));
44 |         driver.findElement(locator).click();
45 |     }
46 | 
47 |     public void chooseMonth(LocalDate date) {
48 |         var currentPeriod = getCurrentPeriod();
49 |         long monthsAway = ChronoUnit.MONTHS.between(currentPeriod, date.withDayOfMonth(1));
50 | 
51 |         By arrow = monthsAway < 0 ? leftArrow : rightArrow;
52 | 
53 |         for(int i = 0; i < Math.abs(monthsAway); i++){
54 |             driver.findElement(arrow).click();
55 |         }
56 |     }
57 | 
58 |     public LocalDate getCurrentPeriod(){
59 |         var currentPeriod = driver.findElement(period).getText().split(" ");
60 |         return LocalDate.of(
61 |                 Integer.parseInt(currentPeriod[1]),
62 |                 Month.valueOf(currentPeriod[0].toUpperCase()),
63 |                 1);
64 |     }
65 | 
66 |     public void open(){
67 |         if(!isCalendarOpen()){
68 |             driver.findElement(openCalendarButton).click();
69 |         }
70 |     }
71 | 
72 |     public boolean isCalendarOpen(){
73 |         return driver.findElement(calendar).isDisplayed();
74 |     }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/test/java/base/BaseTests.java:
--------------------------------------------------------------------------------
 1 | package base;
 2 | 
 3 | import io.github.bonigarcia.wdm.WebDriverManager;
 4 | import org.junit.jupiter.api.AfterAll;
 5 | import org.junit.jupiter.api.BeforeAll;
 6 | import org.openqa.selenium.WebDriver;
 7 | import org.openqa.selenium.chrome.ChromeDriver;
 8 | 
 9 | public class BaseTests {
10 | 
11 |     protected static WebDriver driver;
12 | 
13 |     @BeforeAll
14 |     public static void setUp() {
15 |         WebDriverManager.chromedriver().setup();
16 |         driver = new ChromeDriver();
17 |     }
18 | 
19 |     @AfterAll
20 |     public static void tearDown() {
21 |         driver.quit();
22 |     }
23 | }


--------------------------------------------------------------------------------
/src/test/java/datepicker/DatePickerTests.java:
--------------------------------------------------------------------------------
 1 | package datepicker;
 2 | 
 3 | import base.BaseTests;
 4 | import components.DatePicker;
 5 | import org.junit.jupiter.api.BeforeAll;
 6 | import org.junit.jupiter.api.BeforeEach;
 7 | import org.junit.jupiter.api.Test;
 8 | 
 9 | import java.time.LocalDate;
10 | import java.time.Month;
11 | 
12 | import static org.junit.jupiter.api.Assertions.assertEquals;
13 | 
14 | public class DatePickerTests extends BaseTests {
15 | 
16 |     private DatePicker datePicker;
17 | 
18 |     @BeforeAll
19 |     public static void launchApp(){
20 |         //TODO: change this to your local URL
21 |         driver.get("file:///Users/angie/workspace/blogs/recipes/web/datepicker.html");
22 |     }
23 | 
24 |     @BeforeEach
25 |     public void refreshCalendar(){
26 |         driver.navigate().refresh();
27 |         datePicker = new DatePicker(driver);
28 |     }
29 | 
30 |     @Test
31 |     public void pastDate(){
32 |         var dateToSelect = LocalDate.of(1989, Month.DECEMBER, 20);
33 |         var selectedDate = datePicker.chooseDate(dateToSelect);
34 |         assertEquals(dateToSelect, selectedDate);
35 |     }
36 | 
37 |     @Test
38 |     public void trickyDate(){
39 |         var dateToSelect = LocalDate.of(2020, Month.MARCH, 31);
40 |         var selectedDate = datePicker.chooseDate(dateToSelect);
41 |         assertEquals(dateToSelect, selectedDate);
42 |     }
43 | 
44 |     @Test
45 |     public void futureDate(){
46 |         var dateToSelect = LocalDate.now().plusMonths(7);
47 |         var selectedDate = datePicker.chooseDate(dateToSelect);
48 |         assertEquals(dateToSelect, selectedDate);
49 |     }
50 | 
51 |     @Test
52 |     public void currentMonth(){
53 |         var dateToSelect = LocalDate.now().withDayOfMonth(15);
54 |         var selectedDate = datePicker.chooseDate(dateToSelect);
55 |         assertEquals(dateToSelect, selectedDate);
56 |     }
57 | }


--------------------------------------------------------------------------------
/web/datepicker.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta charset="utf-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     <title>Automation Cookbook: DatePicker Recipe</title>
 6 |     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 7 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 8 |     <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
 9 |     <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
10 | 
11 |     <style>
12 |         .gj-datepicker {
13 |             padding: 10px;
14 |             margin-left: 85px;
15 |             margin-top: 50px;
16 |             width: 250px;
17 |         }
18 |     </style>
19 | </head>
20 | <body>
21 |     <input id="datepicker" disabled />
22 |     <script> $('#datepicker').datepicker({uiLibrary: 'bootstrap4' });</script>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------