Element Send Keys are not working with a custom React date text field

[jkretsch]

System

• Version: 1.19.1
• Platform: Windows 10
• Firefox: 76.0.1
• Selenium: 3.141.59
• Nightwatch: 1.3.4

Testcase

In my Nightwatch page object file I have a function defined like so ... findPharmacy: function(){ return this .setValue('@CITY', 'Little Rock') // .setValue('@STATE', 'Arkansas') // doesn't work in Firefox .sendKeys('@STATE', this.api.Keys.DOWN_ARROW) .sendKeys('@STATE', this.api.Keys.DOWN_ARROW) .sendKeys('@STATE', this.api.Keys.DOWN_ARROW) .sendKeys('@STATE', this.api.Keys.DOWN_ARROW) .click('@SEARCH_BUTTON') }, When I use the 'setValue' command the test fails. It appears that the characters 'A' 'r' 'k' etc are being sent one a time with enough delay between them that 'Rhode Island' or 'Kansas' ends-up getting selected rather than 'Arkansas'. To work around this, as shown, I use 'sendKeys' to arrow down to Arkansas rather than using the setValue command. I have no such problems in Chrome.

Stacktrace

Trace-level log

geckodriver.log

[whimboo]

Could you please attach a trace-level log from geckodriver? Read more about reporting actionable bugs in our contribution guidelines.

[jkretsch]

Could you please attach a trace-level log from geckodriver? Read more about reporting actionable bugs in our contribution guidelines.

I just added the trace level log.

[jkretsch]

Possibly related, setValue is not working on a date field in Firefox. Here's the Nightwatch test.js file ... module.exports = { 'Test setValue Command': (browser) => { browser .url('https://capitalrx.magellanrx.com/security/forgotpassword/') .setValue('#lastname', 'TESTTESTTEST') .setValue('#memberId', '123456789') .sendKeys('#memberId', browser.Keys.TAB) .setValue('#dob', '01/01/1901') .pause(5000) } }

[whimboo]

Can you please add a getValue() or how it is named call after trying to set Arkansas via setValue? I would like to know what exactly the value of the element is when the command returns.

Regarding the date, this is not a valid ISO format. You want to use 1901-01-01 instead. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for details.

[kretschmannj]

Can you please add a getValue() or how it is named call after trying to set Arkansas via setValue? I would like to know what exactly the value of the element is when the command returns.

Regarding the date, this is not a valid ISO format. You want to use 1901-01-01 instead. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for details.

I added getValue commands. Here's the full test ...

module.exports = {
  'Test setValue State Command': (browser) => {
    browser
      .url('https://ctdph.magellanrx.com/member/publicPharmacylocator')     
      .setValue('#inputPharmCity', 'Little Rock')
      .getValue('#inputPharmCity', (result) => {console.log('result', result)})
      .setValue('#selPharmState', 'Arkansas') // doesn't work in Firefox
      .getValue('#selPharmState', (result) => {console.log('result', result)})
      .pause(5000)
  }
}

... and the console output .... C:\git\portal-ui-tests>node nightwatch tests/setValue_test.js -e firefox NODE_ENV: prod

[Set Value Test] Test Suite

i Connected to localhost on port 4444 (2143ms). Using: firefox (77.0.1) on windows 10.0 platform.

Running: Test setValue State Command

result { value: 'Little Rock' } result { value: 'AL' } No assertions ran.

Trace log ... geckodriver.log

[kretschmannj]

Can you please add a getValue() or how it is named call after trying to set Arkansas via setValue? I would like to know what exactly the value of the element is when the command returns.

Regarding the date, this is not a valid ISO format. You want to use 1901-01-01 instead. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for details.

Also, re: the date field, the field is actually type="text" so the ISO format of "1901-01-01" doesn't work ... <input class="form-control amt_forgot_txt_dob" placeholder="MM/DD/YYYY" name="dob" id="dob" type="text" label="Date of Birth" autocomplete="off" autocorrect="off" spellcheck="off" value="" xpath="1">

Here's my test along with the output for the date field ...

module.exports = {  
  'Test setValue Date Command': (browser) => {
    browser
      .url('https://capitalrx.magellanrx.com/security/forgotpassword/')
      .setValue('#lastname', 'TESTTESTTEST')
      .setValue('#memberId', '123456789')
      .sendKeys('#memberId', browser.Keys.TAB) // won't work without this
      .setValue('#dob', '01/01/1901') // doesn't work in Firefox
      .getValue('#dob', (result) => {console.log('result', result)})
      .pause(5000)
  }
}

C:\git\portal-ui-tests>node nightwatch tests/setValueDate_test.js -e firefox NODE_ENV: prod

[Set Value Date Test] Test Suite

i Connected to localhost on port 4444 (2145ms). Using: firefox (77.0.1) on windows 10.0 platform.

Running: Test setValue Date Command

result { value: '//____' } No assertions ran.

[kretschmannj]

I have some more information on the date field issue. I created a function that will enter one character at a time and I found that as soon as I try to enter a character into the first position the cursor immediately jumps to the end of the field and I'm no longer able to enter any more characters. However, if I then send the 'LEFT_ARROW' key several times to get the cursor back to the second position in the field, I'm then able to enter values and I end up with this _1/01/1901. Again, this is in Firefox only. Chrome works perfectly fine without all of this nonsense.

[kretschmannj]

Has anyone been able to look into this issue? I'm now on Firefox version 79.0 and I'm still unable to use the setValue command to select the correct State from a dropdown list.

[jkretsch]

Has anyone been able to look into this issue? I'm now on Firefox version 80.0 and I'm still unable to use the setValue command to select the correct State from a dropdown list or to set a date value.

[KapustinMaxim]

Has anyone been able to look into this issue? I'm now on Firefox version 80.0 and I'm still unable to use the setValue command to select the correct State from a dropdown list or to set a date value.

https://github.com/nightwatchjs/nightwatch/issues/2490

[kretschmannj]

@whimboo Any more information on this issue?

[KapustinMaxim]

module.exports = { '@tags': ['master'],

'TC1351 step 1' : function (browser) {

browser
  .maximizeWindow()
  .url('https://www.google.ru/imghp?hl=ru&tab=wi&authuser=0&ogbl')
  .click('.BwoPOe')
  .click('.H4qWMc:nth-child(2)')
  .setValue('#awyMjb','d:/yp.png')

  .end();

},

};

error

Running: TC1351 step 1

Response 500 POST /wd/hub/session/0821360b-2abe-43b8-82fb-90828b69a18d/element/9a13d344-9760-4842-80f8-fa6d124eac14/value (45ms) { state: 'invalid argument', sessionId: null, class: 'org.openqa.selenium.remote.Response', value: { additionalInformation: '\nDriver info: driver.version: unknown', localizedMessage: 'File not found: d:/yp.png\n' + "Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'\n" + "System info: host: 'S81', ip: '192.168.0.102', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_261'\n" + 'Driver info: driver.version: unknown', supportUrl: null, systemInformation: "System info: host: 'S81', ip: '192.168.0.102', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_261'", cause: null, suppressed: [], message: 'File not found: d:/yp.png\n' + "Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'\n" + "System info: host: 'S81', ip: '192.168.0.102', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_261'\n" + 'Driver info: driver.version: unknown', class: 'org.openqa.selenium.InvalidArgumentException', buildInformation: null }, status: 61 } Error while running .setElementValue() protocol action: File not found: d:/yp.png

FAILED: 1 errors (2.834s)

---

TEST FAILURE: 1 error during execution; 0 tests failed, 0 passed (11.179s)

× temp – TC1351 step 1 (2.834s)

TimeoutError: An error occurred while running .setValue() command on <#awyMjb>: {"status":-1,"code":"","state":"invalid argument","value":{"additionalInformation":"\nDriver info: driver.version: unknown","localizedMessage":"File not found: d:/yp.png\nBuild info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'\nSystem info: host: 'S81', ip: '192.168.0.102', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_261'\nDriver info: driver.version: unknown","supportUrl":null,"systemInformation":"System info: host: 'S81', ip: '192.168.0.102', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_261'","cause":null,"suppressed":[],"message":"File not found: d:/yp.png\nBuild info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'\nSystem info: host: 'S81', ip: '192.168.0.102', os.name: 'Windows 7', os.arch: 'x86', os.version: '6.1', java.version: '1.8.0_261'\nDriver info: driver.version: unknown","class":"org.openqa.selenium.InvalidArgumentException","buildInformation":null},"errorStatus":61,"error":"File not found: d:/yp.png","httpStatusCode":500} at processTicksAndRejections (internal/process/task_queues.js:97:5)

npm ERR! code ELIFECYCLE npm ERR! errno 5 npm ERR! nightwatch-example@1.3.6 test:ffox: nightwatch -e firefox npm ERR! Exit status 5 npm ERR! npm ERR! Failed at the nightwatch-example@1.3.6 test:ffox script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[whimboo]

  .url('https://capitalrx.magellanrx.com/security/forgotpassword/')

For reference this is a website powered by React. We know that this can cause problems given that this framework runs a lot of custom Javascript via various events on elements. I'm able to see this with a pure Marionette test:

        self.marionette.navigate("https://capitalrx.magellanrx.com/security/forgotpassword/")
        time.sleep(5)
        self.marionette.find_element(By.CSS_SELECTOR, "#lastname").send_keys("TESTTESTTEST")
        self.marionette.find_element(By.CSS_SELECTOR, "#memberId").send_keys("123456789" + Keys.TAB)
        time.sleep(1)
        self.marionette.find_element(By.CSS_SELECTOR, "#dob").send_keys("01011901'")

@kretschmannj and @jkretsch, sadly we we do not have the bandwidth right now to check that. Sorry.

@KapustinMaxim your issue is unrelated to this issue given that the file you want to upload doesn't exist on your local drive. If there are still problems even when the file exists, please file a different issue.

[kretschmannj]

After months of frustration with this not working I finally put my head down and figured out a workaround ...

                this.api.execute(function(){ // workaround to set the date field in Firefox
                    return document.evaluate("//input[@name='startDate']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.value = "12/18/2020"
                }, [], function(result) {
                    console.log("result", result)
                })

Unfortunately, this only works for some but not all of the date fields in our application. I found another solution that works ...

.sendKeys('@MEMBER_ID_REG', this.api.Keys.TAB + "01011901")

So simple, I don't know why I didn't think of this sooner. Simply sending 'TAB' + the date string to the previous field in the form (the MEMBER_ID field in this case) sets the date value correctly.

[whimboo]

As it looks like the originally reported test page doesn't exist anymore. Does someone has another URL or small test case where it can be reproduced?

[whimboo]

I'm closing the issue for now but I'm happy to reopen in case someone can provide a test case for this scenario.