Not able to check checkbox elements in Laravel Dusk

Question

I'm trying to do test cases for my application on Laravel 6.0 with Dusk. I'm facing some difficulties in checkbox selection, it is not finding the 'check' element. As per the documentation I have used the check method and defined the selector with id

My ID is : company-search-type-Investor and my code is:

$browser->scrollToElement('#company-search-type-Investor')
    ->assertNotChecked('#company-search-type-Investor')
    ->check('#company-search-type-Investor')
    ->pause(1000)

Its strange that my test with ->assertNotChecked('#company-search-type-Investor') gets passed but ->check('#company-search-type-Investor') gives an error:

Facebook\WebDriver\Exception\UnrecognizedExceptionException: element click intercepted: Element <input data-v-c1e51704="" id="company-search-type-Investor" type="checkbox"> is not clickable at point (192, 497). Other element would receive the click: <label data-v-c1e51704="" class="kt-checkbox" style="margin-bottom: 6px; font-size: 1.1rem;">...</label>

Any suggestions are welcomed. Thanks.

Answer 1

This could be happening because CSS is being applied that moves the checkbox behind the label. There are two ways to check the checkbox.

1. You can call click on the label:

   $browser->click("label[data-v-c1e51704='']");
   

2. You can call sendKeys on the checkbox:

   $browser->element("#company-search-type-Investor")->sendKeys(WebDriverKeys::SPACE)