Selenium/Razor应用：如何获取列表第一行内的按钮ID

我有一个包含多行多列的列表，每一行都带有名为“Show Trail Details”的按钮，列表界面如下图所示：

测试执行过程中，我会双击“Date”列的列标题，将列表内最新条目排序至第一行，此时需要获取第一行内对应按钮的ID属性。
由于按钮ID为动态生成，无法通过固定XPath路径定位，按钮所在路径可能为//tbody/tr[1]/td[6]/button[1]/span[1]，也可能为//tbody/tr[1]/td[4]/button[1]/span[1]等其他形式。
我尝试复制页面HTML源码，但运行复制的代码时页面显示异常，浏览器元素检查界面如下图所示：

请问有什么可行方法可以获取到该目标按钮的ID？

不需要依赖固定列序号的XPath路径，以下几种方法都可以稳定定位目标按钮、获取对应ID属性：

• 按按钮文本精准匹配，完全跳过列位置依赖
  先锁定排序后的第一行（即//tbody/tr[1]节点），再在这个节点范围内查找文本为Show Trail Details的按钮即可，按钮在哪一列都不影响定位结果，对应XPath写法：

  //tbody/tr[1]//button[normalize-space(.)='Show Trail Details']
  

  定位到元素后直接读取它的id属性值即可，normalize-space()方法会自动去掉文本前后的空格、换行，避免因为格式问题匹配失败。
• 模糊文本匹配提升容错率
  如果按钮内嵌套了图标标签、或者文本前后存在动态生成的空格，可以用包含匹配的写法降低匹配要求：

  //tbody/tr[1]//button[contains(., 'Show Trail Details')]
  

  用这个写法前要确认第一行内没有其他包含相同文本的按钮，避免出现误匹配。
• 通过固定特征属性定位，稳定性更高
  从你贴的元素检查截图来看，这类业务按钮一般会带有固定的class类名、或者data-*开头的自定义业务属性（比如data-action="show-trail-details"这类不会动态变化的值），你可以在元素检查面板里确认下按钮的这类属性，只要找到非动态生成的固定属性，就可以拼接定位规则，比如：

  //tbody/tr[1]//button[contains(@class, 'trail-detail-btn')]
  

  这种定位方式不受文本修改、多语言切换影响，长期维护成本更低。

不需要复制页面HTML源码本地运行调试：动态页面的渲染依赖对应的JS脚本、接口数据和静态资源，直接复制静态源码肯定会显示异常。你直接在浏览器开发者工具的Elements面板按Ctrl+F调出搜索框，把写好的XPath输入进去，就能实时验证XPath能不能命中目标元素，调试通过后再放到自动化测试脚本里使用即可。

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