如何用CSS Selector定位Booking.com日历组件的下月切换箭头

以下是几个不易随网站更新失效的定位思路，适配你的POM框架场景：

• 利用无障碍属性定位
  多数正规网站会保留aria-label这类无障碍属性用于辅助功能，这类属性很少随版本变更。下月箭头按钮通常带有类似“下个月”或“Next month”的描述，直接用这个属性匹配：

  button[aria-label*='下个月']
  

  英文界面可替换为：

  button[aria-label*='Next month']
  

• 结合父容器层级定位
  找到日历头部这类相对稳定的父容器（比如包含Calendar-module__header类名的容器，核心模块类名不会频繁修改），再定位容器内的最后一个按钮（下月箭头通常在头部右侧）：

  div[class*='Calendar-module__header'] button:last-of-type
  

• 基于图标特征定位
  下月箭头本质是向右的图标，其SVG路径几乎不会变更。常见的向右箭头SVG路径可这样定位：

  button svg[viewBox='0 0 24 24'] path[d*='M9 18l6-6-6-6']
  

对应的Java代码示例：

// 方式1：用aria-label定位
WebElement nextMonthBtn = driver.findElement(By.cssSelector("button[aria-label*='下个月']"));

// 方式2：结合父容器定位
WebElement nextMonthBtn = driver.findElement(By.cssSelector("div[class*='Calendar-module__header'] button:last-of-type"));

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