Selenium处理携程日期组件的方法

在Web自动化测试学习中本准备用携程网来尝试一下火车票订购的功能，但是在火车票查询页面的日期控件上却犯了难。

通过检查元素我们可以发现，其日期控件本身是一个input元素，因此我们首先尝试对其进行send_keys()，但是我们很快就会得到element not interactable的提示，告诉我们该元素不可交互。

通过网页查找，又找到了readonly属性的处理方式，但是我们很快就发现该input没有readonly属性，进而找到了这篇2023年的帖子 selenium 处理携程日历控件，通过sendkeys 和 js 都无法修改日期，求指教~
文中，作者尝试了send_keys()、readonly和JavaScript，最终都没有解决问题。

事实上，这位前辈忽略了关键的问题，就是日期控件无法被交互是由于input元素被隐藏导致的，在日期控件的style中我们可以发现

日期控件的input输入框被隐藏了，进而导致无法被交互。
因此，解决方案就非常简单了，就是将display属性改为block就可以了。
于是我们得到以下代码：

# 使用 JavaScript 添加样式规则
'''
使用 JavaScript 创建新的 <style> 元素并添加样式规则，而不是直接修改已有的 display 属性，有几个原因：
1.优先级：通过添加 !important，可以确保新样式的优先级高于任何现有样式。这对于确保元素显示特别重要，尤其是当其他 CSS 规则可能覆盖它时。
2.对多个元素的影响：一次性修改多个元素的样式更方便。通过创建样式规则，可以同时针对多个类名
                （如 .assist-block-dom, .assist-flex-dom, .assist-ib-dom）应用相同的样式。
3.代码清晰性：将样式集中在一个地方使得代码更易于维护和理解。未来如果需要修改样式，只需调整这段代码即可，而不必逐个修改每个元素的属性。
4.避免内联样式的冲突：直接修改现有元素的内联样式可能会导致其他 JavaScript 操作或 CSS 样式发生冲突。通过创建新的样式规则，能够更好地管理样式的应用。
5.直接通过 JavaScript 设置 display 属性为 block !important 是不可能的，因为 JavaScript 的 style 属性不支持 !important。
'''

js_code = """
var styles = '.assist-block-dom, .assist-flex-dom, .assist-ib-dom { display: block !important; }';
var styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
"""
driver.execute_script(js_code)
datePicker.send_keys(Keys.CONTROL, 'a')
datePicker.send_keys(Keys.DELETE)
datePicker.send_keys(f"{date}")		# date为日期，格式遵照YYYY-MM-DD

在输入日期时，需要先将原本的内容删除再写入，如果直接修改value值，会导致实际日期没有被修改的问题。同样的，在处理出发站和目的站上也是采用先删除原有内容再写入新的值的方法。

在修改过后，日期控件本身的input输入框就会显示出来，我们也就可以输入我们想要的日期了~

到目前为止，问题还没有完全解决，在调出input输入框后，页面会覆盖一层遮蔽罩，导致搜索按钮的点击出现问题：selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element <button class="btn-blue btn-search">...</button> is not clickable at point (1496, 321). Other element would receive the click: <div class="widget-city-mask" data-ubt-key="widget-city-mask"></div>
我们需要通过JavaScript实现点击效果：

searchBtn = driver.find_element(By.XPATH, "//*[text()='搜索']")
driver.execute_script("arguments[0].click();", searchBtn)

至此问题解决，希望这个解决方案可以帮到您，也希望遇到同样问题的小伙伴可以有新的解决思路分享在评论区~

侵权必删声明
本资料部分内容来源于互联网及公开渠道，仅供学习和交流使用，版权归原作者所有。若涉及版权问题，敬请原作者联系我，我将立即处理或删除相关内容。感谢您的理解与支持。