0

I am trying to automate Html date-picker with Selenium using Java. After no working help, I am posting here.
I was able to enter the date value, after some effort with JavascriptExecutor like-

((JavascriptExecutor)driver).executeScript("arguments[0].value=arguments[1]", driver.findElement(By.id("startDate")), "2020-12-10");

But after clicking on the submit button when the entire form object ships to the backend API,
startDate value is missing in that object, btw it shows as an empty string i.e (startDate: " ").
The same happens with endDate element too. All other elements values are populated like numeric, string, email etc.
The date element is described as(<TextInput.> is from react-bootstrap4-form-validation)-

<TextInput type="date" id="startDate" className="form-control date-picker" name="startDate" required={true}
            min={this.state.min} max="2021-12-31" onChange={(e) => this.handleInputChanges(e)} />

The markup after inspecting element is...(min is current date)

<input class="form-control date-picker" id="startDate" type="date" min="2020-12-09" name="startDate" max="2021-12-31" required="">

The handleInputChanges() method is implemented as (in ReactJS)

private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.setState({
  [e.currentTarget.name]: e.currentTarget.value,
});
};

Note: 1- Should I invoke onchange on WebDriver, if yes how. If no plz suggest something.
2- when the script is running I can see the successful date entry in the respective fields.

CodeWorld
  • 2,017
  • 1
  • 11
  • 21
  • At javascript command, place `arguments[1]` between `"`: `"arguments[0].value=\"arguments[1]\""`. And are you sure the date-value is hold as attribute `value` of `textinput`? – KunLun Dec 08 '20 at 15:56
  • @KunLun hi, upon applying double quote, UI date field element is not populated itself – CodeWorld Dec 08 '20 at 16:08
  • Include markup when you right-click and choose "Inspect". It's probably " – pcalkins Dec 08 '20 at 20:28
  • You might also trigger the change event yourself. See this post: https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually – pcalkins Dec 08 '20 at 20:32
  • @pcalkins I have included markup, plz have a look. min value is always today's date – CodeWorld Dec 09 '20 at 03:11
  • @pcalkins I tried to execute this after JSExecutor statement, but no help. jsExecutor.executeScript("document.querySelector('#startDate').dispatchEvent(new CustomEvent('change'))"); – CodeWorld Dec 09 '20 at 04:58
  • maybe see this thread: https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js – pcalkins Dec 09 '20 at 18:12
  • thinking on this further, I think you may have a real problem here if it's the browser's native control for date-picker. When the onchange event fires, the javascript gets the "value", but it may be also updating the value according to what is inside of the input box (effectively over-writing your update on the value attribute.) sendKeys() may not be working because of focus loss when typing in that field. (if it updates per keyup... the problem is that 'onchange' is a hack to allow for dynamic update for a control that has no "committed change" event.) – pcalkins Dec 09 '20 at 19:31
  • compounding the issue is that Edge, Firefox and Chrome all have different native controls here. For instance Edge's control doesn't allow for any typing, while Chrome does and segments this in month/date/year... they will also be different (I think) depending on your OS's region settings.... (ultimately converting to a standard datetime format?) The interface is native and outside of the DOM so Selenium can't really get at it. See this post for various solutions to try: https://stackoverflow.com/questions/21295314/how-to-set-html5-type-date-input-fields-e-g-in-chrome-using-selenium-protra – pcalkins Dec 09 '20 at 19:43
  • In particular, I would try the solution that uses standard datetime in your execute_script call: new Date(2016, 2, 7)).toLocaleDateString() Then trigger the onchange. – pcalkins Dec 09 '20 at 19:48

0 Answers0