如何使用 webdriverIO 设置日期选择器？答案

【问题标题】：How to set datepicker using webdriverIO?如何使用 webdriverIO 设置日期选择器？
【发布时间】：2020-05-28 07:46:22
【问题描述】：

我有一项任务需要自动化 booking.com 页面，其中一项任务是选择入住和退房日期。我怎么能做到这一点？我自动化了，我可以打开日历，，但我不知道如何选择日期。

这是我的代码 黄瓜步

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

预订步骤

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

【问题讨论】：

你能检查日期吗？
是的，我可以检查日期
尝试点击日期并生成动态 xpath。因此，您可以将日期作为参数传递并单击任何日期
我可以在没有 xpath 的情况下做到这一点吗？只使用 css？

标签： javascript selenium-webdriver cucumber webdriver-io

【解决方案1】：

注意：我的答案是在日期字段中设置值的能力的解决方案，并且只与日期选择器对象上的取消链接交互。

我为此奋斗了一段时间，想出了一个适合我的解决方案，我希望它也适合你。

首先，当我检查 datepicker 对象时，它会生成一个随机 XPATH/CSS 选择器。因此，如果您检查并复制选择器并尝试在下一次测试中使用它，它将失败，因为 xpath/选择器是随机生成的。我通过识别位于 datepicker 元素上方的唯一 css ID 来解决此问题，并将其用作我的起点。然后我查看了从该点到 datepicker 输入标记的 html 路径，并附加了该路径。这解决了无法在日期选择器文本字段中设置值的第一个问题。下面是一个使用 xpath 的示例：
//*[@id="filtersSideBar"] - 这是在日期选择器上方找到的唯一 ID
/div[2]/div/input - 这是从唯一 ID 到日期选择器的路径

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

现在您在日期选择器字段中有一个日期，您必须关闭日期选择器对象。我不得不使用 Javascript 来实现这一点。首先打开 datepicker 对象，然后检查“取消”链接元素。复制 CSS 选择器 ID。假设它最终成为#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();

我希望这会有所帮助 =)

【讨论】：