1

I am trying to automate a web app and there are several date fields where both keystrokes can be sent to type the date or one can click the calendar icon to pick a date from a calendar date picker.

Problem is, the date field just has one id, which works for send keystrokes. However, it doesn't invoke the actual calendar date picker.

The html looks like this:

<div class="form-group row">
            <label class="control-label col-md-2 font-weight-bold text-right" for="fromDate">FromDate</label>
            <div class="col-md-10">
                <input class="datepicker form-control text-box single-line" data-val="true" data-val-required="The FromDate field is required." id="FromDate" name="FromDate" type="date" value="">
                <span class="text-danger field-validation-valid" data-valmsg-for="FromDate" data-valmsg-replace="true"></span>
            </div>
        </div>

Looks something like this: enter image description here

I have tried using mouse.move() to just click on the calendar icon of the field using x and y coordinates but it hasn't worked very well. Is there a way so I can click the actual calendar icon to open it, sift through months and years and pick a date?

hungryhippos
  • 617
  • 4
  • 15
  • 1
    if you can point me to a live example I'll look at it - else there's plenty of existing threads on stack overflow you can look at: https://stackoverflow.com/a/60800181/143475 also see https://stackoverflow.com/search?q=%5Bkarate%5D+tree+walking – Peter Thomas Feb 07 '23 at 04:32
  • @PeterThomas best example I can find is probably here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date If you look at the first datepicker example on the page, you can see in the html that code doesn't discern from the input field vs the actual calendar (i.e if you locate by id, it doesn't just open up the calendar). I had already seen the first link you posted here and tried the examples, however, they didn't work. – hungryhippos Feb 07 '23 at 06:01

1 Answers1

1

You have to get into the "shadow DOM": https://stackoverflow.com/a/61742555/143475

To be honest I could not figure out how to open the calendar popup. I did not spend time on it. My opinion is as long as you can set the value and move on with your test, just do it. Testing the UI of the "native" date-picker is a waste of time. This is one of the reasons I strongly prefer API testing.

Anyway, I was able to get this example to work:

* driver 'https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-date.html'
* waitFor('#output').children[1].script("_.shadowRoot.querySelector('#start').value='2018-09-13'")
* delay(500)
* screenshot()

Yes Karate may need some built-in utilities for making Shadow DOM access easier. But it should be easy for you to write some of your own. Or contribute code.

EDIT: Note that the argument to script() is a plain old string so you can do string-concatenation to make it dynamic. Also refer: https://github.com/karatelabs/karate/tree/master/karate-core#karate-vs-the-browser

For example:

* def date = '2018-09-13'
* item.script("_.shadowRoot.querySelector('#start').value='" + date + "'")

And since everything is JavaScript behind the scenes you can use string-interpolation within backticks:

* def date = '2018-09-13'
* item.script(`_.shadowRoot.querySelector('#start').value='${date}'`)
Peter Thomas
  • 54,465
  • 21
  • 84
  • 248
  • 1
    thank you, this worked. I agree that UI validation of the actual datepicker is indeed a waste of time. – hungryhippos Feb 07 '23 at 21:55
  • Do you know of a way to pass variables inside the script with querySelector? I.e if instead of a static date, I wanted to send a variable that grabs today's date? So far my attempts have failed. I did see documentation elsewhere about css.escape but that wasn't it. – hungryhippos Feb 08 '23 at 04:59
  • 1
    @hungryhippos see my edit. this is the kind of stuff you can put into a reusable function once you know how – Peter Thomas Feb 08 '23 at 05:07
  • 1
    you are an absolute lifesaver. Thank you so much. – hungryhippos Feb 08 '23 at 05:14