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>

如何检查CSS创建的文本？

1 个答案: