0

Goal: Attempting to automate a calendar on Chrome using Selenium(Python + behave).

The issue: The date is only being set when actually clicked through the calendar. Passing a value via JavaScript is not working.

Note: According to docs the inputs should allow users to send input in with keys by default but that doesn't even work. It does not accept keyboard input at all.

Problem Walkthrough

  • This is the original input fields. The div class they are contained in is inside a #shadow-root (open):

enter image description here

  • Ignoring the Python. I will try and change the values with some simple JavaScript in the Chrome Dev Tools console:
    x = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for From Date
    x = "2022-05-12"
    y = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for To Date
    y = "2022-06-12"
  • After sending in the new values and clicking search. It does not recognize the values as being entered:

enter image description here

  • However, when manually selected through the calendar:

enter image description here

  • The dates are accepted and as inputs:

enter image description here

The HTML for the calendar is:

<input type="date" min="2022-01-01" max="2022-07-19">

Clearly. The JavaScript alone does not seem to be enough. If you use the same method above on this calendar it will work. However, on the calendar I am attempting this JS method will not work for some reason. Also, I cannot get Selenium to click and open the calendar on its own for some odd reason.

Crunchy
  • 186
  • 10
  • 1
    Without access to the real calendar I found very difficult try to help you, if possible please provide a minimum reproducible example of the issue. – ManuelMB Jul 19 '22 at 23:29
  • 1
    Try updating and/or adding the "value" attribute. (using execute_script() JS method) When you click search it should send that as the value. Ex: – pcalkins Jul 19 '22 at 23:50
  • @pcalkins Unfortunately I have tried exactly this. However, same result with it only moving being the search screen and accepting the input if manually selected with the calendar . – Crunchy Jul 20 '22 at 01:40
  • @ManuelMB Sadly its a local site. The Mozilla docs I linked have some examples. However, the one I am attempting to do it on seems to be an edge case. – Crunchy Jul 20 '22 at 01:48
  • 1
    Update the question with the text based relevant HTML of the element. – undetected Selenium Jul 20 '22 at 02:45
  • @undetectedSelenium okay. Please let me prepare the HTML then I will update the question. Would you like the HTML for the entire calendar so you can replicate the bug? – Crunchy Jul 20 '22 at 03:19
  • 1
    Yes, the calendar element including the parent of the **shadowRoot** element. – undetected Selenium Jul 20 '22 at 03:24
  • 1
    You probably need to dispatch a change event to the input. – pguardiario Jul 20 '22 at 12:25
  • @pguardiario Your right! That worked. Thank you. Source: https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript```let element = document.getElementById(id); element.dispatchEvent(new Event("change"));``` – Crunchy Jul 20 '22 at 18:01
  • @undetectedSelenium pguardiario was able to answer it before I got the chance to send HTML. Thank you so much for your replies though – Crunchy Jul 20 '22 at 18:41
  • @Crunchy Could you provide the full code that you finally used instead of: x = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for From Date x = "2022-05-12" y = document.querySelector("#class > something").shadowRoot.querySelector("div > div > input[type=date]:nth-child(5)") #Select input for To Date y = "2022-06-12" – ManuelMB Jul 20 '22 at 23:17
  • @ManuelMB https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript ```let element = document.getElementById(id); element.dispatchEvent(new Event("change")); ``` See the documentation here https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent and here https://developer.mozilla.org/en-US/docs/Web/API/Event/Event – Crunchy Jul 20 '22 at 23:50

1 Answers1

0

Solution: Manually trigger the event (Source)

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

dispatchEvent() Documentatio

Event() Documentation

Crunchy
  • 186
  • 10