Taiko框架下如何通过Xpath提取UI字段值

方案1：原生JS实现（无依赖，全场景兼容） #

直接调用浏览器内置XPath解析API定位目标元素，再读取元素value属性，无需依赖第三方库，支持所有合法XPath表达式：

// 替换为实际业务使用的XPath表达式
const targetXPath = '//*[@id="target-input"]';
// 执行XPath查询，匹配第一个符合规则的元素
const xpathQueryResult = document.evaluate(
  targetXPath,
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const targetElement = xpathQueryResult.singleNodeValue;
// 读取字段值，元素不存在时返回空字符串避免报错
const fieldValue = targetElement ? targetElement.value : '';

若需要批量匹配多个同路径字段，将查询参数中的XPathResult.FIRST_ORDERED_NODE_TYPE替换为XPathResult.ORDERED_NODE_SNAPSHOT_TYPE，遍历返回的节点快照逐个读取value即可。

方案2：jQuery环境适配 #

如果项目中已经引入jQuery，先通过原生XPath拿到DOM元素，再包装为jQuery对象调用.val()方法取值，注意jQuery实例不存在.value()方法，不要直接调用：

const xpathQueryResult = document.evaluate(
  '替换为实际XPath表达式',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
);
const targetElement = xpathQueryResult.singleNodeValue;
// 包装为jQuery对象后取值
const fieldValue = targetElement ? $(targetElement).val() : '';

• $(xpath).text()：.text()的作用是提取元素嵌套的文本节点内容，输入框、下拉选择器这类表单字段的用户输入内容存储在元素自身的value属性上，不会同步到子文本节点，因此无法返回正确结果
• $(xpath).value()：jQuery实例对象没有挂载value()方法，只有原生DOM元素自带.value属性，调用不存在的方法会直接抛出错误中断执行，无法正常返回结果
• textBox().value()：该方法是部分UI自动化测试框架的上层封装API，设计层面仅支持id、name属性作为定位入参，不兼容XPath定位规则

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