Validate Image on Web Page Using Geb and Spock

Question

I'm new to using geb and spock, but I'm trying to validate an image displayed on a webpage when I only have the view-source of the code. Any advice is appreciated! I modeled this code off of a link test I previously wrote, so I'm certain I'm missing something. An example of my page file is:

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

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

And an example of my spec page is:

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

Answer 1

You can validate that the image styling is set to displayed, any content that has the css property display: none cannot be interacted with via the webdriver API.

I have experienced some issues with using the isDisplayed method on navigator objects in Geb so I would do the following:

Where you define the page content add a method for checking the content can be interacted with (therefore is set to displayed):

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

Boolean contentDisplayed(Navigator content) {
    content
}

Then your test will look like this:

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

its worth noting here that simply accessing the .hover method here you are validating that the image is displayed as far as the css is concerned. So you could simplify the test to:

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