为什么在浏览器模式下一切正常时，Watir Chrome Headless“在点 (x,y) 处不可点击”？答案

【问题标题】：Why Watir Chrome Headless 'not clickable at point (x,y)' when all fine in with browser mode?为什么在浏览器模式下一切正常时，Watir Chrome Headless“在点 (x,y) 处不可点击”？
【发布时间】：2017-10-27 00:47:52
【问题描述】：

我有一个用 Ruby 编写的抓取脚本，它使用 Selenium、Watir 和 ChromeDriver，在 Chrome 浏览器窗口中一切正常，但尝试在无头模式下运行就成功了；

Selenium::WebDriver::Error::UnknownError: unknown error: Element <input id="desired_element" type="checkbox" name="desired_element" checked="checked"> is not clickable at point (660, 594). Other element would receive the click: <html lang="en">...</html>

我正在使用 Watir 6.8 和最新的 Chromedriver 2.33。

在无头与非无头时页面的不同行为背后有什么想法，以及我该如何处理？

【问题讨论】：

如果您要包含无法执行的实际代码以及与代码交互的 HTML 示例，将会很有帮助。

标签： watir google-chrome-headless

【解决方案1】：

当它说“其他元素会收到点击：”时，错误消息告诉您问题是什么

这意味着屏幕上的其他一些元素覆盖了您尝试与之交互的复选框。这可能是由于无头模式下的默认浏览器大小与非无头运行时浏览器的默认大小不同，导致元素排列不同

我们可以通过在无头模式和正常模式下询问窗口大小并查看结果值是否相同来验证是否是这种情况。

size = browser.window.size
puts "The browser window is #{size.width} wide by #{size.height} high"

有几种可能的方法可以解决这个问题：

指定或更改浏览器“窗口”大小。例如 browser.window.resize_to 1024, 768

我更喜欢这个，通常有一个类似的命令来设置初始化后的浏览器大小。设置为您的网站支持的最小尺寸，或推荐的最小尺寸尺寸
使用其他方式“单击”复选框，例如在其上发送空格 @browser.checkbox(name: "desired_element").send_keys " "

我不喜欢这样，因为它并不能真正解决问题的根源，并且随着脚本的进行，您可能会遇到与网站上其他元素交互的其他类似问题。

【讨论】：

感谢 Chuck，将无头窗口大小与“带头”窗口大小（正确的术语？！）相匹配在这里工作得很好。虽然我知道错误消息告诉我另一个元素位于所需元素的预期位置，但我不太明白为什么以及如何解决问题。谢谢你帮我走出那个坑??。我不太明白 Watir 如何“记录”元素的位置，它是否在页面加载时执行此操作，因此如果任何 javascript 元素更改 dom，它可能会导致问题，因为元素从它们的第一个加载位置更改位置？
我不相信 watir 'logs' 位置，我认为它是从 DOM 中获取它们的（从技术上讲，它是 webdriver 做的工作）。这里发生的事情是“反应性”网站的一个常见问题，这些网站会响应浏览器宽度并重新格式化页面以适应和看起来不错。通常它们支持的最小宽度，如果浏览器低于该宽度，您最终会出现很多对象重叠，因为它无法将它们全部整齐地放在页面上。
如果你想看看headless下发生了什么，使用我上面放的命令来获取headless浏览器的默认大小。然后在 IRB 下启动一个非无头会话并使用第二个命令将该窗口设置为无头浏览器使用的相同大小。然后你可以看到页面是如何排列的，当浏览器是这个大小时，哪些元素可能重叠。

【解决方案2】：

出现这种错误的原因是网页加载不够好，无法定位元素。正如您所提到的，当您遇到无头 true 此类问题时，之前通过的测试可能是因为 .click() ，请尝试将 .click 替换为 .send_keys

.send_keys(selenium.webdriver.common.keys.Keys.SPACE)

当您使用 .send_keys() 时，如果找不到元素，您可能会遇到另一个问题，为了解决这个问题，您必须找到元素

elements = driver.find_element_by_tag_name("html")
elements.send_keys(Keys.SPACE)

希望这对您有所帮助。

【讨论】：

似乎找到了元素，否则肯定会给出未找到元素的错误？相反，它给出了一个element not clickable at point (x,y) 错误，这表明该元素已从它最初所在的位置移动。例如，页面上的先前元素是有条件的，它会将其他元素弹出到页面中，从而将“desired_element”的位置从第一次加载时的位置更改。在我看来，这可能是正在发生的事情，但在“头部”模式下同样的行为没有问题。
首先定位元素和 send_keys 在这里都没有帮助。仅供参考，我尝试执行的实际代码是； @browser.checkbox(name: "desired_element").clear
被否决，因为用户明确表示他们正在使用 Watir，但答案是完全使用 Selenium API 而不是 Watir API