如何使用RSelenium处理旅行网站日历弹窗并选择入住退房日期

原有代码直接修改DOM元素value属性的方式无效，因为Booking的日期选择组件为受控组件，手动修改属性无法触发组件内部的事件绑定，会导致后续提交时日期不生效。

实现步骤 #

• 第一步：触发日历弹窗
  首先点击日期输入区域，呼出日历弹窗，等待弹窗元素加载完成
• 第二步：定位目标日期
  Booking日历中的所有可选择日期都带有data-date属性，属性值为YYYY-MM-DD格式的标准日期，直接通过该属性定位目标日期最稳定，不受页面语言、显示格式影响
• 第三步：依次点击入住、退房日期
  先点击入住日期，等待组件状态更新后再点击退房日期即可完成选择

完整可运行代码 #

library(RSelenium)
library(dplyr)

# 启动浏览器，注意chromever参数替换为你本地Chrome浏览器对应的版本
remDr = rsDriver(port= sample(100:9999, 1), chromever = "93.0.4577.63")
remDr <- remDr[["client"]]
# 隐式等待设置，避免元素未加载报错
remDr$setTimeout(type = "implicit", milliseconds = 5000)
remDr$navigate("https://www.booking.com/")

# 1. 点击日期输入框呼出日历
date_input <- remDr$findElement(using = 'css selector', '.sb-date-field__display')
date_input$clickElement()

# 2. 定义目标入住、退房日期，格式为YYYY-MM-DD
checkin_date <- "2023-10-18"
checkout_date <- "2023-10-25"

# 可选：如果目标日期不在当前显示的月份，点击下一月按钮切换，示例切换1次
# next_month_btn <- remDr$findElement(using = 'css selector', '.bui-calendar__control--next')
# next_month_btn$clickElement()
# Sys.sleep(1) # 等待日历切换完成

# 3. 选择入住日期
checkin_elem <- remDr$findElement(using = 'css selector', paste0('[data-date="', checkin_date, '"]'))
checkin_elem$clickElement()
Sys.sleep(0.5) # 等待组件状态更新

# 4. 选择退房日期
checkout_elem <- remDr$findElement(using = 'css selector', paste0('[data-date="', checkout_date, '"]'))
checkout_elem$clickElement()

注意事项 #

• 若运行时提示找不到日期元素，先确认目标日期是否在当前日历显示的两个月份范围内，若不在可多次点击下个月按钮切换到对应月份再选择
• chromever参数必须和你本地安装的Chrome浏览器大版本一致，否则会启动失败，可前往Chrome设置-关于Chrome查看当前版本，再下载对应版本的chromedriver
• 可根据网络情况适当调整等待时间，避免元素未加载完成就执行操作

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