Watir-Webdriver，可以在 chrome 中单击元素，但不能在 Firefox 中单击答案

【问题标题】：Watir-Webdriver, can click element in chrome but not in firefoxWatir-Webdriver，可以在 chrome 中单击元素，但不能在 Firefox 中单击
【发布时间】：2015-03-27 15:29:20
【问题描述】：

我有以下 HTML

<div class="brands brands-search-region">
    <section class="module">
        <div class="listing">
            <article id="" class="node node-brand brand brand-item clickable multiple-item" about="/node/85531" typeof="sioc:Item foaf:Document">
                <a href="/node/85531">
                </a>
            </article>
        </div>
    </section>
</div>

我可以在 chrome 中点击文章元素，但不能在 Firefox 中使用：

browser.div(class: 'brands-search-region').article.click

我知道我能做到：

browser.div(class: 'brands-search-region').article.a.click that works in both but why does the previous not work in firefox?

我正在使用最新版本的 firefox、chromedriver 和 selenium-webdriver 的 watir-webdriver

【问题讨论】：

你使用的是FF36？有错误信息吗？
是的 Firefox 36.0.4。没有错误，它只是移动到下一行代码。

标签： selenium-webdriver watir watir-webdriver

【解决方案1】：

与 ChromeDriver 相比，FirefoxDriver 实现元素点击的方式不同。根据我过去的观察：

Chrome 确定元素的中心，然后单击这些坐标处最深的元素。
Firefox 确定元素的中心，然后单击元素的中心。

换句话说，Firefox 正在单击文章元素。点击事件只会冒泡，这意味着内部链接永远不会收到点击。相比之下，Chrome 的算法会导致首先点击链接元素。

您可以在下一页中看到不同的行为。当收到点击事件的元素会显示警报。

<html>
  <head>
    <script>
      function highlight(elem) {
        alert(elem.nodeName);
      }
    </script>
  </head>
  <body>
    <div class="brands brands-search-region">
      <section class="module" onclick="highlight(this);">
        <div class="listing" onclick="highlight(this);">
          <article onclick="highlight(this);" style="border:1px solid red; text-align:center;">
            <a href="" style="border:1px solid green;" onclick="highlight(this);">asdf</a>
          </article>
        </div>
      </section>
    </div>
  </body>
</html>

使用 Chrome 和 Firefox 运行以下脚本：

browser = Watir::Browser.new :firefox # or :chrome
browser.goto 'path/to/file/test.htm'

browser.div(class: 'brands-search-region').article.click

bubbling = []
while browser.alert.exists?
    bubbling << browser.alert.text
    browser.alert.ok
    sleep(1)
end
p bubbling

在 Chrome 中，bubbling 将是：

["A", "ARTICLE", "DIV", "SECTION"]

在 Firefox 中，bubbling 将是：

["ARTICLE", "DIV", "SECTION"]

Firefox 已经在您告诉它点击的元素上启动了点击事件 - 即文章元素。相比之下，Chrome 像用户一样点击 - 即在特定坐标的最深元素处。

【讨论】：

感谢贾斯汀的详细解释。欣赏它。