Geb Selector doesn't select

Question

I noticed that in some cases the geb selector doesn't work as expected. When I copy the css selecor, css path or xpath from the developer console and use them as a selector in geb, they don't work. Anyway in this example I can't select what I want:

Site: https://money.cnn.com/data/fear-and-greed/

<div id="needleChart" style="background-image:url('//money.cnn.com/.element/img/5.0/data/feargreed/1.png');">
    <ul>
        <li>Fear & Greed Now: 72 (Greed)</li><li>Fear &amp; Greed Previous Close: 72 (Greed)</li>
        <li>Fear & Greed 1 Week Ago: 69 (Greed)</li><li>Fear &amp; Greed 1 Month Ago: 58 (Greed)</li>
        <li>Fear & Greed 1 Year Ago: 8 (Extreme Fear)</li>
   </ul>
</div>

Now I want to get the text from the first li-tag and this is my Code:

public class MoneyCnnFearAndGreed extends Page {
    static url = 'https://money.cnn.com/data/fear-and-greed'
    static content = {
        fearAndGreed { $("#needleChart").$("ul li")[0].text() }
    }
}

Browser.drive {
    to MoneyCnnFearAndGreed
    println fearAndGreed
}

But the result is empty. Hope you can help me here.

Answer 1

Your ul list element is hidden, see corresponding CSS file:

.feargreed #needleChart ul {
    visibility: hidden;
    height: 0;
    width: 0;
}

Geb is based on Selenium WebDriver, thus you cannot interact with hidden content, as the Book of Geb clearly states:

We want to click the Geb link, but can’t because it’s hidden (WebDriver does not let you interact with hidden elements).

Consequently, you have no chance to get the text content of an invisible element other than by executing JS from within your Spock/Geb test:

println js.exec("return document.querySelectorAll('#needleChart ul li')[0].textContent;")