使用 Geb 和 Spock 验证网页上的图像

Question

我是使用 geb 和 spock 的新手，但是当我只有代码的查看源代码时，我正在尝试验证网页上显示的图像。任何建议表示赞赏！我根据之前编写的 link 测试对这段代码进行了建模，所以我确定我遗漏了一些东西。我的页面文件的一个例子是：

// code not included where I have defined the url/etc. Below is content

someImage { $("img", file: "image-logo.png") }

我的规格页面的一个例子是：

def "Valid image"() {
        given: "an image checker"
        to SomePage
        when:
        someImage.hover()
        then:
        verifyAt()

Answer 1

您可以验证图像样式设置为 displayed，任何具有 css 属性 display: none 的内容都无法通过网络驱动程序进行交互 API.

我在 Geb 中对导航器对象使用 isDisplayed 方法时遇到了一些问题，因此我将执行以下操作：

在您定义页面内容的地方添加一个方法来检查可以与之交互的内容（因此设置为显示）：

someImage { $("img", file: "image-logo.png") }

Boolean contentDisplayed(Navigator content) {
    content
}

那么您的测试将如下所示：

def "Valid image"() {
    given: "an image checker"
    to SomePage
    when:
    someImage.hover()
    then:
    contentDisplayed(someImage)

这里值得注意的是，只要在这里访问 .hover 方法，就可以验证图像是 displayed 就 css 而言。所以你可以将测试简化为：

def "Valid image"() {
    when: "an image checker"
    to SomePage
    then:
    contentDisplayed(someImage)

Validate Image on Web Page Using Geb and Spock