dusk: Can't type() into date input fields

I’m trying to fill in a form that has a date field in it. Note that this is a plain HTML5 date field, no JS datepickers or anything to complicate matters, e.g.

<input class="form-control" name="walk_date" type="date" id="walk_date">

Trying to input into that field in a dusk test using type() fails. Sample code:

$browser->type('walk_date', '01-02-2017')

Results in the following exception:

Facebook\WebDriver\Exception\InvalidElementStateException: invalid element state: Element must be user-editable in order to clear it.
  (Session info: chrome=55.0.2883.95)
  (Driver info: chromedriver=2.27.440174 (e97a722caafc2d3a8b807ee115bfb307f7d2cfd9),platform=Mac OS X 10.12.3 x86_64)

/vendor/facebook/webdriver/lib/Exception/WebDriverException.php:112
/vendor/facebook/webdriver/lib/Remote/HttpCommandExecutor.php:321
/vendor/facebook/webdriver/lib/Remote/RemoteWebDriver.php:597
/vendor/facebook/webdriver/lib/Remote/RemoteExecuteMethod.php:40
/vendor/facebook/webdriver/lib/Remote/RemoteWebElement.php:66
/vendor/laravel/dusk/src/Concerns/InteractsWithElements.php:154
/tests/MhbHelpers.php:21

I’m currently working around this using keys(), but it seems like this should be fixed - or at least documented.

Example workaround

 $browser 
     ->keys('#walk_date', '{backspace}')
     ->keys('#walk_date', $walkDate->format('d'))
     ->keys('#walk_date', '{backspace}')
     ->keys('#walk_date', $walkDate->format('m'))
     ->keys('#walk_date', '{backspace}')
     ->keys('#walk_date', $walkDate->format('Y'))

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 15 (8 by maintainers)

Most upvoted comments

fyi; as a work around I have been use the script method to set the date. It’s annoying but it works.

$this->browse(function ($browser) use ($user) {
    $browser->loginAs($user)
        ->visit('/sompage')
        ->script([
            "document.querySelector('#the_date_field').value = '2017-02-23'",
        ]);

    $browser->{do other stuff}
});

One thing to keep in mind is that script does not return the $browser instance so it needs to be terminated and the browser variable recalled.

+12

devinfd on Feb 23, 2017

Another solution is use the keys() method

keys('.selector', 'datetotype');

Laravel Dusk Doc.

dorellango on Mar 1, 2017

Just found out there’s already a method for this: append.

driesvints on Nov 27, 2018

It looks like this issue has been around for at least 3 years: http://stackoverflow.com/questions/15360362/clear-date-input-fails-on-chromewebdriver

I’ve created a PR (https://github.com/laravel/dusk/pull/125) to allow typing into a field without clearing it, but I’m not sure if that’s the way to go.

thijsvdanker on Feb 15, 2017