如何单击具有特定文本列的表行的元素?

时间:2019-06-02 13:49:27

标签: javascript automated-tests e2e-testing web-testing testcafe

我有一个包含多行的表。我需要能够找到包含特定文本的列,然后单击该行的删除按钮。

我能够通过用户名找到该行,但是当我尝试说“单击其删除按钮”时,它抱怨找不到该删除按钮的元素。

表的代码:

<tbody>
    <tr>
        <td class="align-middle">77716d61-32ea-4bf3-a2bd-e48645d049ee</td>
        <td class="align-middle">asdf</td>
        <td class="align-middle">asdf@asdf.com</td>
        <td class="align-middle">
            <a class="btn btn-danger" href="/Identity/UserDelete/77716d61-32ea-4bf3-a2bd-e48645d049ee"><span class="oi oi-x"></span></a>
        </td>
</tbody>

我尝试过:

.click(Selector('tbody').find('td').withText(name).find('.btn.btn-danger'))

和:

.click(Selector('tbody').find('td').withText(name).find('td').find('a').find('.btn.btn-danger'))

以及与兄弟姐妹和孩子一起玩,但我不太理解。

预期:单击该表行的删除按钮。

实际: 找到带有用户名的列后,就不想继续浏览该行以单击删除按钮。

The specified selector does not match any element in the DOM tree.

   | Selector('tbody')
   |   .find('td')
   |   .withText('Automationieweg')
 > |   .find('td')
   |   .find('a')
   |   .find('.btn.btn-danger')

2 个答案:

答案 0 :(得分:2)

我更加仔细地研究了.sibling for testcafe并提出了以下解决方案:

.click(Selector('tbody').find('td').withText(name).sibling('td').find('a').nth(1))

这将找到具有我要查找的名称的行,从具有一个“ a”子项的父项“ tr”中获取“ td”的同级元素,然后单击该行中的第二个(即删除)按钮。)

答案 1 :(得分:1)

当获得用户名元素时,必须使用“删除”按钮找到公用的父元素,然后在父元素中找到它。这在javascript中非常简单