Question

我正在处理一个应用，其中文本有条件地出现在::before伪元素的内容属性中，并在页面上呈现。在代码更改导致这个重要文本意外消失之后，我希望能够编写可以捕获该错误的测试，如果它再次发生，但是从伪选择器中获取内容存在挑战。我正在寻找类似的东西：

#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

Capybara：测试CSS PsuedoElements中的内容

1 个答案: