laravel dusk test ElementClickInterceptedException: element click intercepted: Element is not clickable at point

Question

Me and my team are making a Laravel website for a school project, and are using dusk for most of our testing, however we keep encountering the same error in our test and we do not know what causes it. I should also add that not every test fails, and different tests fail on different computers.

We also tried testing the site manually on several different browsers and that still works.

I am at a loss as to what the cause may be and how to fix it, so it would really be great if you good people of Stack Overflow would be willing to help me.

This is an example of the tests that are failing:

public function testCreateMember(): void
    {
        // Truncate the database
        $this->artisan('migrate:fresh --seed');

        $this->browse(function (Browser $browser) {
            $browser->loginAs(1)
                    ->visit('/members')
                    ->clickLink('Voeg nieuw lid toe')
                    ->type('name', 'Freek Vonk')
                    ->type('email', '[email protected]')
                    ->click('input[id="1"]')
                    ->scrollIntoView('button[type="submit"]')
                    ->waitUntilEnabled('button[type="submit"]')
                    ->press('Voeg lid toe')
                    ->assertPathIs('/members')
                    ->assertSee('Lid opgeslagen.');
        });
    }

These are the debug steps that we have tried to implement with seemingly no effect:

• adding a waitFor() before each button press
• adding a pause() before each button press
• temporarily disabling input elements until the test stopped failing when disabling (almost) all of the input elements the tests started working, but after re adding some inputs it stopped working again. We also determined that it does not matter which inputs were disabled. Only the amount seemed to matter.
• using different selectors. we tried using id's dusk selectors, and CSS classes.
• putting the submit button in a different place.
• removing all CSS from the submit button.

This is the full error path:

Facebook\WebDriver\Exception\ElementClickInterceptedException: element click intercepted: Element is not clickable at point (455, 975)
  (Session info: chrome=113.0.5672.93)

C:\school\semester 4\SCRUM-SOp\vendor\php-webdriver\webdriver\lib\Exception\WebDriverException.php:96
C:\school\semester 4\SCRUM-SOp\vendor\php-webdriver\webdriver\lib\Remote\HttpCommandExecutor.php:359
C:\school\semester 4\SCRUM-SOp\vendor\php-webdriver\webdriver\lib\Remote\RemoteWebDriver.php:605
C:\school\semester 4\SCRUM-SOp\vendor\php-webdriver\webdriver\lib\Remote\RemoteExecuteMethod.php:23
C:\school\semester 4\SCRUM-SOp\vendor\php-webdriver\webdriver\lib\Remote\RemoteWebElement.php:77
C:\school\semester 4\SCRUM-SOp\vendor\laravel\dusk\src\Concerns\InteractsWithElements.php:332
C:\school\semester 4\SCRUM-SOp\tests\Browser\TeamTest.php:321
C:\school\semester 4\SCRUM-SOp\vendor\laravel\dusk\src\Concerns\ProvidesBrowser.php:70
C:\school\semester 4\SCRUM-SOp\tests\Browser\TeamTest.php:312
C:\school\semester 4\SCRUM-SOp\vendor\laravel\framework\src\Illuminate\Foundation\Testing\TestCase.php:173

This is an example of a page that the tests try to use:

@extends('layouts.layout')

@section('content')

@if(session()->get('success'))
    <div class="alert alert-success">
        {{ session()->get('success') }}
    </div>
@endif

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
            <div class="max-w-xl">
                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                    {{ __('Gebruiker aanmaken') }}
                </h2>
                <form method="POST" action="/admin/submit" class="mt-6 space-y-6">
                    @csrf
                    <div>
                        <label for="role" class="col-sm-2 col-form-label">
                            Functie
                        </label>
                        <div class="col-sm-8">
                            <select name="role">
                                <option value="coach">
                                    Coach
                                </option>
                                <option value="supervisor">
                                    Begeleider
                                </option>
                                <option value="admin">
                                    Beheerder
                                </option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <label for="name" class="col-sm-2 col-form-label">
                            Naam
                        </label>
                        <div class="col-sm-8">
                            <input type="name" class="form-control" id="name" placeholder="bv: jan de graaf" name="name"  value="{{old('name')}}">
                        </div>
                        @error('name')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label for="email" class="col-sm-2 col-form-label">
                            Email adres
                        </label>
                        <div class="col-sm-8">
                            <input type="email" class="form-control" id="email" placeholder="bv: [email protected]" name="email"  value="{{old('email')}}">
                        </div>
                        @error('email')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label for="password" class="col-sm-2 col-form-label">
                            Wachtwoord
                        </label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="password" placeholder="bv: jan123" name="password" value="{{old('password')}}">
                        </div>
                        @error('password')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label for="password_confirmation" class="col-sm-2 col-form-label">
                            Wachtwoord herhalen
                        </label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="password_confirmation" placeholder="herhaal wachtwoord" name="password_confirmation">
                        </div>
                        @error('password_confirmation')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <br />

                    <button type="submit" id="registreerknop" name="registreerknop" class="btn btn-outline-primary">Registreer gebruiker
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@stop