Cannot set Input text field using AnglurJS and Geb

Question

I am using Grails and AngularJS in a webapp. To test, I am trying to use Geb (a groovy wrapper around selenium / webdriver).

I am having difficult setting an input text field.

Here is my pageclass.

class CartReviewPage extends Page {
    static url = "albert/tony"

    static content = {
        userNameField{$("input.yy-login-input.red-login-input")}
        ...
    }

    static at = {
        userNameField != null
        ...
    }

    void enterUsername() {
        userNameField.value("me@mail.com")
    }

}

Now, when my test is on this page, and invoked enterUserName(), I get: org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with

Now, I debug the code. When it enters enterUserName(), the userNameField variable in Eclipse debugger is:

userNameField - SimplePageContent (owner: CartReviewPage, args: [], value: )

Using firebug, the HTML of my input text box is:

<input id="timeout-d75b39e8-cb1d-451e-8850-4337e7fd191f-d-login-username" class="yy-login-input red-login-input" type="text" placeholder="User" autocorrect="off" autocapitalize="off">

I am beginning to think Angular has done some magic to stop me updating the value of the field. But I am really at a loss here. Any ideas or tips?

I am using Firefox driver:

def driver = new FirefoxDriver();

I can see a firefox open when the test runs, so all ok there.

Here is full stack trace:

Build info: version: '2.31.0', revision: '1bd294d185a80fa4206dfeab80ba773c04ac33c0', time: '2013-02-27 13:51:26'
System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.8.3', java.version: '1.6.0_51'
Session ID: 5acf64d6-8cd6-d146-bb9f-aea1db5c9c42
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox, rotatable=false, locationContextEnabled=true, version=23.0.1, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false, webStorageEnabled=true, applicationCacheEnabled=true, takesScreenshot=true}]
    at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:187)
    at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:145)
    at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:554)
    at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:268)
    at org.openqa.selenium.remote.RemoteWebElement.clear(RemoteWebElement.java:113)
    at geb.navigator.NonEmptyNavigator.setInputValue(NonEmptyNavigator.groovy:562)
    at geb.navigator.NonEmptyNavigator.setInputValues_closure34(NonEmptyNavigator.groovy:540)
    at geb.navigator.NonEmptyNavigator.setInputValues(NonEmptyNavigator.groovy:539)
    at geb.navigator.NonEmptyNavigator.value(NonEmptyNavigator.groovy:328)
    at geb.content.NavigableSupport.methodMissing(NavigableSupport.groovy:123)
    at com.me.CartReviewPage.enterUsername(CartReviewPage.groovy:23)
    at com.me.geb.spec.ViewProductGebSpec.viewing a product(ViewProductGebSpec.groovy:26)

Thanks!

score 2 · Answer 1 · answered Sep 15 '13 at 21:12

Sorry, this is not going to be that helpful, but it's the best I can do because I'm not familiar with geb.

On a side note, I'm using Protractor (https://github.com/angular/protractor) to test my Angular/Grails app - it is a JavaScript wrapper for WebdriverJS / Selenium all is working well.

Protractor is Angular aware, making life easier in many ways. For example, you can find inputs by the model they are bound to rather than by name - very nice since changing the control name will not break the test!

Anyway, to try to help with your question....

Is the control really visible? You can check visibility first to see if it really is visible.

Has Angular finished compiling and digesting the page? If not, the control may not be there at the time the call is executed.

score 2 · Answer 2 · answered Sep 30 '13 at 07:34

Well I am guessing but it appears that you use userNameField != null check when arrive on page but that does not mean that element is displayed so my assumption says that geb asserts that it is on page and tries to interact with your element while it is really not yet visible. Either try:

static at = {
    userNameField != null
    userNameField.displayed
    ...
}

or even:

void enterUsername() {
    waitFor {
        userNameField.displayed
    }
    userNameField.value("me@mail.com")
}

Cannot set Input text field using AnglurJS and Geb

2 Answers2