In Geb, what is the difference between displayed and present?

Question

I am writing functional tests and dealing with a modal window that fades in and out.

What is the difference between displayed and present?

For example I have:

settingsModule.container.displayed and settingsModule.container.present

where settingsModule represents my modal window.

When testing my modal window (the modal from Twitter's bootstrap), I usually do this:

def "should do ... "() {
    setup:
    topMenu.openSettingsModal()     

    expect:
    settingsModule.timeZone.value() == "Asia/Hong_Kong"

    cleanup:
    settingsModule.closeSettingsModal()
}

def "should save the time zone"() {
        setup:
        topMenu.openSettingsModal()             
        settingsModule.timeZone = "Japan"

        when:               
        settingsModule.saveSettings()       

        then:
        settingsModule.alertSuccess.size() == 1
        settingsModule.alertSuccess.text() == "Settings updated"

        when:
        settingsModule.saveSettings()       

        then:
        settingsModule.alertSuccess.size() == 1

        cleanup:
        settingsModule.closeSettingsModal()
    }

and on and on. In my modules, I have:

    void openSettingsModal() {                  
        username.click()
        settingsLink.click()            
    }

void closeSettingsModal() {
        form.cancel().click()       
    }

I always get a complain: "Element must be displayed to click".

In my openSettingsModal and closeSettingsModal, i tried many combination of waitFor with time interval and using present or not ... Can't figure it out.

Any pointers would be highly appreciated. Thanks!

Answer 1

I think the main difference is that present would check that there is an element in your DOM, whereas displayed checks on the visibility of this element.

Remember that webdriver simulates the actual experience of an user using and clicking the website using a mouse, so if the element is not visible to them, they will not be able to click on it.

I wonder if your issue has to do with settingsLink not being in the DOM when the page is first loaded. If you are waiting for a dialog to popup and a link to live in this dialog, then you probably want to set something like

content{
   settingsLink( required: false ) { $( '...' }
   settingsModal( required: false ) { $( '#modalDialog' ) }
}

your waitfor should look something like

username.click()
waitFor{ settingsModal.displayed }
settingsLink.click()

I would stick with the book of geb conventions and just use displayed all the time.

Geb Manual - Determining visibility