In the previous blog post about Geb, we have been introduced to the Geb Framework. In this blogpost we will be introduced to Pages and Modules. A Page represents a specific page from a web application. A module represent a part of the page; for example a sign-up form, a menu bar or contact form. Pages and Modules are very useful since they are very easy to reuse and therefore useful to create more advanced UI tests. In this blogpost we are going to use Pages and Modules to test the contact form of the JDriven website. We will verify that a success message will appear if we submit a valid form. Pages have a url attribute which represent the address to the page. To get the complete url, Geb requires a baseUrl which we can define in the GebConfig.groovy

baseUrl = "http://www.jdriven.com/"

Since the contact form has a select form tag, we require an extra jar as Selenium dependency to handle select tags. Therefore we add the following dependency to our pom.xml.

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-support</artifactId>
    <version>2.45.0</version>
</dependency>

Next step is to define our ContactPage which extends from geb.Page. The static at attribute represents the condition for Geb to verify the browser is at the defined page.

class ContactPage extends Page {

   static url = "contact"

   static at = { heading.text() == "Contact" }

   static content = {
     heading { $("h2") }
     contactForm { module ContactFormModule }
   }
}

The static url string represents the suffix which will be added to the baseUrl to navigate to the Contact page. In the static closure content block we define our content which is on the Contact page. For the JDriven website we define for now the header and the contact form. As you can see there is a reference to the the ContactFormModule which is defined below. The mechanism to define module content is the similar to the way we define page content.

class ContactFormModule extends Module {

  static content = {
      nameInput{ $("#name") }
      emailInput { $("#from") }
      subjectSelect { $("#subject") }
      bodyTextArea { $("#body") }
      submitButton {$('#fsc-submit') }
  }

  void  fillInValidEntries() {
     nameInput.value("Geb spock test")
     emailInput.value("geb@dummytest.com")
     subjectSelect.value("Overige")
     bodyTextArea.value("Hi, I'm running the Geb spock test from the blog post")
  }

   void submitForm(){
     submitButton.click()
  }

}

Next step is to create our test class which is done below.

class ContactFormSpec extends GebReportingSpec {

   def "Navigate to contact form and fill in valid form"() {

      given:
      to ContactPage

      and:
      page.contactForm.fillInValidEntries()

      when:
      page.contactForm.submitForm()

      then:
      at ContactPage
      assert driver.currentUrl.endsWith("success=true")
      assert page.contains("Wij hebben uw bericht ontvangen. Wij nemen binnenkort met u contact op.")

   }

}

As we can see creating Pages and Modules in Geb is very easy and straightforward. The huge benefit we have now, is that we can easily reuse pages and modules in other tests. Written with Groovy 2.4.3.

shadow-left