How to submit a form in Geb (WebDriver) that has no submit button

Question

I'm building up a test in Geb (WebDriver) that has the need to work with a form that has no submit button. From the user's perspective, it is as simple to use as typing in the search term and hitting the enter key on their keyboard.

Using Geb in a purely script form I can get around this by appending the special key code to the text being typed in, as seen in the following:

import org.openqa.selenium.Keys

$('input[id=myInputField]') << "michael"+Keys.ENTER

That works fine. But if I want to use Geb's recommended Page Object pattern (http://www.gebish.org/manual/0.7.1/pages.html#the_page_object_pattern), I don't see what I should do. What do I define in the content section of my EmployeeSearchPage object to duplicate the missing searchButton and its "to" object reference that tells Geb how to handle the resulting page?

class EmployeeSearchPage extends Page {
    static url = "http://localhost:8888/directory/"
    static at = { title == "Employee Directory" }
    static content = {
        searchField { $("input[id=myInputField]") }
        // THE FOLLOWING BUTTON DOESN'T EXIST IN MY CASE
        searchButton(to: EmployeeListPage) { $("input[value='SUBMIT']") }
    }
}

I realize that I could add a submit button to the form that I could for the test and use CSS to position it out of the user's view, but why should I have to adapt the app to the test? Things should work the other way around.

I've been evaluating a lot of web testing frameworks and find that this type of form presents a problem for many of them - at least as far as their documentation is concerned.

Any ideas? Thanks!

Answer 1

You don't need to use js integration to achieve what you want.

You can also define methods on your page class, not only content. You could implement a submit method that would do what you are looking for in the following way:

class EmployeeSearchPage extends Page {
    static url = "http://localhost:8888/directory/"
    static at = { title == "Employee Directory" }
    static content = {
        searchField { $("input[id=myInputField]") 
    }

    void submitForm() {
        searchField << Keys.ENTER
        browser.page EmployeeSearchResultsPage
    }
}

and then to use it:

to EmployeeSearchPage
searchField << 'michael' // searchField = 'michael' would have the same effect
submitForm()

Answer 2

Geb provides support to execute JavaScript in the context of the browser, details can be found here in the Geb documentation.

You could use this to submit the form exactly like you would submit it using JavaScript in the webapp itself. For example, if you are using jQuery it would be as simple as:

js.exec('$("#myForm").submit()')