Karate UI测试：日历拖拽选择日期范围失败，求解决方案

针对你遇到的日历组件选择问题，以下是几个经过验证的可行方案，适配目标网站的自定义日历逻辑：

方案1：直接操作隐藏日期输入框 #

很多自定义日历会绑定隐藏的input元素用于存储日期值，直接修改这些输入框并触发变更事件即可绕过复杂的交互：

Scenario: Set date range via hidden inputs
Given driver 'https://automationintesting.online/'
And click("//button[text()='Book this room']")
And input("//input[@name='firstname']", "John")
And input("//input[@name='lastname']", "Doe")
And input("//input[@name='email']", "john@email.com")
And input("//input[@name='phone']", "00123456789")
And click("//button[text()='Next']")
# 设置入住、退房日期（格式需与组件要求一致）
* script("document.querySelector('input[name=\"checkin\"]').value = '2024-05-04'")
* script("document.querySelector('input[name=\"checkout\"]').value = '2024-05-05'")
# 触发变更事件，让日历组件同步状态
* script("document.querySelector('input[name=\"checkin\"]').dispatchEvent(new Event('change'))")
* script("document.querySelector('input[name=\"checkout\"]').dispatchEvent(new Event('change'))")
Then click("//button[text()='Book']")

方案2：改进鼠标拖拽操作（加入等待） #

目标日历的拖拽逻辑需要感知鼠标的持续按下状态，之前的快速操作组件可能未捕捉到，拆分操作并加入短暂等待即可：

Scenario: Calendar drag&drop with waits
Given driver 'https://automationintesting.online/'
And click("//button[text()='Book this room']")
And input("//input[@name='firstname']", "John")
And input("//input[@name='lastname']", "Doe")
And input("//input[@name='email']", "john@email.com")
And input("//input[@name='phone']", "00123456789")
And click("//button[text()='Next']")
# 等待日历完全加载
* waitFor("//button[text()='04']")
# 移动到开始日期并按下鼠标
* mouse().move("//button[text()='04']").down()
# 等待100ms确保组件识别按下状态
* wait(0.1)
# 移动到结束日期
* mouse().move("//button[text()='05']")
# 再等待100ms让组件处理拖拽状态
* wait(0.1)
# 松开鼠标完成选择
* mouse().up()
Then click("//button[text()='Book']")

方案3：模拟点击选择日期范围 #

部分日历支持点击开始日期后，再点击结束日期完成范围选择，无需拖拽：

Scenario: Select date range via click
Given driver 'https://automationintesting.online/'
And click("//button[text()='Book this room']")
And input("//input[@name='firstname']", "John")
And input("//input[@name='lastname']", "Doe")
And input("//input[@name='email']", "john@email.com")
And input("//input[@name='phone']", "00123456789")
And click("//button[text()='Next']")
* waitFor("//button[text()='04']")
# 点击选择开始日期
And click("//button[text()='04']")
# 点击选择结束日期
And click("//button[text()='05']")
Then click("//button[text()='Book']")

失败原因说明 #

你之前尝试的方法无效，是因为目标日历采用自定义拖拽逻辑，并非标准HTML5的dragstart/drop事件，直接触发原生事件无法触发组件内部的处理函数；而快速的鼠标操作因为组件的响应延迟，未被正确捕捉。

内容的提问来源于stack exchange，提问作者pixi_edward