Selenium 定位包含指定class子div的外层div元素方法

问题场景 #

• 页面存在多个类名为ProductVariants__VariantCard-sc-1unev4j-3 bEuNss的div元素
• 页面动态渲染时，仅1个上述div内部，会嵌套类名为ProductVariants__RadioButtonInner-sc-1unev4j-6 fgFqYM的子div（代表当前选中的规格选项）
• 需求：定位到包含该选中子元素的外层VariantCard容器div

对应的DOM结构示例：

<div class="ProductVariants__VariantCard-sc-1unev4j-3 bEuNss">
   <div class="ProductVariants__RadioButtonContainer-sc-1unev4j-4 jqJIBg">
     <div class="ProductVariants__RadioButtonOuter-sc-1unev4j-5 jcgpFW">
       <div class="ProductVariants__RadioButtonInner-sc-1unev4j-6 fgFqYM">
       </div>
     </div>
   </div>
   <div class="ProductVariants__VariantDetailsContainer-sc-1unev4j-7 fvkqJd">
     <p class="ProductVariants__VariantUnitText-sc-1unev4j-8 bZvIga">50 g</p>
     <div class="ProductVariants__PriceContainer-sc-1unev4j-9 jjiIua">
       ₹111 
       <span class="ProductVariants__MRPText-sc-1unev4j-10 jEinXG">
         ₹345
       </span>
     </div>
   </div>
</div>

原有写法的问题 #

之前使用的定位代码：

driver.find_element(by=By.XPATH, value="//div[contains(@class,'ProductVariants__VariantCard-sc-1unev4j-3 bEuNss')]//div[contains(@class, 'ProductVariants__RadioButtonInner-sc-1unev4j-6 fgFqYM')]")

返回内层元素的原因很直接：XPath路径的最后一级匹配的是ProductVariants__RadioButtonInner-sc-1unev4j-6 fgFqYM对应的div，所以最终返回的元素就是这个内层div，而非外层的VariantCard容器。

正确定位代码 #

把对子元素的判断放到外层元素的筛选条件（XPath谓词）中即可，最终代码：

driver.find_element(
    by=By.XPATH,
    value="//div[contains(@class,'ProductVariants__VariantCard-sc-1unev4j-3 bEuNss') and .//div[contains(@class, 'ProductVariants__RadioButtonInner-sc-1unev4j-6 fgFqYM')]]"
)

逻辑说明 #

• 方括号内是筛选条件，只有满足所有条件的div才会被匹配
• 条件里的.指代当前正在匹配的VariantCard节点，.//div[xxx]表示从当前节点往下的所有后代节点中，查找符合类名要求的内层div
• 整个筛选逻辑会过滤出：类名符合VariantCard规则，且后代中存在选中状态单选按钮内层div的元素，也就是你需要的外层容器

这种写法是XPath中查找「包含指定后代元素的父节点」的通用写法，不需要额外写parent::逐层向上查找，性能和可读性都更好。

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