按跨度文本选择行索引值

【问题标题】：Select row-index value by span text按跨度文本选择行索引值
【发布时间】：2022-01-12 20:18:44
【问题描述】：

如何制作选择器或算法以返回带有跨度文本的行索引值？

HTML代码：

<div class="container">
<div row-index="0">
   <div>
      <div>
         <span>
            <div>
               <span>
               Test1234
               </span>
            </div>
         </span>
      </div>
   </div>
</div>
<div row-index="1">
   <div>
      <div>
         <span>
            <div>
               <span>
               1234test
               </span>
            </div>
         </span>
      </div>
   </div>
</div>
</div>

预期结果：getIndex("1234test"); //将返回 1 因为 row-index='1'

我尝试的一切都没有帮助我找到最终的解决方案，您能否提出解决方案或给我一些建议？我真的不知道从哪里开始

【问题讨论】：

您在什么情况下试图确定行索引？例如，您是否尝试通过事件（例如 onclick）来查找行索引？

标签： javascript css-selectors webdriver-io

【解决方案1】：

我认为最简单的方法是使用xpath来解决问题。

让我们为此创建一个函数：

async function getRowIndexBy(text) {
  const element = await $(`.//span[normalize-space()='${text}']/ancestor::div[@row-index]`);

  return element.getAttribute('row-index');
}

用法：

await getRowIndexBy('1234test'); // will return '1'

此函数将查找通过文本找到的元素（在您的情况下为span）的祖父元素（在您的情况下为div 和row-index 属性），并将返回row-index 的值属性。

针对提供的 HTML 进行测试：

【讨论】：