Selenium中如何通过标签名使用CSS选择器定位指定输入文本框

嘿，我太懂这种“明明XPath能搞定却被要求用CSS”的憋屈了！针对你给出的HTML结构，咱们可以通过关联唯一的label文本来定位对应的输入框，完全符合CSS选择器的要求，具体方案如下：

优先推荐：利用:contains()伪类（适配多数自动化测试/前端场景） #

你的每个输入框都对应一个唯一文本的<label>，而且包含input的<div>刚好是这个label的下一个同级兄弟元素——这就给了我们用CSS关联定位的机会：

比如定位第一个输入框的CSS选择器：

label:contains("1st label Name") + div > input

拆解说明： #

• label:contains("1st label Name")：匹配文本包含目标标签名的label元素（如果你的标签文本是完全唯一的，这个精准度足够；部分工具还支持更严格的文本匹配，但这个是最通用的）
• + div：选中这个label的紧邻下一个同级div元素（就是包裹input的那个div）
• > input：选中这个div下的直接子元素input，就是你要找的目标输入框

你只需要把contains()里的文本替换成对应标签的内容，就能定位到9个不同的输入框，比如第二个输入框就用：

label:contains("2nd label Name") + div > input

备用方案：纯标准CSS（不依赖:contains()） #

如果你的场景严格遵循CSS标准（不支持:contains()这个非标准伪类），可以通过元素的位置关系来定位，比如利用:nth-child()选择器：

/* 定位第一个输入框，假设它是外层div下的第1组label+input结构 */
div:nth-child(2) > label:nth-child(1) + div > input

不过这种方法依赖页面结构的固定顺序，不如文本匹配稳定，所以优先用第一种方案。

补充：如果是用Selenium这类自动化测试工具，:contains()在Chrome、Firefox等主流浏览器驱动里都是支持的，放心用就行。

内容的提问来源于stack exchange，提问作者Savitha B.S