Question

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

我面临着一个新的挑战，它是弹出窗口，即使经过了有关stackoverflow的大量弹出问题，我也不太清楚如何解决这个问题。

我还没有写过watir代码....只是想弄清楚如何去做。所以要点赞一些指示。

所以我正在尝试创建一个用户配置文件 - 用所有相关信息填充表单，然后点击Create profile按钮。（所有这些都是编码的，工作正常）。单击“创建配置文件”按钮后，会弹出一个弹出窗口，其中包含大量图像，表格形式为“请点击苹果图像”。文本是随机生成的 - 所以我可能会被要求点击一个平面而不是苹果。然后我需要点击该特定图像。

我如何让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

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

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

2 个答案: