水獺:: Poltergeist :: MouseEventFailed後更新Haml（4.0.7 => 5.0.2）[RAILS]

嗨，我們正在更新我們的HAML文件從版本4.0.7到5.0.2。更新後，許多黃瓜測試突破說;水獺:: Poltergeist :: MouseEventFailed後更新Haml（4.0.7 => 5.0.2）[RAILS]

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)

它打破了在這裏我使用插在國際化的文本是這樣的部分：使用這樣的事情

You_are_on_a_device: You are on a %{type} device

並在視圖IM：

%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

是否有人知道是什麼造成這種情況，我能做些什麼來解決這個問題？

來源

2017-08-31 luissimo

我有幾個問題以便能夠幫助您進行調試： 1.當您在開發中運行服務器時，'data-attribute'設置正確在生成的視圖？ 2.在rails控制檯中'I18n.t（'you_are_on_a_device'，類型：'small'）'的輸出是正確的？ 3.沒有引號的''data-attribute''鍵是拼寫錯誤？ – mabe02

1。數據屬性被正確設置，但在國際文本的'類型'插值中斷。 2.控制檯中的輸出是正確的。 3.是的，這是一個錯字，很抱歉，在OP中修復了它。 – luissimo

注意：我還必須提到插值中的類型值有html。（也添加到現在發佈）。 – luissimo

解決：

解決的辦法是放在內插字符串這樣的數據屬性值：

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

，並在我的配置/初始化/ haml.rb

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

這是因爲html轉義已經成爲HAML 5.0.0中的標準，所以e它不在HAML 4.0.7

來源

2017-09-08 11:34:08 luissimo

禁用html轉義不是一個好的做法，因爲它會讓您的應用程序容易受到XSS攻擊。例如，當攻擊者鍵入其用戶名<script>alert('Vasya')</script>時，其他用戶每次在頁面上顯示Vasya的名稱時都會看到警報。試試下面的代碼：

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

我在一個新的Rails項目安裝HAML 5.0.2（軌道4.2.6），我試圖呈現如下頁面：

%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_htmltrue和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

升級豚或水豚相關的寶石同樣是使用散列表示法來呈現數據的屬性一個很好的做法：

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

查看有關haml數據屬性的更多詳細信息

來源

2017-09-08 22:13:24 Hirurg103

水獺:: Poltergeist :: MouseEventFailed後更新Haml（4.0.7 => 5.0.2）[RAILS]

回答

相關問題