title: In Geb, what is the difference between displayed and present?
body: <p>I am writing functional tests and dealing with a modal window that fades in and out.</p>
  
  <p>What is the difference between displayed and present?</p>
  
  <p>For example I have:</p>
  
  <pre><code>settingsModule.container.displayed and settingsModule.container.present
  </code></pre>
  
  <p>where settingsModule represents my modal window.</p>
  
  <p>When testing my modal window (the modal from Twitter's bootstrap), I usually do this:</p>
  
  <pre><code>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()
      }
  </code></pre>
  
  <p>and on and on. In my modules, I have:   </p>
  
  <pre><code>    void openSettingsModal() {                  
          username.click()
          settingsLink.click()            
      }
  
  void closeSettingsModal() {
          form.cancel().click()       
      }
  </code></pre>
  
  <p>I always get a complain: "Element must be displayed to click".</p>
  
  <p>In my openSettingsModal and closeSettingsModal, i tried many combination of waitFor with time interval and using present or not ... Can't figure it out. </p>
  
  <p>Any pointers would be highly appreciated. Thanks!</p>