Question

我有以下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中的article元素，但不能点击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?

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

Answer 1

不同的行为是由于FirefoxDriver实现了与ChromeDriver相比的元素点击。根据我过去的观察结果：

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

换句话说，Firefox正在点击文章元素。 click事件只会冒泡，这意味着内部链接永远不会收到点击。相比之下，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已经在你告诉它点击的元素上启动了click事件 - 即文章元素。相比之下，Chrome会像用户那样点击 - 即在特定坐标的最深处元素。

Watir-Webdriver，可以单击chrome中的元素，但不能在firefox中单击

1 个答案: