如何根据关联文本选择同name属性的复选框？

不修改原有DOM的可选定位方式 #

纯CSS选择器本身不支持根据元素关联的文本内容反向匹配内部子节点，结合当前两个复选框属性完全一致、仅关联文本不同的场景，优先选择支持文本匹配的定位语法即可实现无索引、高稳定性的定位，绝大多数前端测试、元素定位场景都对这类语法有原生支持：

• 关联文本为「Name1」的复选框XPath定位语法：
  //label[normalize-space(.)="Name1"]/input[@type="checkbox"]
  语法逻辑是先匹配去掉首尾空白后、文本内容完全等于「Name1」的label节点，再选取节点内部的复选框input，完全不依赖元素索引，也不需要匹配两个复选框重复的同名属性。
• 关联文本为「Name2」的复选框，只需要将上述语法中的文本值替换为「Name2」即可。

如果使用Playwright这类现代自动化测试框架，还可以直接利用label与表单元素的原生关联关系实现更简洁的定位：

• 定位「Name1」对应的复选框：getByLabel("Name1")
• 定位「Name2」对应的复选框：getByLabel("Name2")

必须使用纯CSS定位的实现思路 #

如果场景要求只能用原生CSS选择器完成定位，只需要对原有DOM做极小幅的结构调整，不需要改动原有页面样式：
给每个label节点补充对应关联文本的自定义特征标记，调整后的DOM结构示例：

<label data-option-text="Name1">
  <input class="some class name" name="checkOptions" type="checkbox">Name1
</label>

<label data-option-text="Name2">
  <input class="some class name" name="checkOptions" type="checkbox">Name2
</label>

对应的纯CSS选择器就可以直接精准匹配目标元素：

• 定位「Name1」对应的复选框：label[data-option-text="Name1"] input[type="checkbox"]
• 定位「Name2」对应的复选框：label[data-option-text="Name2"] input[type="checkbox"]

避坑提示 #

• 不要使用nth-child、nth-of-type这类基于索引的选择器，后续页面DOM结构调整时很容易出现定位错位
• 不要依赖两个复选框重复的class、name、type属性做匹配，这类属性相同的情况下会同时命中两个元素，无法实现单元素定位

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