[Bug]: Browser testing does not recognize input field with id containing a period

[LucVK]

What Happened

I tried to write a browser test for the Filament v4 login form. The email and password fields have following ids: form.email and form.password. When specifying the field in the fill method as '#form.email', the fill method fails with a timeout.

As a work-around I added a 'data-test' attribute and named it respectively 'email' and 'password'. When specifying the selector now as '@email' and '@password' the input fields get filled in.

How to Reproduce

it('can login', function () {

User::factory()->create([ // assumes RefreshDatabase trait is used on Pest.php...
    'email' => '[email protected]',
    'password' => 'password',
]);

$page = visit('/admin/login');
$page->assertSee('account')
    ->type('@email', '[email protected]')
    ->fill('@password', 'password')
    ->click('Inloggen')
    ->assertSee('Dashboard');

})->only();

Sample Repository

No response

Pest Version

4.3.1

PHP Version

8.4.14

Operation System

Linux

Notes

No response

[jerrens]

I've just started working with Pest v4 and browser testing with an existing Filament (v3) project and I was running into this same issue of not being able to find the login form fields. I thought it was just me not known the correct syntax until I ran into this bug report.

After some digging and noticing that it is using document.querySelectorAll(...) under the hood, I was able to use the query Attribute selector format for the field reference string in order to get the correct reference to the Filament form fields

$page->type('[id="data.email"]', '[email protected]');
$page->type('[id="data.password"]', 'password');