Laravel Dusk: element not interactable when used vue-fragment

1
votes

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?

1
laravellaravel-dusk
Why you have to use it? if you can already solve the problem? – mohammad.kaab
@mohammad.kaab I don't have the power to change the frontend. And it's used liked that for some special reasons. – Philipp Mochine
What is the problem with using, $browser->visit('/')->elements('.el-select input').click(); – mohammad.kaab
@mohammad.kaab I guess you mean $browser->visit('/')->elements('.el-select input')[0]->click() right? I still get the same error: element not interactable – Philipp Mochine

1 Answers

1
votes

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/