type method not working as expected when called on single instance twice

AhmadWaleed commented 5 years ago

I updated dusk to 4.0.4 and i found that dusk is not clearing input even if i use clear or call type method again on a single instance it just append to previous typed text

staudenmeir commented 5 years ago

Please add your code.

AhmadWaleed commented 5 years ago

$this->browse(function (Browser $browser) use ($faker) {
                ->click('@plan-bronze-heading')
                ->assertVisible('@card_number')
                ->type('@card_number', 'xxxxxxxxxxxxxxx')// not supported card
                ->type('@card_holder_name', $faker->name('male'));
            $browser
                ->type('@card_expiry_month', Carbon::now()->addMonth(\random_int(1, 12))->format('m'))
                ->type('@card_expiry_year', Carbon::now()->addYears(5)->format('Y'))
                ->type('@card_cvc_code', (string) \random_int(101, 1001))
                ->press('@complete-registration-button')
                ->waitFor('#card-error-alert', 25)
                ->assertVue('card.isValid', false, '@plan-component')
                ->clear('@card_number')
                ->type('@card_number', 'yyyyyyyyyyyyyyyy') // Expired Card
                ->click('@complete-registration-button')
                ->whenAvailable(
                    '.v-dialog__content--active',
                    function (Browser $cbBrowser) {
                        $cbBrowser
                            ->assertSee('Payment error')
                            ->waitFor('#dialog-close')
                            ->click('#dialog-close');
                    },
                    20
                );

In this test i am testing card validation failures lets say when i type first time invalid card and ->type('@card_number', 'xxxxxxxxxxxxxxx') it works just fine but when i clear and try to type another invalid card for different error it doesn't clear previous typed input instead it append new input to previous. eg: 'xxxxxxxxxxxxxxxyyyyyyyyyyyyyyyy'

staudenmeir commented 5 years ago

Has it worked in previous versions of Dusk? What version of Chrome are you using?

Does it work with a plain HTML document without any JavaScript?

AhmadWaleed commented 5 years ago

Yes it work just fine with 4.0.3. I haven't tested with plain HTML document because my site is depend of vuetify. Google Chrome version: Google Chrome 71.0.3578.98.

staudenmeir commented 5 years ago

Please downgrade to Dusk 4.0.3 and test it again (to make sure it's really caused by Dusk).

AhmadWaleed commented 5 years ago

Downgraded to Dusk 4.0.3 twice and all test passes no issue with this version But with 4.0.4 only those tests fail which have similar behavior as i described above in issue.

staudenmeir commented 5 years ago

That's quite weird. The only relevant change I see in 4.0.4 is the ChromeDriver update from 2.35 to 2.45.

But if anything, that should fix issues and not cause them. ChromeDriver 2.45 supports Chrome 71.

Please downgrade your ChromeDriver to check whether it's causing the issue. You can manually download the old version here or use the package I created:

composer require --dev staudenmeir/dusk-updater
php artisan dusk:update 2.35

AhmadWaleed commented 5 years ago

Downgrading to ChromeDriver 2.35 worked for me. I think the issue may be dusk 4.0.4 isn't compatible with ChromeDriver 2.45.

staudenmeir commented 5 years ago

I'm pretty sure this is a ChromeDriver issue, not a Dusk one.

I can't reproduce it with plain HTML (type() calls clear() internally):

<input dusk="card_number">

public function testBasicExample()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('view')
            ->type('@card_number', 'xxxxxxxxxxxxxxx')
            ->type('@card_number', 'yyyyyyyyyyyyyyyy')
            ->assertValue('@card_number', 'yyyyyyyyyyyyyyyy');
    });
}

Can you? If not, please provide a minimal example that lets us reproduce the issue.

AhmadWaleed commented 5 years ago

Sure give me some time to think, may be i have to pull other dependencies in order to reproduce the same issue as my sites not just a simple HTML. I will get back to you with an example reproducing the same issue.

driesvints commented 5 years ago

@AhmadWaleed heya ahmad. I'm going to close this then but feel free to respond once you've managed to recreate it.

AhmadWaleed commented 5 years ago

@staudenmeir @driesvints I reproduced the issue please clone this repo https://github.com/AhmadWaleed/dusk-type-mthod-issue and please read README.md i used vuejs and vuetify with laravel 5.7 all these dependencies are up to date with latest versions.

Dusk v4.0.4 Google Chrome 71.0.3578.98

staudenmeir commented 5 years ago

I can reproduce this. It started with ChromeDriver 2.43.

We will not be able to fix this issue, as the clear() method is working according to its specification. There were some changes in the behavior of clear() method between ChromeDriver 2.42 and 2.43, in order to conform to the current WebDriver spec published by W3C. Specifically, https://www.w3.org/TR/2018/REC-webdriver1-20180605/#dfn-clear-a-resettable-element step 5 requires WebDriver implementations to unfocus the element after it is cleared. This invokes the blur event handler, and in some case the event handler can change the value of the input.

A workaround using JavaScript:

->value('input[dusk=credit-card]', '')

AhmadWaleed commented 5 years ago

If i understood correctly by replacing clear() with this ->value('input[dusk=credit-card]', '') should fix the issue right ? But that's not working either.

driesvints commented 5 years ago

@staudenmeir from what I understand it's not really a bug but a behavioral change?

staudenmeir commented 5 years ago

@AhmadWaleed Yes, it should. It does for me. What about this?

->keys('input[dusk=credit-card]', ...array_fill(0, 5, '{backspace}'))

@driesvints Yes. Vue must be using a blur event handler that conflicts with the new behavior.

meyer59 commented 5 years ago

Hi Having the ame problem with Laravel 5.8.19 and ChromeDriver 74. Any way to get type or clear to work properly ?

AhmadWaleed commented 5 years ago

downgrade your dusk version and wait for dusk to update the chrome driver. Last time I checked that issue has been fixed by chrome.

meyer59 commented 5 years ago

Do you mean this php artisan dusk:chrome-driver ? I am currently running with ChromeDriver 74 From the doc https://laravel.com/docs/5.8/dusk#installation

AhmadWaleed commented 5 years ago

No i mean check dusk releases and find the version before dusk updated the driver i think its 4.0.4 and downgrade your dusk to below any relaase in your composer.json

am0nshi commented 4 years ago

@AhmadWaleed any update in 2020? Facing same problem with Dusk v6.1.0

xvetrax commented 4 years ago

Clear() method not working on vue.js inputs. Dusk v6.1.0.

ramiroaraujo commented 3 years ago

I'm having this same issue with Dusk v6.9.1 and Chrome Driver v87

xvetrax commented 3 years ago

Workaround is the custom clear function

public function clearCustom(Browser $browser, $selector) { $value = $browser->value($selector); $browser->keys($selector, ...array_fill(0, strlen($value), '{backspace}')); }