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

[devinfd]

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.

[dorellango]

Another solution is use the keys() method

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

Laravel Dusk Doc.

[thijsvdanker]

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 (#125) to allow typing into a field without clearing it, but I'm not sure if that's the way to go.

[driesvints]

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

[georaldc]

Tested this just now and it works for me, but my setup works through selenium and firefox. I could never get chromedriver to work on centos 6

[leewillis77]

Hmm, maybe just a ChromeDriver issue then? If someone can confirm then happy to report this elsewhere?

[devinfd]

@devdorego I tried use the keys method but every time it would misconfigure the date. Maybe you found a reliable way?

->keys('#date', '2017-03-01')

[leewillis77]

@devinfd If you look at my original report I gave an example of how keys() can be used as a workaround.

[devinfd]

Follow up, I just end up creating a macro for this:

use Laravel\Dusk\Browser;

Browser::macro('typeDate', function ($selector, $year, $month, $day) {
    $this->keys($selector, $day)
        ->keys($selector, $month)
        ->keys($selector, $year);

        return $this;
});

$this->browse(function ($browser) use ($user) {
    $browser->loginAs($user)
        ->visit("/somepage")
       ->typeDate('#some_date', '2017', '04', '11');
});

The problem with this is that its depended on the users system date format. Ie: the date may not be displayed in day/month/year format.

[Zhythero]

@devinfd
Replace

->keys('#date', '2017-03-01')

with

->keys('#date', '20170301') // omit the dashes

[devinfd]

Yea I actually started doing it that a few weeks ago. Devin Dombrowski [email protected]

…

On May 5, 2017, at 1:00 AM, Kenth John ***@***.***> wrote: @devinfd <https://github.com/devinfd> Replace ->keys('#date', '2017-03-01') with ->keys('#date', '20170301') // omit the dashes — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#104 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAclrwhcYT27t_LHaqFilJelbVgWaunWks5r2tctgaJpZM4L4WdY>.

[driesvints]

Closing this issue because it's already solved, old or not relevant anymore. Feel free to reply if you're still experiencing this issue.

[driesvints]

Hmm I can actually reproduce this. Unfortunately since this is related to the ChromiumDriver it's not really a Dusk issue. I can however re-send a the PR that was closed but with a different method. I'll try to do that soonish but feel free to send one in before me.

[devinfd]

I ultimately resolved this by not using an input[type="date"] field. Partly because of this issue but also my users were complain about the browser venders date UI.

[amiranagram]

This worked perfectly fine for me with Chromium driver:

use Carbon\CarbonInterface;
use Facebook\WebDriver\WebDriverKeys;
use Illuminate\Support\Carbon;
use Laravel\Dusk\Browser;

Browser::macro('inputDate', function ($selector, $date) {
    $date = $date instanceof CarbonInterface ? $date : Carbon::parse($date);

    $this->resolver->findOrFail($selector)
        ->sendKeys([
            $date->format('d'),
            $date->format('M'),
            WebDriverKeys::TAB,
            $date->format('Y'),
        ]);

    return $this;
});

$browser
    ->inputDate('@date', $tomorrow = now()->addDay())
    ->assertInputValue('@date', $tomorrow->format('Y-m-d'))