ElementNotVisibleException due to multiple input elements - cucumber-jvm

Question

I have a geb-cucumber scenario which in some point tries to insert a string in an input field of a Frame.
The problem is that the frame has many identical inputs (!!) for some reason and looks something like
<input aria-labeledby="userid-label" aria-required="true" autocomplete="off" class="error input" tabindex="51" type="text" id="el3fd4c7bd50db061c" maxlength="48" aria-invalid="true" aria-describedby="gwt-uid-63">
<input aria-labeledby="userid-label" aria-required="true" autocomplete="off" class="error input" tabindex="51" type="text" id="el3fd4c7bd50db061c" maxlength="48" aria-invalid="true" aria-describedby="gwt-uid-63">
<input aria-labeledby="userid-label" aria-required="true" autocomplete="off" class="error input" tabindex="51" type="text" id="el3fd4c7bd50db061c" maxlength="48" aria-invalid="true" aria-describedby="gwt-uid-63">
In the Chrome devtools console if I give $("input[name=xxx]) it returns the elem and then keep throwing the following message
VM5451:1 Uncaught SyntaxError: Unexpected token # in JSON at position 0
at JSON.parse (<anonymous>)
at i (application-2a3801d….js:11)
this might be irrelevant as my purpose is to just get the element and insert a string into.
getArrayField(userIdField) << "aabbcc"
The getArrayField seems to try to workaround that but it doesnt really work.
The test fails with the following stacktrace
org.openqa.selenium.ElementNotVisibleException: element not visible
(Session info: chrome=60.0.3112.113)
(Driver info: chromedriver=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5),platform=Linux 4.11.12-200.fc25.x86_64 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 0 milliseconds
Build info: version: '3.5.2', revision: '10229a9', time: '2017-08-21T17:29:55.15Z'
System info: host: 'iob-4finance', ip: '192.168.175.6', os.name: 'Linux', os.arch: 'amd64', os.version: '4.11.12-200.fc25.x86_64', java.version: '1.8.0_131'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, chrome={chromedriverVersion=2.29.461571 (8a88bbe0775e2a23afda0ceaf2ef7ee74e822cc5), userDataDir=/tmp/.org.chromium.Chromium.2ksxEt}, takesHeapSnapshot=true, pageLoadStrategy=normal, unhandledPromptBehavior=, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=60.0.3112.113, platform=LINUX, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
Session ID: 85a17386757827e393d4f83772a88959
at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:215)
at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:167)
at org.openqa.selenium.remote.http.JsonHttpResponseCodec.reconstructValue(JsonHttpResponseCodec.java:40)
at org.openqa.selenium.remote.http.AbstractHttpResponseCodec.decode(AbstractHttpResponseCodec.java:82)
at org.openqa.selenium.remote.http.AbstractHttpResponseCodec.decode(AbstractHttpResponseCodec.java:45)
at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:164)
at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:82)
at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:641)
at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:275)
at org.openqa.selenium.remote.RemoteWebElement.sendKeys(RemoteWebElement.java:99)
at geb.navigator.NonEmptyNavigator$_leftShift_closure30.doCall(NonEmptyNavigator.groovy:448)
at geb.navigator.NonEmptyNavigator.leftShift(NonEmptyNavigator.groovy:447)
at geb.content.TemplateDerivedPageContent.leftShift(TemplateDerivedPageContent.groovy:27)
at com.ofg.loans.dk.at.web.site.pages.IdentificationPage.logIntoNemIdApp(IdentificationPage.groovy:40)
at com.ofg.loans.dk.at.web.site.pages.IdentificationPage$logIntoNemIdApp.call(Unknown Source)
at com.ofg.loans.dk.at.web.site.stepdefs.nemid.NemIdStepDefs$_run_closure3.doCall(NemIdStepDefs.groovy:47)
at ✽.And user logs into NemId from the webapp(com/at/web/features/.feature:13)
You can also reproduce the problem at https://service.nemid.nu/dk-en/#log_on_to_self-service which is the identification service used. I could use any help or direction to the proper solution. thanks

Answer 1

I don't see a name field in your sample HTML. But if there is a name field, try using this in the Chrome developer tools:
$("input[name='xxx']")
And this in Geb:
$("input", name: "xxx")
Also, it seems you might be using a # as part of the name. Make sure to escape the character with \#
Another option is if the elements are always in the same order, you can use the eq selector:
$("input[name='xxx']").eq(0)