0

Steps: I am trying to click on the Calendar and select the Date from the Calendar and also select year and month but it just clicks once in the next button after opening the calendar and leads to element click intercept Exception

Added : wait for element clickable, tried with jscript, action class but not working

   public void selectStartDateandEndDatefromCalender(String buttonXpath,  String
        selectmonth, String selectYear,String selectDay) {
    elementInteraction.onClick(By.xpath(buttonXpath));

    String monthyear = driver.findElement(By.xpath("//div[contains(@class,'p-datepicker-header')]")).getText();
    String[] monthYearParts = monthyear.split(" ");
    String month = "";
    String year = "";
    String day = "";
    if (monthYearParts.length >= 2) {
        month = monthYearParts[0];
        year = monthYearParts[1];
    } else {
        // Log an error or handle the situation when the split does not return an array with at least two elements.
    }
    int attempt=0;
    int maxattemp =2;
    while (!(month.equals(selectmonth) && year.equals(selectYear))) {
        WebDriverWait wait = new WebDriverWait(driver, 50);
        wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//span[contains(@class,'p-datepicker-next-icon')]")));
        driver.findElement(By.xpath("//span[contains(@class,'p-datepicker-next-icon')]")).click();
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[contains(@class,'p-datepicker-header')]")));
        monthyear = driver.findElement(By.xpath("//div[contains(@class,'p-datepicker-header')]")).getText();

        month = monthyear.split(" ")[0];
        year = monthyear.split(" ")[1];
        attempt++;
        break;
    }
    //click day
    //String xpathText = "//span[normalize-space()=\'"+ selectDay  +"\']";
    String xpathText = "//span[normalize-space()=\'" + selectDay + "\']";
    driver.findElement(By.xpath(xpathText)).click();
}

And then I call the above method in another method as I read the dates from the feature file:

     Public void selectDate()
{
    

    selectStartDateandEndDatefromCalender(ToDateCalenderbutton,formEntryMap.get("From 

    Date").split("/")[0],formEntryMap.get("From Date").split("/")[1],formEntryMap.get("From 
   
   Date").split("/")[2]);
}

Can some provide a solution for this.

Adding after i remove the break in the while loop it keeps clicking on the next button .

So there are 2 issues i see here: 1)If the Break is removed it keeps clicking on the next button and does not select the Date 2)Second when the From and To Date is selected ... then it leads to element intercept exception again this exception occurs if the Break is there in the while loop

HTML:

<button type="button" pbutton="" pripple="" tabindex="0" class="p-element p-ripple p-datepicker-trigger ng-tns-c75-30 p-button p-component p-button-
icon-only ng-star-inserted">
    <span class="p-button-icon pi pi-calendar" aria-hidden="true"</span>
<span aria-hidden="true" class="p-button-label">&nbsp;</span>
</button>
<button type="button" pripple="" class="p-ripple p-element p-datepicker-next p-link ng-tns-c75-30" style="display: inline-flex;">
    <span class="p-datepicker-next-icon pi pi-chevron-right ng-tns-c75-30"/>
</button>
<div class="p-datepicker-header ng-tns-c75-8">
    <button type="button" pripple="" class="p-ripple p-element p-datepicker-prev p-link ng-tns-c75-8 ng-star-inserted">
        <span class="p-datepicker-prev-icon pi pi-chevron-left ng-tns-c75-8"/>
    </button>
    <!---->
    <div class="p-datepicker-title ng-tns-c75-8">
        <button type="button" class="p-datepicker-month p-link ng-tns-c75-8 ng-star-inserted"> May </button>
        <!---->
        <button type="button" class="p-datepicker-year p-link ng-tns-c75-8 ng-star-inserted"> 2023 </button>

        <table class="p-datepicker-calendar ng-tns-c75-8">
            <thead class="ng-tns-c75-8">
                <tr class="ng-tns-c75-8">
                    <!---->
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Su</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Mo</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Tu</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">We</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Th</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Fr</span>
                    </th>
                    <th scope="col" class="ng-tns-c75-8 ng-star-inserted">
                        <span class="ng-tns-c75-8">Sa</span>
                    </th>
                    <!---->
                </tr>
            </thead>
            <tbody class="ng-tns-c75-8">
                <tr class="ng-tns-c75-8-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">30<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">1<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">2<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">3<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripplep-element ng-tns-c75-8 ng-star-inserted">4<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">5<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">6<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">7<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">8<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">9<!---->
                            <!---->
                            <!---->
                        </span>
                        <!----><!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-today ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted" tabindex="0">10<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">11<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">12<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">13<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">14<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">15<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">16<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">17<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">18<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">19<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">20<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">21<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">22<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">23<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">24<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">25<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">26<!----><!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">27<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <tr class="ng-tns-c75-8 ng-star-inserted">
                    <!---->
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">28<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">29<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">30<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 ng-star-inserted">31<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">1<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">2<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <td class="ng-tns-c75-8 p-datepicker-other-month ng-star-inserted">
                        <span draggable="false" pripple="" class="p-ripple p-element ng-tns-c75-8 p-disabled ng-star-inserted">3<!---->
                            <!---->
                            <!---->
                        </span>
                        <!---->
                        <!---->
                    </td>
                    <!---->
                </tr>
                <!---->
            </tbody>
        </table>
10
  • An element click interception exception usually means that there is something else appearing over the element you are trying to click. Could you please update your question with the HTML you are trying to work with and if possible a screenshot of the state of the system at the time of the exception.
    – Kate Paulk
    May 9, 2023 at 12:14
  • @KatePaulk - there are multiple issues as i have updated the issues here and also added some html for reference pls let me know if any other inputs are required
    – user56056
    May 9, 2023 at 12:49
  • I have a couple of questions here: first, is it essential that you use the date picker calendar? Is there a text box alternative you can use? I ask because calendar fields can be very finicky to work with as you are discovering. Second, if you manually enter the dates, does the html change in a way you could use such as setting a value attribute? Sometimes it's better to find a way around the problem than to solve it.
    – Kate Paulk
    May 9, 2023 at 21:07
  • @KatePaulk - Date field has no option to enter the Date and need to click on calender to select the date and when i select the date - i see that html dom changes :p-element p-inputwrapper ng-tns-c75-32 ng-valid ng-star-inserted ng-touched ng-dirty p-inputwrapper-filled and before selecting the date:p-element p-inputwrapper ng-tns-c75-32 ng-valid ng-star-inserted ng-touched ng-dirty.going by this can you give a answer
    – user56056
    May 10, 2023 at 3:17
  • Can you give the link for the web-page or the calendar plugin? I've recently worked with a very stubborn calendar which was customised such that every element was duplicated and have recently managed to automate it. So If I can get the link may be i can give your calendar a try as well. May 10, 2023 at 3:37

1 Answer 1

0

As per the information you provided this is what I understand,

  • The user needs to select a date from a calendar popup in a web application.
  • The user clicks on the date field, which triggers the calendar to appear as a datepicker.
  • The user needs to select a specific date, which might not be in the current month displayed on the calendar.
  • To select the desired date, the user clicks the next button until they reach the desired month, and then clicks the corresponding day on the calendar.

However, there seems to be an issue with the loop that is responsible for clicking the next button. The loop is not working as expected, which is causing problems in the date selection process.

Here is a piece of code that can help you:

public class datePicker {

    public static void main(String[] args) {
        try {
            ChromeOptions ops = new ChromeOptions();
            ops.addArguments("--remote-allow-origins=*");
            WebDriver driver = new ChromeDriver(ops);
            driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
            WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
            driver.get("https://uxsolutions.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox");
            driver.manage().window().maximize();
            Thread.sleep(2000);
            driver.findElement(By.xpath("//div[@id='sandbox-container']/input")).click();
            Thread.sleep(2000);
            while (!driver.findElement(By.xpath("//th[@class='datepicker-switch']")).getText().contentEquals("July 2023")) {
                driver.findElement(By.xpath("//th[@class='next']")).click();
                Thread.sleep(500);
            }
            driver.findElement(By.xpath("//td[@class='day' and contains(text(),'12')]")).click();

            Thread.sleep(5000);
            
            
            driver.get("https://jqueryui.com/datepicker/");
            driver.manage().window().maximize();
            Thread.sleep(2000);
            driver.switchTo().frame(0);
            driver.findElement(By.xpath("//input[@id='datepicker']")).click();
            Thread.sleep(200);
            while (!driver.findElement(By.className("ui-datepicker-month")).getText().contentEquals("July")) {
                driver.findElement(By.cssSelector("a[data-handler='next']")).click();
                Thread.sleep(500);
            }
            driver.findElement(By.xpath("//a[@data-date='12']")).click();

                Thread.sleep(5000);
                driver.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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