使用 Watir 在 Table 中搜索文本并在不同的列上单击 Link

Question

我有以下 HTML table。有没有办法在 Watir 中点击名字 "TestingName1" 的 "Bin" 标志？ Watir 可以搜索文本 "test" 然后单击 "bin" 徽标吗？

以下是HTML

<table class="table table-striped table-bordered table-hover">
<colgroup>
    <col class=""><col class="" style="width: 100px; min-width: 100px;">
    <col class="" style="width: 100px; min-width: 100px;">
</colgroup>
<tbody>
    <tr class="">
        <td tabindex="1" class="" style="text-align: left;">Distributor</td>
        <td tabindex="2" class="" style="text-align: center;">
            <div class="form-group">
                <label class="ant-checkbox-wrapper">
                    <span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled">
                        <input disabled="" class="ant-checkbox-input" value="on" type="checkbox">
                        <span class="ant-checkbox-inner"></span>
                    </span>
                </label>
            </div>
        </td>
        <td tabindex="3" class="" style="text-align: center;">
            <div>
                <a id="lnkEditVendor" class="btn btn-default btn-xs" disabled="">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                </a>
                <!-- react-text: 762 -->&nbsp;&nbsp;&nbsp;&nbsp;<!-- /react-text -->
                <a id="lnkDeleteVendor" class="btn btn-default btn-xs" disabled="">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
            </div>
        </td>
    </tr>
    <tr class="">
        <td tabindex="4" class="" style="text-align: left;">testFMM</td>
        <td tabindex="5" class="" style="text-align: center;">
            <div class="form-group">
                <label class="ant-checkbox-wrapper">
                    <span class="ant-checkbox ant-checkbox-checked">
                        <input class="ant-checkbox-input" value="on" type="checkbox">
                        <span class="ant-checkbox-inner">
                            </span>
                        </span>
                    </label>
                </div>
            </td>
            <td tabindex="6" class="" style="text-align: center;">
                <div>
                    <a id="lnkEditVendor" class="btn btn-default btn-xs">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </a>
                    <!-- react-text: 777 -->&nbsp;&nbsp;&nbsp;&nbsp;<!-- /react-text -->
                    <a id="lnkDeleteVendor" class="btn btn-default btn-xs">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                </div>
            </td>
        </tr>
        <tr class="">
            <td tabindex="7" class="" style="text-align: left;">TestingName1</td>
            <td tabindex="8" class="" style="text-align: center;">
                <div class="form-group">
                    <label class="ant-checkbox-wrapper">
                        <span class="ant-checkbox ant-checkbox-checked">
                            <input class="ant-checkbox-input" value="on" type="checkbox">
                            <span class="ant-checkbox-inner"></span>
                        </span>
                    </label>
                </div>
            </td>
            <td tabindex="9" class="" style="text-align: center;">
                <div>
                    <a id="lnkEditVendor" class="btn btn-default btn-xs">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </a>
                    <!-- react-text: 792 -->&nbsp;&nbsp;&nbsp;&nbsp;<!-- /react-text -->
                    <a id="lnkDeleteVendor" class="btn btn-default btn-xs">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                </div>
            </td>
        </tr>
     </tbody>
</table>

我已经尝试检查 table

上是否存在我想要的文本

ary = driver.table(:class => ["table table-striped table-bordered table-hover"]).trs.collect{ |tr| tr[0].text }
  ary.each do |i|
     logger.info i
      if i == "#{name1}"
        logger.info "The data entered as #{name1} found"
      end
  end

我仍然无法单击属于文本 "TestingName1" 的右侧 "bin" 按钮。

谢谢。

Answer 1

您是否尝试过直接根据包含的文本选择行，然后单击行内的 link？

driver.table(:class => ["table table-striped table-bordered table-hover"])
      .tr(:text => 'TestingName1')
      .i(:class => 'fa-trash')
      .parent
      .click

如果 link 元素与同一行中的其他 link 元素不同（例如 class，或者data- 属性）因为它是我们必须通过 link.

中斜体元素上的唯一 class（在该行内）来定位它

您也可以通过索引来识别它，但是如果 table 被更改或重新排列，那么很容易破坏您的代码或点击错误的 link。

（警告，以上代码未经测试，仅根据您的 HTML 编写）

Answer 2

看了上面 Chuck van der Linden 的回答后，我稍微修改了一下，得到了一个工作代码如下：

table = driver.table(:class => ["table table-striped table-bordered table-hover"])
  textRow = table.td(:text => "TestingName1").parent
  if textRow.a(:id => "lnkDeleteVendor").exists?
    textRow.a(:id => "lnkDeleteVendor").click
  end

谢谢。

使用 Watir 在 Table 中搜索文本并在不同的列上单击 Link

Search Text in Table and Click Link on different column Using Watir

ruby

selenium

automation

webdriver

watir