Laravel Dusk测试遇ElementClickInterceptedException问题求助

我们团队在学校项目的Laravel网站开发中，使用Laravel Dusk进行自动化测试时，反复遇到ElementClickInterceptedException错误：

element click intercepted: Element is not clickable at point

该错误并非所有测试都会触发，且在不同电脑上失败的测试案例不同；但手动在多款浏览器中测试网站功能均正常。

失败的测试示例 #

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', 'freek@vonk.nl')
                ->click('input[id="1"]')
                ->scrollIntoView('button[type="submit"]')
                ->waitUntilEnabled('button[type="submit"]')
                ->press('Voeg lid toe')
                ->assertPathIs('/members')
                ->assertSee('Lid opgeslagen.');
    });
}

已尝试的调试步骤（均无效） #

• 在每次按钮点击前添加waitFor()
• 在每次按钮点击前添加pause()
• 临时禁用输入元素：当禁用几乎所有输入时测试恢复正常，但重新添加部分输入后又失败，且与禁用哪些输入无关，仅与数量相关
• 使用不同选择器：ID、Dusk选择器、CSS类
• 调整提交按钮位置
• 移除提交按钮的所有CSS样式

完整错误栈 #

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

测试涉及的页面示例代码 #

@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: jan@gmail.com" 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

恳请帮忙排查该错误的原因并提供修复方案。

内容的提问来源于stack exchange，提问作者KoenVerstappen