使用 Watir 单击没有 id 的表格元素

Question

我有一个动态表，我想使用 watir 来选择一个编辑按钮。它没有我可以选择的传统 watir id（例如：browser.img(:title, "iconname")），并且可能有多个编辑图标可供选择。在过去，我会通过查询数据库来获得正确的元素。但是，这一次没有数据库条目来帮助我选择正确的编辑链接。

在下面的代码中，我尝试选择的是显示“autogenerated3”的部分，我尝试选择“onclick”元素或“img src” 两者都是可选择的项目，将单击编辑图标。

<div id="certificate_table" style="margin-bottom: 1em">
 <table cellspacing="0">
 <tbody>
 <tr>
 <th>Alias</th>
 <th>Common Name</th>
 <th class="centered">Status</th>
 <th class="centered">In Use</th>
 <th class="centered">Issued</th>
 <th class="centered">Expires</th>
 <th class="centered">Days</th>
 <th>Actions</th>
</tr>
<tr class="normal">
<td>autogenerated2</td>
<td>default.domain.com</td>
<td class="centered"> Revoked </td>
<td class="centered">
<td class="centered"> 10/18/2013 19:46:34 GMT </td>
<td class="centered"> 10/17/2016 19:46:34 GMT </td>
<td class="centered">N/A</td>
<td>
<a onclick="new Ajax.Request('/media/certificates/edit_certificate/3',     {asynchronous:true, evalScripts:true}); return false;" href="#">
<img title="Edit" src="/media/images/icons/edit.gif?1276876449" alt="Edit">
</a>
</td>  
</tr> 
<tr class="alt">
<td>autogenerated3</td>
<td>autogenerated3.domain.com</td>
<td class="centered"> CSR Issued </td>
<td class="centered">
<td class="centered"> 10/18/2013 20:54:55 GMT </td>
<td class="centered"> 10/17/2016 20:54:55 GMT </td>
<td class="centered">1092 </td>
<td>
<a onclick="new Ajax.Request('/media/certificates/edit_certificate/4',   {asynchronous:true, evalScripts:true}); return false;" href="#">
<img title="Edit" src="/media/images/icons/edit.gif?1276876449" alt="Edit">
</a>
<a onclick="new Ajax.Request('/media/certificates/generate_csr/4',  {asynchronous:true,   evalScripts:true}); return false;" href="#">
<a onclick="new Ajax.Request('/media/certificates/import_certificate_reply/4',    {asynchronous:true, evalScripts:true}); return false;" href="#">
<a onclick="if (confirm('Are you sure you want to revoke this certificate?')) { new   Ajax.Request('/media/certificates/revoke_certificate/4', {asynchronous:true,   evalScripts:true}); }; return false;" href="#">
 </td>
 </tr>
 <tr class="normal">
 <td>Original Certificate</td>
 <td>localhost.localdomain</td>
 <td class="centered"> Self Signed </td>
 <td class="centered">
 <td class="centered"> 10/03/2013 22:37:02 GMT </td>
 <td class="centered"> 10/03/2014 22:37:02 GMT </td>
 <td class="centered">347 </td>
 <td>
  <a onclick="new Ajax.Request('/media/certificates/edit_certificate/1',    {asynchronous:true, evalScripts:true}); return false;" href="#">
  <img title="Edit" src="/media/images/icons/edit.gif?1276876449" alt="Edit">
  </a>
 </td>
 </tr>
  <tr class="alt">
  <td>vhost4</td>
  <td>vhost4.domain.com</td>
  <td class="centered"> Revoked </td>
  <td class="centered">
  <td class="centered"> 10/18/2013 15:58:01 GMT </td>
  <td class="centered"> 10/17/2016 15:58:01 GMT </td>  
  <td class="centered">N/A</td>
  <td>
  <a onclick="new Ajax.Request('/media/certificates/edit_certificate/2',  {asynchronous:true, evalScripts:true}); return false;" href="#">
  <img title="Edit" src="/media/images/icons/edit.gif?1276876449" alt="Edit">
  </a>
  </td>
  </tr>
 </tbody>
</table>

选择图标没有问题。只是麻烦选择正确的图标。 onclick 和 image 值都是可选项目。该图标可能不是列表中的最后一项。我看到了一篇尝试 .last.click 的帖子，它确实选择了列表中的最后一个图标。不幸的是，该表根据别名名称按字母顺序发布数据。所以它可能不是列表中的最后一项，不能使用这种方法。有什么建议吗？

b.div(:id, "certificate_table").imgs(:src => "/media/images/icons/edit.gif?1276876449").last.when_present.click

Answer 1

听起来您需要根据其兄弟元素来查找元素，因此您可能会发现 blog post 很有用。该帖子提供了两个您可能会考虑的选项。

如果您要查找的文本是唯一的 - 即包含文本的行肯定是正确的行，您可以找到 td，转到父行然后获取链接。

b.td(:text => 'autogenerated3').parent.link.click

如果你需要确保文本在第一列，那么你可以这样做：

b.trs.find{ |tr| 
    tr.td.exists? and tr.td(:index => 0).text == 'autogenerated3'
}.link.click

添加 tr.td.exists? 是因为您的某些行没有任何 td，这会在检查第二个条件时导致异常。