Laravel dusk doesn't see vuejs selectors

Question

I am trying to run laravel dusk with vuejs and I got an error

1) Tests\Browser\UserCreateTest::testAdminCanCreateAnotherUser Facebook\WebDriver\Exception\TimeOutException: Waited 5 seconds for selector [.users].

This is my test

$this->browse(function (Browser $browser) {
            $user = User::find(1);
            $browser
                ->loginAs($user)
                ->visit('/users');

            $browser->waitFor('.users');

In Vue template, I have div with class users.

Does anybody know what's wrong with it?

score 1 · Answer 1 · answered Jan 03 '18 at 12:27

1

The reason of that exception was that I was using 'npm run hot' instead of 'npm run prod'

answered Jan 03 '18 at 12:27

Artem Petrusenko

71
3

score 0 · Answer 2 · answered Jan 05 '18 at 13:19

0

To check if the element is on the page, you have to do this:

$browser->assertSee('Connection')

The connection is an example.

I also have difficulties to do dusk test. I can't press a button etc.

answered Jan 05 '18 at 13:19

Minerva

157
1
3
10

score 0 · Answer 3 · answered Jan 07 '20 at 07:05

You can try adding dusk attribute to your HTML element, for example:

<div class="users" dusk="user-list">
...
</div>

In your test, use the following:

$browser
    ->waitFor('@user-list');

The dusk="" attribute works as a custom selector to be used by Laravel Dusk to interact with the HTML elements on the page.

Reference: Testing Vue components with Laravel Dusk

score -1 · Answer 4 · answered Jan 03 '18 at 10:26

-1

That's just how waitFor method works.

From the docs:

The waitFor method may be used to pause the execution of the test until the element matching the given CSS selector is displayed on the page. By default, this will pause the test for a maximum of five seconds before throwing an exception.

So, it waits for .users to appear for 5 seconds and then throws an exception.

answered Jan 03 '18 at 10:26

Alexey Mezenin

158,981
26
290
279

I understand it, but why div with class users isn't present in the test? And why the test fails? – Artem Petrusenko Jan 03 '18 at 10:30
@ArtemPetrusenko Dusk doesn't see any element with class `users` on given page. He waits for it for 5 seconds and then throws an exception. That's why the test fails. – Alexey Mezenin Jan 03 '18 at 10:34
But as you can see this selector is present on the page. https://clip2net.com/s/3QNqWd2 – Artem Petrusenko Jan 03 '18 at 10:38
Apparently, the element is not there for some reason when Dusk is running. – Alexey Mezenin Jan 03 '18 at 10:48
3

How can we check it? – Artem Petrusenko Jan 03 '18 at 10:52

Laravel dusk doesn't see vuejs selectors

4 Answers4