如何用XPath定位指定标签后的下拉框所在Div？

我有10个结构完全一致但id、name等动态属性各不相同的表单，无法通过这类属性定位元素。需求是找到包含文本“Title”的标签，再选中它后方带有下拉框的div。

我之前尝试的XPath如下：

//span[text()='Title']/following-sibling::div[@class='col-xs-12 form-field input_controls ']

对应的HTML结构： #

<div class="form-group is-required sc-row sc-row-12">
    <div id="label_IO:d027ec571b332450c82599361a4bcbb2" class="" nowrap="true" type="18" oncontextmenu="return contextQuestionLabel(event, 'd027ec571b332450c82599361a4bcbb2', '18');">
        <label for="IO:d027ec571b332450c82599361a4bcbb2" class="col-xs-12 control-label">
            <span id="status.IO:d027ec571b332450c82599361a4bcbb2" title="Mandatory - must be populated before Submit" mandatory="true" oclass="" class=" required-marker" data-original-title="Mandatory - must be populated before Submit">&nbsp;</span>
            <img src="images/s.gifx" style="width:1px; margin-right:0px; margin-left:0px" id="section508.IO:d027ec571b332450c82599361a4bcbb2" alt="Mandatory - must be populated before Submit" title="Mandatory - must be populated before Submit" data-original-title="Mandatory - must be populated before Submit">
            <span class="sn-tooltip-basic " data-toggle="tooltip" data-placement="auto" title="Title" data-original-title="Title">Title</span>
        </label>
    </div>
    <div class="col-xs-12 form-field input_controls ">
        <select name="IO:d027ec571b332450c82599361a4bcbb2" id="IO:d027ec571b332450c82599361a4bcbb2" class="form-control cat_item_option " onchange="if (typeof(variableOnChange) == 'function') variableOnChange('IO:d027ec571b332450c82599361a4bcbb2')">
            <option value="" selected="SELECTED" role="option">-- None --</option>
            <option value="b30330019f22120047a2d126c42e70ff" role="option">Chief Executive Officer</option>
            <option value="f30330019f22120047a2d126c42e70ff" role="option">Chief Financial Officer</option>
            <!-- 其他选项省略 -->
        </select>
        <input type="HIDDEN" class="cat_item_option" name="sys_original.IO:d027ec571b332450c82599361a4bcbb2" id="sys_original.IO:d027ec571b332450c82599361a4bcbb2" value="">
    </div>
</div>

问题分析与解决方案 #

之前的XPath无效的核心原因：包含“Title”的span的同级元素是img和其他span，而目标div是span所在父div的兄弟节点，不是span的兄弟节点，所以following-sibling无法匹配到目标元素。

推荐两种可行的XPath写法：

1. 通过共同父容器定位（更稳定）
   先找到包含“Title”的span，向上追溯到最外层的表单组容器，再选择其中的下拉框容器div：

//span[text()='Title']/ancestor::div[contains(@class, 'form-group')]//div[@class='col-xs-12 form-field input_controls ']

如果需要更精准匹配父容器，也可以使用完整的class属性：

//span[text()='Title']/ancestor::div[@class='form-group is-required sc-row sc-row-12']//div[@class='col-xs-12 form-field input_controls ']

2. 层级跳转定位
   从span向上遍历到它所在的父div，再找该div的兄弟节点：

//span[text()='Title']/../../../../following-sibling::div[@class='col-xs-12 form-field input_controls ']

这种写法依赖固定的DOM层级，若页面结构调整可能失效，不如第一种通用。

内容的提问来源于stack exchange，提问作者HH-Dev