SeleniumIDE针对React应用如何用CSS/XPath按当前值选input元素？

问题原因 #

你遇到的问题本质是HTML属性（attribute）和DOM属性（property）的核心差异：

• CSS选择器的[value*="xxx"]、XPath的@value匹配的都是HTML标签的静态属性值，也就是页面初始加载时input标签上写的value=""，这个值默认不会随着用户上传文件、JS修改值（包括React受控组件的赋值操作）同步更新。
• 你通过.value读取到的是DOM对象的实时动态属性，存储在浏览器内存中，不会同步回HTML标签的静态属性，所以原生的选择器API无法直接匹配这个值。
• 是的，document.querySelector、document.evaluate的属性匹配规则都是基于HTML解析生成的静态属性树，只有主动调用setAttribute修改了标签属性，才能被这两个API查询到。

SeleniumIDE可用的解决方案 #

方法1：直接使用JS定位策略 #

SeleniumIDE支持直接通过JavaScript代码定位元素，你可以直接写如下定位语句：

js=document.querySelector('input[name="documents"]').value.includes('document') ? document.querySelector('input[name="documents"]') : null

方法2：修改React代码同步属性（推荐长期使用） #

如果你的项目允许修改前端代码，可以在React的受控组件逻辑中，把input的实时value同步到自定义的data属性上：

// React组件内的input写法
<input 
  name="documents"
  placeholder="Documents" 
  required
  type="file"
  value={fileValue}
  onChange={(e) => {
    // 你的原有业务逻辑
    setFileValue(e.target.value)
    // 新增同步代码
    e.target.setAttribute('data-value', e.target.value)
  }}
/>

之后你就可以用常规CSS选择器匹配了：

css=input[data-value*='document']

方法3：分步操作 #

你可以先用name属性定位到元素，再通过SeleniumIDE的断言命令判断元素的value是否符合要求，不需要强行用单个选择器同时完成定位和值匹配。

内容的提问来源于stack exchange，提问作者Chris F Carroll