Capybara: тест для содержимого в CSS PsuedoElements

Question

Я работаю над приложением, где текст условно отображается в свойстве содержимого псевдо-элементаи отображается на странице. После того, как изменение кода заставило этот важный текст случайно исчезнуть, мне захотелось написать тесты, которые могли бы захватить эту ошибку, если это произошло снова, но есть проблемы с захватом содержимого из псевдоселекторов. Я искал что-то вроде:

#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 

Решение было не так легко, и я думал, что я поделюсь здесь и пусть другие комментарии, или предоставить другие решения.

Я использую Capybara 2.3.0 и Poltergeist 1.5.1.

Answer 1

Ключ передал блок кода 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