F
Filament•4w ago
kennyhorna

On Pest 4, filling forms on browser tests for Filament 4

Happy weekend 😎. I've tried many ways to do browser testing for my form (login form as a test), but I cannot make it work. This is my Login::class (that extends base Filament Login::class): 
    protected function getEmailFormComponent(): Component
    {
        /** @var TextInput $component */
        $component = parent::getEmailFormComponent();

        return $component->required(false)
            ->markAsRequired()
            ->rule('required')
            ->validationMessages([
                'required' => 'Tu email es obligatorio',
            ]);
    }

    protected function getPasswordFormComponent(): Component
    {
        /** @var TextInput $component */
        $component = parent::getPasswordFormComponent();

        return $component
            ->required(false)
            ->markAsRequired()
            ->rule('required')
            ->validationMessages([
                'required' => 'Tu contraseña es necesaria',
            ]);
    }
    protected function getEmailFormComponent(): Component
    {
        /** @var TextInput $component */
        $component = parent::getEmailFormComponent();

        return $component->required(false)
            ->markAsRequired()
            ->rule('required')
            ->validationMessages([
                'required' => 'Tu email es obligatorio',
            ]);
    }

    protected function getPasswordFormComponent(): Component
    {
        /** @var TextInput $component */
        $component = parent::getPasswordFormComponent();

        return $component
            ->required(false)
            ->markAsRequired()
            ->rule('required')
            ->validationMessages([
                'required' => 'Tu contraseña es necesaria',
            ]);
    }
And, on my test I tried: 
test('a user with right credentials can log into the app', function () {
    $page = visit('/app/login');

    $page->assertSee('Accede a tu cuenta') // This is the title, it passes ✅
        ->fill('email', 'some@email.com') // does not work ❌
        ->fill('form.email', 'some@email.com') // does not work ❌
        ->fill('data.email', 'some@email.com') // does not work ❌
        ->type('email', 'some@email.com') // does not work ❌
        ->type('form.email', 'some@email.com') // does not work ❌
        ->type('data.email', 'some@email.com') // does not work ❌
        ->fill('form.input.fi-input', 'some@email.com') // does not work ❌
        ->type('form.input.fi-input', 'some@email.com') // does not work ❌
        ->debug();
});
test('a user with right credentials can log into the app', function () {
    $page = visit('/app/login');

    $page->assertSee('Accede a tu cuenta') // This is the title, it passes ✅
        ->fill('email', 'some@email.com') // does not work ❌
        ->fill('form.email', 'some@email.com') // does not work ❌
        ->fill('data.email', 'some@email.com') // does not work ❌
        ->type('email', 'some@email.com') // does not work ❌
        ->type('form.email', 'some@email.com') // does not work ❌
        ->type('data.email', 'some@email.com') // does not work ❌
        ->fill('form.input.fi-input', 'some@email.com') // does not work ❌
        ->type('form.input.fi-input', 'some@email.com') // does not work ❌
        ->debug();
});
This is my view (image 1). It should be something very simple. But I cannot make it work. Any hint is appreciated 🙂
No description
2 Replies
Vp
Vp•4w ago
This simple test is working for me 
$page->assertSee('Sign in')
    ->type('form.email', $admin->email)
    ->type('form.password', 'password')
    ->submit()
    ->assertSee('Dashboard');
$page->assertSee('Sign in')
    ->type('form.email', $admin->email)
    ->type('form.password', 'password')
    ->submit()
    ->assertSee('Dashboard');
Check more https://youtu.be/M5i5-87HoHw?si=CXHM5aeTyspwlZ9W&t=483
Martin
Martin•3w ago
Having the same issue. Did you figure this out @kennyhorna ? Alright, upgrading to pest-plugin-browser 4.0.2 works

Did you find this page helpful?