Use Selenium in Java to click on field generated by Javascript

Question

I have a problem where I click on an element in a web page, it then creates a section of code which allows you as a user to click and enter and amount. However, when I'm trying to automate this with Selenium I cannot get access to these new elements. if I simply do :

driver.findElements(By.cssSelector("id^=field"));

It throws this exception :

Exception in thread "main" org.openqa.selenium.WebDriverException: unknown error: Cannot set property 'name' of undefined

If I look at the pageSource after clicking on the element the newly generated html is there and I can see which id's I'd need to search for. Any help would be hugely appreciated.

EDIT :

Code used to find and click on the element which activates the javascript :

List<WebElement> buttons = element.findElements(By.cssSelector("[id^=fieldButtons]"));
for (WebElement element : buttons) {
    element.click();
    // Here is where I want to then access the field and enter data.
}

Here's the full stack trace when using :

new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.cssSelector("id^=field")));


Starting ChromeDriver 2.27.440175 (9bc1d90b8bfa4dd181fbbf769a5eb5e575574320) on port 18209
Only local connections are allowed.
Mar 10, 2017 7:13:26 AM org.openqa.selenium.support.ui.ExpectedConditions findElement
WARNING: WebDriverException thrown by findElement(By.cssSelector: id^=field)
org.openqa.selenium.WebDriverException: unknown error: Cannot set property 'name' of undefined
(Session info: chrome=56.0.2924.87)
(Driver info: chromedriver=2.27.440175 (9bc1d90b8bfa4dd181fbbf769a5eb5e575574320),platform=Linux 4.4.8-040408-generic x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 35 milliseconds
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, chrome={chromedriverVersion=2.27.440175 (9bc1d90b8bfa4dd181fbbf769a5eb5e575574320), userDataDir=/tmp/.org.chromium.Chromium.89aRVC}, takesHeapSnapshot=true, pageLoadStrategy=normal, databaseEnabled=false, handlesAlerts=true, hasTouchScreen=false, version=56.0.2924.87, platform=LINUX, browserConnectionEnabled=false, nativeEvents=true, acceptSslCerts=true, locationContextEnabled=true, webStorageEnabled=true, browserName=chrome, takesScreenshot=true, javascriptEnabled=true, cssSelectorsEnabled=true, unexpectedAlertBehaviour=}]
Session ID: 75f1b0b4a60c26c1d9ec0bac0e4fa0e4
*** Element info: {Using=css selector, value=id^=field}
at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
at org.openqa.selenium.remote.ErrorHandler.createThrowable(ErrorHandler.java:206)
at org.openqa.selenium.remote.ErrorHandler.throwIfResponseFailed(ErrorHandler.java:158)
at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:678)
at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:363)
at org.openqa.selenium.remote.RemoteWebDriver.findElementByCssSelector(RemoteWebDriver.java:492)
at org.openqa.selenium.By$ByCssSelector.findElement(By.java:430)
at org.openqa.selenium.remote.RemoteWebDriver.findElement(RemoteWebDriver.java:355)
at org.openqa.selenium.support.ui.ExpectedConditions.findElement(ExpectedConditions.java:899)
at org.openqa.selenium.support.ui.ExpectedConditions.access$000(ExpectedConditions.java:41)
at org.openqa.selenium.support.ui.ExpectedConditions$7.apply(ExpectedConditions.java:205)
at org.openqa.selenium.support.ui.ExpectedConditions$7.apply(ExpectedConditions.java:201)
at org.openqa.selenium.support.ui.ExpectedConditions$22.apply(ExpectedConditions.java:653)
at org.openqa.selenium.support.ui.ExpectedConditions$22.apply(ExpectedConditions.java:646)
at org.openqa.selenium.support.ui.FluentWait.until(FluentWait.java:238)
at webScrape.findFieldToFill(webScrape.java:215)
at webScrape.<init>(webScrape.java:26)
at Main.main(Main.java:6)

Answer 1

Have you tried to use JavascriptExecutor to enter the amount and perform user click. For me it helps when I could not successfully click or enter value using driver.click() or driver.sendKeys()

For example something like this

    List<WebElement> buttons = element.findElements(By.cssSelector("[id^=fieldButtons]"));
    for (WebElement element : buttons) {
       element.click();
       Thread.sleep(2000) //sometimes I use thread sleep for simple wait condition
       ((JavascriptExecutor) driver).executeScript("document.getElementById(\"field\").setAttribute('amount','" + amount + "');");
       ((JavascriptExecutor) driver).executeScript("document.getElementById(\"button\").click();"); 
    }