Как установить datepicker с помощью webdriverIO? - PullRequest
Новая
       27

Как установить datepicker с помощью webdriverIO?

0 голосов
/ 28 мая 2020

У меня есть задача, в которой мне нужно автоматизировать страницу booking.com, и одна из задач - выбрать даты заезда и выезда. Как я могу это сделать? Я автоматизировал, что могу открыть календарь enter image description here, но я не знаю, как выбирать даты.

Вот мой код Шаг огурца 

    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();  });

Страница бронирования 

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

1 Ответ

0 голосов
/ 30 июня 2020

Примечание. Мой ответ - решение для возможности устанавливать значение в поле даты и взаимодействовать только со ссылкой отмены в объекте выбора даты.

Я боролся с этим некоторое время и подошел с решением, которое работает для меня, надеюсь, оно сработает и для вас.

Сначала, когда я проверяю объект datepicker, он генерирует случайный XPATH / CSS Selector. В результате, если вы проверите и скопируете селектор и попытаетесь использовать его в следующем тесте, он потерпит неудачу, поскольку xpath / селектор генерируется случайным образом. Я обошел эту проблему, определив уникальный css ID, который находился над элементом datepicker, и использовал его в качестве отправной точки. Затем я посмотрел на путь html от этой точки до тега ввода datepicker и добавил этот путь. Это решило первую проблему: невозможно установить значение в текстовом поле выбора даты. Вот пример использования xpath:
// * [@ id = "filtersSideBar"] - это уникальный идентификатор, находящийся над датпикером
/ div [2] / div / input - это путь к средство выбора даты с уникальным идентификатором 

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

Теперь, когда у вас есть дата внутри поля выбора даты, вы должны закрыть объект выбора даты. Мне пришлось использовать Javascript, чтобы достичь sh этого. Сначала откройте объект datepicker, затем проверьте элемент ссылки «Отмена». Скопируйте идентификатор селектора CSS. Допустим, это заканчивается # cancelLink

Теперь вы запускаете этот код: 

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

, который затем закроет объект datepicker, чтобы вы могли продолжить тестирование.

Вот мой код: 

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();

Надеюсь, это поможет =)

...