html - 如何检查由 CSS 创建的文本？

Question

我有以下 HTML:

<h4 id="myModalLabel"></h4>

我在 CSS 中设置内容:

#myModalLabel::after {
    content: "gebeurtenis";
}

jsFiddle

这样，Behat 在运行时似乎无法找到文本，例如:

  Scenario: Viewing gebeurtenis
    Given I am on "hrm/calendar"
    Then I should see "gebeurtenis"

结果:

Then I should see "gebeurtenis"        # HRMContext::assertPageContainsText()
      The text "gebeurtenis" was not found anywhere in the text of the current page. (Behat\Mink\Exception\ResponseTextException)

我怎样才能使这个测试成功？

Answer 1

我可以建议一个小技巧吗，css att() , 以伪文本的形式使用文本，同时在 DOM 中访问它

h4:after {
    content: attr(data-txt);
}

<h4 id="myModalLabel"  data-txt="gebeurtenis">Here we go ... </h4>

如果您仍然需要查找可能(或您知道)在 css 规则中的文本，那么您可以这样做，尽管扫描所有元素寻找“隐藏在伪 css 中的文本”可能不是那样快速。

var element = document.getElementById('div_1'),
    style = window.getComputedStyle(element,':after'),
    value = style.getPropertyValue('content').replace(/^\"|\"$/gm,''),
    result = document.getElementById('result');

if(value.length > 0) {
    result.innerHTML = 'Found in css: ' + value;
}

#div_1 {
   color: red;
}
#div_1:after {
   content: 'world';
   color: blue;
}
#result {
   margin-top: 20px;
}

<div id="div_1">hello </div>
<div id="result"></div>