Is there a way to verify if text was generated using CSS?

Question

Is there a way to verify if text was generated using CSS?

I am working with the following HTML structure:

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

In my CSS, I have set the content dynamically using the following code:

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

For a live example, you can check out this jsFiddle link.

The issue arises when Behat is unable to identify this text in scenarios like below:

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

Behat returns the following result:

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)

To address this issue and ensure test success, what steps can be taken?

html css behat

Answer 1

Answer №1

Here's a clever little technique you might find useful: try using css attr() to display text in a pseudo-element while still making it accessible in the DOM

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

<h4 id="myModalLabel"  data-txt="event">Let's get started ... </h4>

If you need to search for text within a CSS rule, here's a way to do it. Keep in mind that scanning all elements for "text hidden in pseudo css" may not be very efficient.

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>

Answer 2

Here's a clever little technique you might find useful: try using css attr() to display text in a pseudo-element while still making it accessible in the DOM

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

<h4 id="myModalLabel"  data-txt="event">Let's get started ... </h4>

If you need to search for text within a CSS rule, here's a way to do it. Keep in mind that scanning all elements for "text hidden in pseudo css" may not be very efficient.

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>

Is there a way to verify if text was generated using CSS?

Answer №1

Similar questions

Error message indicating that the event "OnkeyDown" is not in sync within the React application

Arranging Divs into Two Columns in CSS - A Simple Guide

Pattern matching for CSS class names

What is the best way to show only a section of a background in CSS?

Form calculation

Missing Image: Bootstrap NavBar Display Issue

CSS3 animation for rotating elements

Are you in need of a flexbox list that can be scrolled

Selenium can be used to locate elements between two specific spans

Ways to trigger the display of an image upon hovering over a button without using inheritance

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

Activate a click event on an element using Simple HTML DOM

Center float elements with a percentage width

Issues with locating the fonts: React-slick paired with nextjs

Is there a more efficient method to achieve this task using JavaScript or jQuery?

Creating a DIV with vertical scroll-bars exclusively for lengthy paragraphs in HTML: What's the best approach?

Utilizing personalized CSS for specific ioslides

How do I change the class of an element using $this?

"Utilize Python's Selenium library to automate clicking the 'Get Data

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints