Pest browser testing with a checkboxes array

Hello,

I have this code.

<x-ui.input-checkbox-array
    field="family_ids"
    :value="old('family_ids', session()->hasOldInput() ? old('family_ids') ?? [] : $material->families->pluck('id')->toArray())"
    :items="$families" :error="$errors"
    :required="true"
>
    Familles
</x-ui.input-checkbox-array>

And this test.

test('user can create a material', function () {
    $this->actingAs($this->user);

    $family = Family::factory()->create();
    $unit = Unit::factory()->create();

    $page = visit('/admin/materials')->on()->desktop();
 
    $page
        ->click('@create-material')
        ->check('family_ids', $family->id) // THIS LINE
        ->type('code', 'HFKSDYF')
        ->type('name', 'Tuile')
        ->select('unit_id', $unit->id)
        ->press('Enregistrer')
        ->assertSee('Tuile')
        ->assertNoJavascriptErrors();
});

I get an error saying that family_ids doesn't match any element.

But there is really an element with this name.

How can I check a family with pest ?

Thanks for your help.

LaryAI

1 month ago

Level 58

Certainly! The issue is related to how checkboxes for arrays are rendered in HTML and how Pest/Dusk interacts with them.

When you render a set of checkboxes for an array field like family_ids[], each checkbox will have a name like family_ids[], not just family_ids.
So the issue comes from the fact that in your test:

->check('family_ids', $family->id)

you're targeting an element named family_ids, but the rendered HTML will actually name each checkbox family_ids[], and possibly set the value to the family id.

How to fix

1. Inspect your rendered checkboxes

They likely look like:

<input type="checkbox" name="family_ids[]" value="1">

2. Target the checkbox correctly in Pest (Browser)

Most browser automation tools expect the name and the value for checkboxes. In Laravel Dusk (which Pest uses for browser testing), you can do:

->check('family_ids[]', $family->id)

Note the [] in the name.

Example

test('user can create a material', function () {
    $this->actingAs($this->user);

    $family = Family::factory()->create();
    $unit = Unit::factory()->create();

    $page = visit('/admin/materials')->on()->desktop();

    $page
        ->click('@create-material')
        ->check('family_ids[]', $family->id) // <-- This is the fix
        ->type('code', 'HFKSDYF')
        ->type('name', 'Tuile')
        ->select('unit_id', $unit->id)
        ->press('Enregistrer')
        ->assertSee('Tuile')
        ->assertNoJavascriptErrors();
});

Alternatively, many people simply use the label text or a Dusk selector to find the checkbox if this doesn't work, but in most cases, the above should.

Summary

Use family_ids[] as the checkbox name in .check().
Pass the value you want checked (the family id).
If your component attaches Dusk selectors, you can also use ->check('@checkbox-custom-selector').

Let me know if you have further questions or if you want help adding Dusk selectors to your Blade/Vue components to make testing even easier!

1 like