Geb Selector不选择

Question

我注意到在某些情况下，geb选择器无法按预期工作。当我从开发人员控制台复制css selecor，css path或xp​​ath并将它们用作geb中的选择器时，它们不起作用。无论如何在这个例子中我无法选择我想要的东西：

网站：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>

现在我想从第一个li-tag获取文本，这是我的代码：

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
}

但结果是空的。希望你能在这里帮助我。

Answer 1

你的ul列表元素是隐藏的，请参阅相应的CSS file：

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

Geb基于Selenium WebDriver，因此您无法与隐藏内容进行交互，因为Book of Geb明确指出：

我们想点击Geb链接，但不能因为它被隐藏（WebDriver不允许你与隐藏元素交互）。

因此，除了在Spock / Geb测试中执行JS之外，您没有机会获得不可见元素的文本内容：

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