If you are struggling to interact with the date field and the cancel link on a date picker object, I've found a solution that may work for you.
After facing this issue myself, I discovered that the randomly generated XPATH/CSS Selector for the datepicker object was causing tests to fail. To overcome this, I identified a unique css ID above the datepicker element and used it as a reference point. I then traced the HTML path from that ID to the datepicker input tag and appended it to effectively set a value in the date picker text field.
Now, to close the datepicker object, you can use JavaScript. Simply inspect the 'Cancel' link element, copy the CSS Selector ID (e.g., #cancelLink), and run the code snippet below:
browser.execute(() => document.querySelector('#cancelLink').click());
With these steps, you should be able to handle the date picker field and the cancel link successfully. Feel free to use the code snippet below as a reference:
class DataSearchSortAndDateRangePage {
get startDate() {
return $('//*[@id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input');
}
setStartDate(date) {
this.startDate.waitForClickable({ timeout: browser.config.timeOutValue });
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this explanation and code snippet prove helpful to you! =)