水豚：測試CSS中的內容PsuedoElements

我正在研究一個應用程序，其中文本有條件地出現在::before僞元素的內容屬性中並呈現在頁面上。代碼更改導致此重要文本意外消失後，我希望能夠編寫能夠在錯誤再次發生時捕獲錯誤的測試，但是存在挑戰僞選擇器內容的挑戰。我正在尋找類似的東西：水豚：測試CSS中的內容PsuedoElements

#scss 
.content-div { 
    &.condition-true { 
    &:before { 
     content: "conditional text"; 
    } 
    } 
} 

#coffeescript 
if @someCondition 
    $('content-div').addClass('condition-true') 
else 
    $('content-div').removeClass('condition-true') 

#spec 
context "when true" do 
    it "should have the conditional text" do 
    # do thing that makes it true 
    expect(page).to have_content("conditional text") 
    end 
end

解決方案不是那麼容易，我想我會在這裏分享，讓別人評論，或提供其他解決方案。

我使用的是水豚2.3.0和Poltergeist 1.5.1。

來源

2014-10-09 steel

關鍵是將一段代碼傳遞給page.evaluate_script以及Javascript的getComputedStyle()函數。

content_array = page.evaluate_script <<-SCRIPT.strip.gsub(/\s+/,' ') 
    (function() { 
    var elementArray = $('.desired-css-selector'); 
    var contentArray = []; 
    for (var i = 0, tot=elementArray.length; i < tot; i++) { 
     var content = window.getComputedStyle(elementArray[i], ':before').getPropertyValue('content'); 
     contentArray.push(content); 
    } 
    return contentArray; 
    })() 
SCRIPT 
content_array.each { |c| c.gsub!(/\A'|'\Z/, '') } 

expect(content_array).to include("conditional text")

更新 - 簡單的例子：

我最近不得不做的這一個更簡單的版本：

color = page.evaluate_script <<-SCRIPT 
    (function() { 
    var element = document.getElementById('hoverme'); 
    var color = window.getComputedStyle(element, ':hover').getPropertyValue('color'); 

    return color; 
    })() 
SCRIPT

來源

2014-10-09 15:27:59 steel

水豚：測試CSS中的內容PsuedoElements

回答

相關問題