Dusk: Dusk never finds visible element

[antonioribeiro]

This is my test:

    $this->browse(function (Browser $browser) use ($available) {
        $browser->login()
                ->waitForText($available->video->title)
                ->waitFor($link = "tr[data-id='{$available->video->id}'] a")
                ->click($link)
                ->waitForText('Question form')
                ->waitFor('.bmpui-image')
                ->waitFor('input[type="radio"]')
                ->type('question', 'This is a Laravel Dusk test.')
                ->radio('scope', '0')
                ->press('Send')
                ->waitForText('Question sent!')
        ;
    });

This is the error message I receive:

This is the screenshot Dusk took:

Screenshot looks cropped, huh? Yeah, this is one of the reasons I think we also need the sources: https://github.com/laravel/dusk/pull/256

The problem is that it does not find something which is there. Still not convinced? What about selecting it in jQuery?

It finds both radio buttons, as you can see.

Am I doing something wrong here?

[deleugpn]

Try to add a unique id or name to the element and then see if you can succeed by using that. I'm not completely aware of how WebSelectors work, but I have learned that they're not the same thing as jQuery.

[antonioribeiro]

An even more tough selection is working in the very same browser test:

->waitFor($link = "tr[data-id='{$available->video->id}'] a")

Which selects a link, using data-id attribute, which is not a real HTML attribute, inside a table column:

"tr[data-id='42'] a"

And then select again to click it:

->click($link)

All that work fine, why would not a simpler one?

[deleugpn]

I'm not saying you should give up and use an id or name, I'm just suggesting it as a way to isolate that the problem is indeed the selector. From your screenshot, jQuery is returning 2 elements with that selector, I don't know if internally WebSelectors can handle that. I'll try to investigate that this weekend, but other than that we would need more thorough investigation as to why it is failing.

[vesper8]

I was getting this error because there were more than 1 element on the page that matched my selector. Once I made it more specific so that only one element matched, then that problem went away

[lionslair]

I have the same situation but there is no way to make it more specific because its printed by a third party vue component. How did you manage to get around it?