Search code examples
laravellaravel-dusk

Laravel Dusk: element not interactable when used vue-fragment

I struggle to use Dusk with this package. It removes the "you should return one root element" limitation.

Now I want to write Laravel Dusk tests, but I get the error: 

1) Tests\Browser\HomepageTest::it_shows_the_correct_value
Facebook\WebDriver\Exception\ElementNotInteractableException: element not interactable
  (Session info: chrome=81.0.4044.113)

If I don't use fragment, everything works... but unfortunately, I have to use it.

I created a repository to test all the Laravel Dusk tests. https://github.com/pmochine/fragment-dusk

Any idea how I can do the test without calling the $browser->script() function?

Solution

  • You need to change this line 

    $browser->assertSeeIn('.dialog', 'Option1');

    in your test this_test_fails_even_though_we_try_to_use_script to this 

    $text = $browser->script("return document.querySelector('.dialog').textContent")[0];
$this->assertEquals('Result: Option1', trim($text));

    And the reason laravel dusk can't find the contents of the fragment it's because, Fragment tag would not read as a node by the DOM. You can read more about it here https://blog.logrocket.com/fragments-in-vue-js/