Fork me on GitHub

30 Nov 2010

Encapsulating page state and actions in Geb

Geb Page and Module classes are just regular Groovy classes. In addition to the content DSL you can declare methods just as you would in any other class. Those methods can use content properties directly. This is really useful for encapsulating state and actions in a reusable way.

In this post I want to run through a couple of simple examples of re-usable Module classes that are enhanced with methods. Although the examples deal with Module classes everything here is equally applicable to Page classes.

Page object methods tend to fall into two categories:

Observers
report on some aspect of page state (e.g. whether a user is logged in or not).
have non-void return types (I prefer explicit return types on methods but def would work too).
can be used for making assertions.
Actions
perform an action such as clicking a link or button.
will typically be void (note that it's not necessary to return a Page instance or class from a navigation method in Geb).
throw IllegalStateException if the action is invalid in the current page state.

First let's consider an authentication module that can be used across every page in a site. The markup of the module can be completely different depending on whether a user is logged in or not. When not logged in a username/password form is shown:

<aside id="auth"> 
    <fieldset> 
        <legend>Log In</legend> 
        <form action="/auth/login" method="post" > 
            <label>Username: <input name="username"/></label> 
            <label>Password: <input type="password" name="password"></label> 
            <button name="login" type="submit">Log In</button> 
        </form> 
    </fieldset> 
</aside> 

When logged in, a welcome message is shown:

<aside id="auth"> 
    Welcome back <span class="username">blackbeard</span> 
    <a href="/auth/logout" name="logout">Log Out</a> 
</aside>

To model this I'll create a Geb Module like this:

class AuthModule extends Module {
    static base = { $("aside#auth") }

    static content = {
        username(required: false) { $(".username").text() }
        logoutButton(required: false, to: HomePage) { $("a[name=logout]") }
        form(required: false) { $("form") }
        loginButton(required: false, to: HomePage) { $("button[name=login]") }
    }
}

The required: false declaration is used to declare content properties that may or may not be on the page. The username and logoutButton properties are only present in the logged-in state and the form and loginButton properties are only present in the logged-out state.

I can use the module in some tests like this:

def "user can log in"() {
    when:
    authModule.form.username = "blackbeard"
    authModule.form.password = "yohoho!"
    authModule.loginButton.click()

    then:
    at HomePage
    authModule.username == "blackbeard"
}

def "user can log out"() {
    when:
    authModule.logoutButton.click()

    then:
    at HomePage
    authModule.username == null
}

This is a good start but there are several assumptions and bits of page detail creeping into the test. The test is using the presence or absence of the username to determine if someone is logged in or not. That doesn't lead to a very meaningful assertion in the test and is assuming things about the page detail. Likewise the login step is quite long-winded and likely to be repeated in a lot of tests. Not only that but it won't work if a user is already logged in as the form fields won't be present on the page.

To encapsulate the module's state and actions better I'll add the following methods:

boolean isLoggedIn() { username }

void login(String username, String password = "password") {
    if (loggedIn) throw new IllegalStateException("already logged in")
    form.username = username
    form.password = password
    loginButton.click()
}

void logout() {
    if (!loggedIn) throw new IllegalStateException("already logged out")
    logoutButton.click()
}

The methods declared by the module abstract some detail away very effectively. The isLoggedIn method means I can change the login detection mechanism later and just change the module's method rather than a bunch of tests. The login and logout methods abstract away the how of logging in and out so the test can just deal with the what. I've used IllegalStateException for cases where a method is called when the module is not in the correct state. The tests now look much clearer:

def "user can log in"() {
    when:
    authModule.login "blackbeard"

    then:
    at HomePage
    authModule.username == "blackbeard"
}

def "user can log out"() {
    when:
    authModule.logout()

    then:
    at HomePage
    !authModule.loggedIn
}

Another good example of encapsulating state and behaviour like this is a typical pagination module that would appear on a list or search results page. The markup would look something like this (I've omitted the link href attributes for clarity):

<nav class="pagination">
    <a class="prevLink">Previous</a>
    <a class="step">1</a>
    <span class="currentStep">2</span>
    <a class="step">3</a>
    <a class="nextLink">Next</a>
</nav>

The previous and next links will only appear when there is a previous or next page and no links will be present at all if there is only a single page. The following Module class models the state and actions of this component:

class Pagination extends Module {
    static content = {
        links(required: false) { $("a") }
        currentPage(required: false) { $(".currentStep")?.text()?.toInteger() ?: 1 }
        nextLink(required: false) { links.filter(".nextLink") }
        previousLink(required: false) { links.filter(".prevLink") }
    }

    boolean isFirstPage() {
        previousLink.empty
    }

    boolean isLastPage() {
        nextLink.empty
    }

    void toPage(int pageNumber) {
        def link = links.filter(text: "$pageNumber")
        if (!link) throw new IllegalArgumentException("Page number $pageNumber not present in pagination")
        link.click()
    }

    void nextPage() {
        if (lastPage) throw new IllegalStateException("Already on the last page")
        nextLink.click()
    }

    void previousPage() {
        if (firstPage) throw new IllegalStateException("Already on the first page")
        previousLink.click()
    }
}

Breaking the Module down in detail:

  • The currentPage property returns the current page number as an int and defaults to 1 if there is no pagination present in the page.
  • The isFirstPage and isLastPage observer methods use the absence of the previous and next links respectively to determine if the current page is the first or last one.
  • The toPage method finds a numbered link and clicks it, throwing IllegalArgumentException if no such link is present.
  • The nextPage and previousPage action methods throw IllegalStateException if the relevant link is not on the page.

The Pagination class now neatly encapsulates the detail of the pagination elements and presents a higher-level façade to the tests.

Fuller versions of the examples in this post can be found on GitHub.

8 comments:

Unknown said...

Hi Rob,

Just referenced this post on Stack Overflow. You might be able to add some more clarity to the solution

Thanks

Matt

Unknown said...

Have gathered plentiful knowledge related to the long run trade encapsulation services through this share. Present buyers need the most premium features in their each service, so the firm should all the time prepared for this.

Linda Rose said...

Thanks for sharing the information. It is very useful for my future. keep sharing
Run 3 | Stick Run 2 | Return Man 2
Run 2 | Stick Run | Return Man | run 3 game | run 3 unblocked | Tank Trouble | Tank Trouble 2
Papa's Bakeria | Papa Bakeria | Five nights at Freddy's | Five nights at Freddy's 4

Unknown said...


Article really helpful and wonderful. Thanks for sharing. You can visit my website
square quick, square quick, square quick, square quick, square quick, square quick, square quick, square quick, square quick, square quick

Quba Khan said...

Here we go with the Latest Govt jobs 2017 -2018 ( 3,18,200 Sarkari Naukri jobs openings. Government Jobs 2017-18: Get notification of all Government Jobs, Sarkari Naukri recruitment, bank jobs, State Govt jobs including SSSB, SSC, PSC, UPSC etc. Latest 10th 12th Pass Govt Jobs 2017 – 2018(62000 Sarkari) records.
Lest talk the latest 10th 12th Pass Govt Jobs 2017 – 2018(62000 Sarkari Vacancies Opening .... Latest Govt jobs 2017 -2018 ( 3,18,200 Sarkari Naukri jobs openings ). Sarkari Naukri 2017, सरकारी नौकरी, Government Jobs. Sarkari Naukri provide employment news of sarkari naukri 2017 for government jobs. Sarkari Naukri update latest job news for govt sector companies - 2017. Sarkari Naukri: Latest Govt Jobs, Sarkari Job, सरकारी ... - Amar Ujala Translate this pageबुधवार, 22 नवंबर 2017; +. सतीश धवन स्पेस सेंटर में टेक्नीशियन/ ड्राफ्ट्समैन के पद पर वैकेंसी • पॉलीटेक्निक के 89 स्टूडेंट्स. Sarkari Naukri in India 2017 | सरकारी नौकरी भारत में
Looking to get Sarkari Naukri? Check सरकारी नौकरी in India. Latest updates on 10000+ vacancies opportunity. You can apply online or offline. Upcoming Government Jobs 2018 ( 2,77000 Sarkari Naukri Opening). Jump to Jharkhand Staff Selection Commission recruitment 2017 - HP Police Recruitment 2017 – 1073 ... Govt Jobs (Sarkari Naukri 2018). Sarkari Naukri in Rajasthan Govt Jobs in Rajasthan Vacancy 2017. Latest Government Jobs in Rajasthan 2017 For Sarkari Naukri in Rajasthan and Current Vacancy in Jaipur, Udaipur, Jodhpur, Bikaner. Sarkari Naukri 2018 सरकारी नौकरी Sarkari Jobs Naukari. Sarkari Naukri Daily is Top Sarkari Job Portal and sarkari naukri 2017 for Banking, Railway Naukari, Public Sector, Research Sarkari Naukri 2018 in India. ... Top Current Affairs For Sarkari Naukri Preparation 22 November 2017 • Latest Government Jobs 2018-2019 | THE SARKARI NAUKRI. Oct 18, 2016 - We have listed here the latest Sarkari Naukri / Government Jobs with Number ... BPSC, Assistant Engineer, 1345 posts, 06.12.2017, Click Here. Police Jobs 2018 | THE SARKARI NAUKRI. Chhattisgarh Police Recruitment 2017 – 2976 posts of Constable (GD) and ... Here we have listed Jobs / Sarkari Naukri in Police Department of various Indian

Unknown said...

Great info latina movies

seo company said...

Fast Social Follower will help you increase your visiliblty on social media platform such as Buy Facebook Followers

Ideal Assignment Help said...

Our specialists in engineering subjects at Ideal Assignment Help are capable of giving world category, however affordable assignment facilitate service for engineering students from Australia as well as everywhere the world in completing their engineering assignments, numerical, essays, projects. IdealAssignmentHelp specialists of Engineering Assignment Help team are committed to deliver assignments even when a student is faced with the tight of point in time.