如何在 watir-webdriver 的弹出窗口中单击特定图像

Question

这是我第一次尝试使用 watir-webdriver 进行自动化。当我通过每个测试用例时，我会学到新东西并面临新的挑战。我非常感谢这里的所有问题和答案，因为它对我帮助很大。谢谢

我面临着一个新的挑战，它与弹出窗口有关，即使在 stackoverflow 上经历了很多弹出问题之后，我也不太清楚如何解决这个问题。

我还没有编写 watir 代码....只是想弄清楚如何去做。所以请指点一下。

所以我正在尝试创建一个用户配置文件 - 用所有相关信息填写表单并点击创建配置文件按钮。（所有这些都已编码并且工作正常）。 单击“创建配置文件”按钮后，会弹出一个弹出窗口，上面有很多表格形式的图像，并带有“请点击苹果的图像”文本。文本是随机生成的——所以我可能会被要求点击飞机而不是苹果。然后我需要点击那个特定的图像。

如何让 watir-webdriver 为我执行此操作？我如何告诉 watir-webdriver 使用弹出窗口，阅读顶部的文本，将其与图像匹配并单击图像？

谢谢。

---

这是我得到的错误。还包括 watir 代码和 HTML

---

错误：

ArgumentError: invalid window selector: {:id=>"humanVerificationContainer"}
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir-  webdriver/window.rb:15:in `initialize'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `new'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `window'


===============================================================================

$b.window(:id => "humanVerificationContainer").use do  
$b.link(:id => "humanVerificationQuestion").click  

---

<div id="humanVerificationContainer" style="position: fixed; z-index: 9999; top: 50px;  left: 750.5px; display: block;"><a class="close"></a><div id="humanVerificationQuestion"  class="modal">
  <h2>Click the picture of an aircraft carrier</h2>
  <table>
    <tbody><tr>

      <td>
        <div answer="0" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px 0px; height:100px; width:100px">&nbsp;</div>
      </td>

      <td>
        <div answer="1" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -100px; height:100px; width:100px">&nbsp;</div>
      </td>

      <td>
        <div answer="2" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -200px; height:100px; width:100px">&nbsp;</div>
      </td>

      <td>
        <div answer="3" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -200px -100px; height:100px; width:100px">&nbsp;</div>
      </td>
      </tr><tr>
      <td>
        <div answer="4" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px -400px; height:100px; width:100px">&nbsp;</div>
      </td>

      <td>
        <div answer="5" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -600px -200px; height:100px; width:100px">&nbsp;</div>
      </td>

      <td>

Answer 1

当新的浏览器窗口打开时，您可以调用use 方法。

browser.window(:title => "annoying popup").use do  
  browser.button(:id => "close").click  
end

Answer 2

根据 html，弹出窗口看起来并不是一个实际的窗口。相反，它只是主页中的一个 div 标签，看起来像一个弹出窗口。假设它不在一个框架中，你可以像对待任何其他 div 标签一样对待它。

要获得“弹出”：

popup = $b.div(:id => "humanVerificationContainer")

要在弹出窗口顶部获取主题：

subject = popup.h2.text.gsub(/^Click the picture of an? /, '')
#=> "aircraft carrier"

点击“图片”，其实就是一个带有背景图片的div：

popup.div(:class => 'humanImage').click

但是，似乎没有办法确定哪个图像是飞机。因此，您的开发人员可能需要输入某种标识符或确保图像始终位于相同的答案中（仅用于测试环境）。