如何检查 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 规则中的文本，那么您可以这样做，尽管要扫描所有元素以查找 "text hidden in pseudo 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>

如何检查 CSS 创建的文本？

How to check for text created by CSS?

html

css

behat