CODEWITHSUNDEEP
javascriptselenium-webdrivercucumberwebdriver-io
Gintars Lazda
Gintars Lazda

Reputation: 91

How to set datepicker using webdriverIO?

I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar,enter image description here but I don't know how to select dates.

Here is my code Cucumber step 

    And user selects dates from "2020-06-16" to "2020-06-26"

BookingStep 

When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug();  });

Booking page

class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')};  }export default new BookingPage();

Upvotes: 1

Views: 5589

Answers (1)

bitShredder
bitShredder

Reputation: 142

Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.

I battled this for a while and came up with a solution that works for me, I hope it works for you also.

First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[@id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID

$('//*[@id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[@id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');

Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink

Now you run this code:

browser.execute(() => document.querySelector('#cancelLink').click());

Which will then close the datepicker object so that you can proceed with your testing.

Here is my actual code:

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 helps out =)

Upvotes: 1

Related Questions