Capybara::Poltergeist::MouseEventFailed Haml 更新后 (4.0.7 => 5.0.2) [RAILS]

Question

您好，我们目前正在将我们的 HAML 文件从版本 4.0.7 更新到 5.0.2。更新后很多黄瓜测试中断说；

Firing a click at co-ordinates [422.5, 414] failed. 
Poltergeist detected another element with CSS selector 'html.javascript body div.ui-widget-overlay.ui-front' at this position. 
It may be overlapping the element you are trying to interact with. 
If you don't care about overlapping elements, try using node.trigger('click'). 
(Capybara::Poltergeist::MouseEventFailed)

它在我在 i18n 文本中使用插值的部分中断，如下所示：

You_are_on_a_device: You are on a %{type} device

我在视图中使用的是这样的东西：

%p.dialog{'data-attribute' => t('you_are_on_a_device', type: '<a href="http://mywebsite.nl/type">small</a>').html_safe, hidden: true}

我似乎无法从 Haml Changelog

中找到重大更改

有人知道是什么原因造成的吗？我能做些什么来解决这个问题？

Answer 1

已解决：

解决方案是将数据属性值放入这样的内插字符串中：

%p.dialog{'data-attribute' => "#{t('you_are_on_a_device', type: '<a href="http://mywebsite.nl/type">small</a>').html_safe}", hidden: true}

在我的 config/initializers/haml.rb

Haml::Template.options[:escape_html] = false

这是因为 html 转义在 HAML 5.0.0 中已成为标准，而在 HAML 4.0.7 中却没有

Answer 2

禁用 html 转义不是一个好的做法，因为它会使您的应用容易受到 XSS 攻击。例如，当攻击者输入他们的用户名 <script>alert('Vasya')</script> 时，每当 Vasya 的名字出现在页面上时，其他用户都会看到警告。试试下面的代码：

%p= "<script>alert('Vasya')</script>"

我在新的 rails 项目 (rails 4.2.6) 中安装了 haml 5.0.2，并尝试呈现以下页面：

%h1 HAML

%p.dialog{'data-attribute' => t('you_are_on_a_device', type: '<a href="http://mywebsite.nl/type">small</a>').html_safe, hidden: true}

%p.dialog{'data-attribute' => "#{t('you_are_on_a_device', type: '<a href="http://mywebsite.nl/type">small</a>').html_safe}", hidden: true}

我没有看到呈现的 p 标签有任何差异（我已经尝试了 escape_html true 和 false）：

<h1>HAML</h1>
<p class="dialog" data-attribute="You are on a <a href=&quot;http://mywebsite.nl/type&quot;>small</a> device" hidden=""></p>
<p class="dialog" data-attribute="You are on a <a href=&quot;http://mywebsite.nl/type&quot;>small</a> device" hidden=""></p>

我猜Failed to click on element问题是由其他原因引起的，可能是你在升级haml

时升级了水豚或水豚相关的gem

此外，使用散列表示法呈现数据属性也是一个好习惯：

%p.dialog{data: { attribute: t('you_are_on_a_device', type: '<ahref="http://mywebsite.nl/type">small</a>').html_safe }, hidden: true}

查看关于 haml 数据属性的更详细文档here

Capybara::Poltergeist::MouseEventFailed Haml 更新后 (4.0.7 => 5.0.2) [RAILS]

Capybara::Poltergeist::MouseEventFailed after Haml update (4.0.7 => 5.0.2) [RAILS]

ruby-on-rails

ruby

ruby-on-rails-3

ruby-on-rails-4

haml