#how to resolve ElementClickInterceptedException with laravel dusk on ToggleButtons?

1 messages · Page 1 of 1 (latest)

latent fiberBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

odd sand
#

Wanting to write a laravel dusk test on some form(s) to troubleshoot some browser specific issues

When it came to testing toggle buttons, radio, toggle booleans. I got this error

// All give the same error later
$browser->radio('data.employment_status', 'unemployed'); // It's ToggleButtons but in dom i see that it is radio
$browser->click('input[name="data.employment_status"][value="unemployed"]');
$browser->click('input[id="data.employment_status-unemployed"]');

 FAILED  Tests\Browser\ExampleTest > basic example                                                                                                                 ElementClickInterceptedException   
  element click intercepted: Element <input id="data.employment_status-unemployed" name="data.employment_status" type="radio" value="unemployed"
...

How do i solve this ElementClickInterceptedException?

I tried to use $browser->press() too but it didn't work as it couldn't find such a button

As a side question. I notice radio & checkboxes have name attributes, but text & select fields in filament didn't' seem to have name attributes by default, is it intentional?

// Not sure why radio & checkboxes got them by default (statePath.fieldName) but TextInput & Select field didn't
TextInput::configureUsing(function (TextInput $field): void {
    $field->extraInputAttributes(['name' => 'dusk_' . $field->getName()]);
});

Select::configureUsing(function (Select $field): void {
    $field->extraInputAttributes(['name' => 'dusk_' . $field->getName()]);
});

I also tried using dusk attribute


Radio::configureUsing(function (Radio $field): void {
$field->extraAttributes([ // extraInputAttributes same error too
    'dusk' => $field->getName(),
]);
});

$browser->radio('@employment_status', 'unemployed');

But i got:

  no such element: Unable to locate element: {"method":"css selector","selector":"body [dusk="employment_status"]"}
mortal perch
#

Hey @odd sand did you ever resolve this. I'm tring to decide wether to use Dusk, Cypress or Playwright for browser tests

odd sand
#

no