-1

I need to create a method to read a date from a CSV file as a parameter.

I also need to automate selecting that date from the calendar tool whose HTML is below. I'm using Selenium with Java.

<div class="react-datepicker__month" role="listbox" aria-label="month  2022-06">
    <div class="react-datepicker__week">
        <div class="react-datepicker__day react-datepicker__day--029 react-datepicker__day--weekend react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Sunday, May 29th, 2022" role="option" aria-disabled="false">29</div>
        <div class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Monday, May 30th, 2022" role="option" aria-disabled="false">30</div>
        <div class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Tuesday, May 31st, 2022" role="option" aria-disabled="false">31</div>
        <div class="react-datepicker__day react-datepicker__day--001" tabindex="-1" aria-label="Choose Wednesday, June 1st, 2022" role="option" aria-disabled="false">1</div>
        <div class="react-datepicker__day react-datepicker__day--002" tabindex="-1" aria-label="Choose Thursday, June 2nd, 2022" role="option" aria-disabled="false">2</div>
        <div class="react-datepicker__day react-datepicker__day--003" tabindex="-1" aria-label="Choose Friday, June 3rd, 2022" role="option" aria-disabled="false">3</div>
        <div class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Saturday, June 4th, 2022" role="option" aria-disabled="false">4</div>
    </div>
    <div class="react-datepicker__week">
        <div class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Sunday, June 5th, 2022" role="option" aria-disabled="false">5</div>
        <div class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--selected react-datepicker__day--today" tabindex="0" aria-label="Choose Monday, June 6th, 2022" role="option" aria-disabled="false">6</div>
        <div class="react-datepicker__day react-datepicker__day--007" tabindex="-1" aria-label="Choose Tuesday, June 7th, 2022" role="option" aria-disabled="false">7</div>
        <div class="react-datepicker__day react-datepicker__day--008" tabindex="-1" aria-label="Choose Wednesday, June 8th, 2022" role="option" aria-disabled="false">8</div>
        <div class="react-datepicker__day react-datepicker__day--009" tabindex="-1" aria-label="Choose Thursday, June 9th, 2022" role="option" aria-disabled="false">9</div>
        <div class="react-datepicker__day react-datepicker__day--010" tabindex="-1" aria-label="Choose Friday, June 10th, 2022" role="option" aria-disabled="false">10</div>
        <div class="react-datepicker__day react-datepicker__day--011 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Saturday, June 11th, 2022" role="option" aria-disabled="false">11</div>
    </div>
    <div class="react-datepicker__week">
        <div class="react-datepicker__day react-datepicker__day--012 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Sunday, June 12th, 2022" role="option" aria-disabled="false">12</div>
        <div class="react-datepicker__day react-datepicker__day--013" tabindex="-1" aria-label="Choose Monday, June 13th, 2022" role="option" aria-disabled="false">13</div>
        <div class="react-datepicker__day react-datepicker__day--014" tabindex="-1" aria-label="Choose Tuesday, June 14th, 2022" role="option" aria-disabled="false">14</div>
        <div class="react-datepicker__day react-datepicker__day--015" tabindex="-1" aria-label="Choose Wednesday, June 15th, 2022" role="option" aria-disabled="false">15</div>
        <div class="react-datepicker__day react-datepicker__day--016" tabindex="-1" aria-label="Choose Thursday, June 16th, 2022" role="option" aria-disabled="false">16</div>
        <div class="react-datepicker__day react-datepicker__day--017" tabindex="-1" aria-label="Choose Friday, June 17th, 2022" role="option" aria-disabled="false">17</div>
        <div class="react-datepicker__day react-datepicker__day--018 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Saturday, June 18th, 2022" role="option" aria-disabled="false">18</div>
    </div>
    <div class="react-datepicker__week">
        <div class="react-datepicker__day react-datepicker__day--019 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Sunday, June 19th, 2022" role="option" aria-disabled="false">19</div>
        <div class="react-datepicker__day react-datepicker__day--020" tabindex="-1" aria-label="Choose Monday, June 20th, 2022" role="option" aria-disabled="false">20</div>
        <div class="react-datepicker__day react-datepicker__day--021" tabindex="-1" aria-label="Choose Tuesday, June 21st, 2022" role="option" aria-disabled="false">21</div>
        <div class="react-datepicker__day react-datepicker__day--022" tabindex="-1" aria-label="Choose Wednesday, June 22nd, 2022" role="option" aria-disabled="false">22</div>
        <div class="react-datepicker__day react-datepicker__day--023" tabindex="-1" aria-label="Choose Thursday, June 23rd, 2022" role="option" aria-disabled="false">23</div>
        <div class="react-datepicker__day react-datepicker__day--024" tabindex="-1" aria-label="Choose Friday, June 24th, 2022" role="option" aria-disabled="false">24</div>
        <div class="react-datepicker__day react-datepicker__day--025 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Saturday, June 25th, 2022" role="option" aria-disabled="false">25</div>
    </div>
    <div class="react-datepicker__week">
        <div class="react-datepicker__day react-datepicker__day--026 react-datepicker__day--weekend" tabindex="-1" aria-label="Choose Sunday, June 26th, 2022" role="option" aria-disabled="false">26</div>
        <div class="react-datepicker__day react-datepicker__day--027" tabindex="-1" aria-label="Choose Monday, June 27th, 2022" role="option" aria-disabled="false">27</div>
        <div class="react-datepicker__day react-datepicker__day--028" tabindex="-1" aria-label="Choose Tuesday, June 28th, 2022" role="option" aria-disabled="false">28</div>
        <div class="react-datepicker__day react-datepicker__day--029" tabindex="-1" aria-label="Choose Wednesday, June 29th, 2022" role="option" aria-disabled="false">29</div>
        <div class="react-datepicker__day react-datepicker__day--030" tabindex="-1" aria-label="Choose Thursday, June 30th, 2022" role="option" aria-disabled="false">30</div>
        <div class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Friday, July 1st, 2022" role="option" aria-disabled="false">1</div>
        <div class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--weekend react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Saturday, July 2nd, 2022" role="option" aria-disabled="false">2</div>
    </div>
    <div class="react-datepicker__week">
        <div class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--weekend react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Sunday, July 3rd, 2022" role="option" aria-disabled="false">3</div>
        <div class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Monday, July 4th, 2022" role="option" aria-disabled="false">4</div>
        <div class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Tuesday, July 5th, 2022" role="option" aria-disabled="false">5</div>
        <div class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Wednesday, July 6th, 2022" role="option" aria-disabled="false">6</div>
        <div class="react-datepicker__day react-datepicker__day--007 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Thursday, July 7th, 2022" role="option" aria-disabled="false">7</div>
        <div class="react-datepicker__day react-datepicker__day--008 react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Friday, July 8th, 2022" role="option" aria-disabled="false">8</div>
        <div class="react-datepicker__day react-datepicker__day--009 react-datepicker__day--weekend react-datepicker__day--outside-month" tabindex="-1" aria-label="Choose Saturday, July 9th, 2022" role="option" aria-disabled="false">9</div>
    </div>
</div>

2 Answers 2

0

For reading CSV, you use one of these methods: https://www.baeldung.com/java-csv-file-array

Now, given you have the data, you can

1 - Select the month by using the following CSS selector: div[aria-label="month " + YEAR + "-" + MONTH]

2 - And inside the element of the month, you can find the day with the following CSS selector: div[class^="react-datepicker__day--" + DATE]

^= indicates you want to look for a partial match in the attribute class.

0

Here is something for you to work with which you can modify as per oyur need and play around:

This is my CSV file:

enter image description here

This is my Java + Selenium code to get dates from CSV and highlight the particular element in the web page:

String line = null;
String day = null;
String month = null;
String year = null;
BufferedReader br = new BufferedReader(new FileReader("/var/www/html/1/test.csv"));
br.readLine();
while ((line = br.readLine()) != null) {
    // use comma as separator
    String[] cols = line.split(",");
    String[] split1 = cols[0].split("-");
    day = split1[0];
    month = split1[1];
    year = split1[2];
    System.out.println("Day: " + day + "\tMonth: " + month + "\tYear: " + year);
    ((JavascriptExecutor)driver).executeScript("arguments[0].style.border='3px solid red'", driver.findElement(By.xpath("//div[contains(@aria-label, '" + day + "')]")));

    String[] split2 = cols[1].split("-");
    day = split1[2];
    month = split1[1];
    year = split1[0];
    System.out.println("Day: " + day + "\tMonth: " + month + "\tYear: " + year);
    ((JavascriptExecutor)driver).executeScript("arguments[0].style.border='3px solid red'", driver.findElement(By.xpath("//div[contains(@aria-label, '" + day + "')]")));
}

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="react-datepicker__month" role="listbox" aria-label="month  2022-06">
        <div class="react-datepicker__week">
            <div class="react-datepicker__day react-datepicker__day--029 react-datepicker__day--weekend react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Sunday, May 29th, 2022" role="option" aria-disabled="false">29</div>
            <div class="react-datepicker__day react-datepicker__day--030 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Monday, May 30th, 2022" role="option" aria-disabled="false">30</div>
            <div class="react-datepicker__day react-datepicker__day--031 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Tuesday, May 31st, 2022" role="option" aria-disabled="false">31</div>
            <div class="react-datepicker__day react-datepicker__day--001" tabindex="-1"
                aria-label="Choose Wednesday, June 1st, 2022" role="option" aria-disabled="false">1</div>
            <div class="react-datepicker__day react-datepicker__day--002" tabindex="-1"
                aria-label="Choose Thursday, June 2nd, 2022" role="option" aria-disabled="false">2</div>
            <div class="react-datepicker__day react-datepicker__day--003" tabindex="-1"
                aria-label="Choose Friday, June 3rd, 2022" role="option" aria-disabled="false">3</div>
            <div class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Saturday, June 4th, 2022" role="option" aria-disabled="false">4</div>
        </div>
        <div class="react-datepicker__week">
            <div class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Sunday, June 5th, 2022" role="option" aria-disabled="false">5</div>
            <div class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--selected react-datepicker__day--today"
                tabindex="0" aria-label="Choose Monday, June 6th, 2022" role="option" aria-disabled="false">6</div>
            <div class="react-datepicker__day react-datepicker__day--007" tabindex="-1"
                aria-label="Choose Tuesday, June 7th, 2022" role="option" aria-disabled="false">7</div>
            <div class="react-datepicker__day react-datepicker__day--008" tabindex="-1"
                aria-label="Choose Wednesday, June 8th, 2022" role="option" aria-disabled="false">8</div>
            <div class="react-datepicker__day react-datepicker__day--009" tabindex="-1"
                aria-label="Choose Thursday, June 9th, 2022" role="option" aria-disabled="false">9</div>
            <div class="react-datepicker__day react-datepicker__day--010" tabindex="-1"
                aria-label="Choose Friday, June 10th, 2022" role="option" aria-disabled="false">10</div>
            <div class="react-datepicker__day react-datepicker__day--011 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Saturday, June 11th, 2022" role="option" aria-disabled="false">11</div>
        </div>
        <div class="react-datepicker__week">
            <div class="react-datepicker__day react-datepicker__day--012 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Sunday, June 12th, 2022" role="option" aria-disabled="false">12</div>
            <div class="react-datepicker__day react-datepicker__day--013" tabindex="-1"
                aria-label="Choose Monday, June 13th, 2022" role="option" aria-disabled="false">13</div>
            <div class="react-datepicker__day react-datepicker__day--014" tabindex="-1"
                aria-label="Choose Tuesday, June 14th, 2022" role="option" aria-disabled="false">14</div>
            <div class="react-datepicker__day react-datepicker__day--015" tabindex="-1"
                aria-label="Choose Wednesday, June 15th, 2022" role="option" aria-disabled="false">15</div>
            <div class="react-datepicker__day react-datepicker__day--016" tabindex="-1"
                aria-label="Choose Thursday, June 16th, 2022" role="option" aria-disabled="false">16</div>
            <div class="react-datepicker__day react-datepicker__day--017" tabindex="-1"
                aria-label="Choose Friday, June 17th, 2022" role="option" aria-disabled="false">17</div>
            <div class="react-datepicker__day react-datepicker__day--018 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Saturday, June 18th, 2022" role="option" aria-disabled="false">18</div>
        </div>
        <div class="react-datepicker__week">
            <div class="react-datepicker__day react-datepicker__day--019 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Sunday, June 19th, 2022" role="option" aria-disabled="false">19</div>
            <div class="react-datepicker__day react-datepicker__day--020" tabindex="-1"
                aria-label="Choose Monday, June 20th, 2022" role="option" aria-disabled="false">20</div>
            <div class="react-datepicker__day react-datepicker__day--021" tabindex="-1"
                aria-label="Choose Tuesday, June 21st, 2022" role="option" aria-disabled="false">21</div>
            <div class="react-datepicker__day react-datepicker__day--022" tabindex="-1"
                aria-label="Choose Wednesday, June 22nd, 2022" role="option" aria-disabled="false">22</div>
            <div class="react-datepicker__day react-datepicker__day--023" tabindex="-1"
                aria-label="Choose Thursday, June 23rd, 2022" role="option" aria-disabled="false">23</div>
            <div class="react-datepicker__day react-datepicker__day--024" tabindex="-1"
                aria-label="Choose Friday, June 24th, 2022" role="option" aria-disabled="false">24</div>
            <div class="react-datepicker__day react-datepicker__day--025 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Saturday, June 25th, 2022" role="option" aria-disabled="false">25</div>
        </div>
        <div class="react-datepicker__week">
            <div class="react-datepicker__day react-datepicker__day--026 react-datepicker__day--weekend" tabindex="-1"
                aria-label="Choose Sunday, June 26th, 2022" role="option" aria-disabled="false">26</div>
            <div class="react-datepicker__day react-datepicker__day--027" tabindex="-1"
                aria-label="Choose Monday, June 27th, 2022" role="option" aria-disabled="false">27</div>
            <div class="react-datepicker__day react-datepicker__day--028" tabindex="-1"
                aria-label="Choose Tuesday, June 28th, 2022" role="option" aria-disabled="false">28</div>
            <div class="react-datepicker__day react-datepicker__day--029" tabindex="-1"
                aria-label="Choose Wednesday, June 29th, 2022" role="option" aria-disabled="false">29</div>
            <div class="react-datepicker__day react-datepicker__day--030" tabindex="-1"
                aria-label="Choose Thursday, June 30th, 2022" role="option" aria-disabled="false">30</div>
            <div class="react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Friday, July 1st, 2022" role="option" aria-disabled="false">1</div>
            <div class="react-datepicker__day react-datepicker__day--002 react-datepicker__day--weekend react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Saturday, July 2nd, 2022" role="option" aria-disabled="false">2</div>
        </div>
        <div class="react-datepicker__week">
            <div class="react-datepicker__day react-datepicker__day--003 react-datepicker__day--weekend react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Sunday, July 3rd, 2022" role="option" aria-disabled="false">3</div>
            <div class="react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Monday, July 4th, 2022" role="option" aria-disabled="false">4</div>
            <div class="react-datepicker__day react-datepicker__day--005 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Tuesday, July 5th, 2022" role="option" aria-disabled="false">5</div>
            <div class="react-datepicker__day react-datepicker__day--006 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Wednesday, July 6th, 2022" role="option" aria-disabled="false">6</div>
            <div class="react-datepicker__day react-datepicker__day--007 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Thursday, July 7th, 2022" role="option" aria-disabled="false">7</div>
            <div class="react-datepicker__day react-datepicker__day--008 react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Friday, July 8th, 2022" role="option" aria-disabled="false">8</div>
            <div class="react-datepicker__day react-datepicker__day--009 react-datepicker__day--weekend react-datepicker__day--outside-month"
                tabindex="-1" aria-label="Choose Saturday, July 9th, 2022" role="option" aria-disabled="false">9</div>
        </div>
    </div>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.