The tests look incomplete to me. Neither image nor steps are tested. I also think that's why the tests are still green.

I would expect the DB transaction to also have $attributes parse to it, and not only $data.

I'm I wrong here?

Hello, I’m really enjoying the whole series — Jeffrey is a great instructor.

I’ve run into an issue with browser testing in Pest and I can’t figure out what I’m missing. My environment is Windows, PHP 8.5, NVS with Node.js 22, Xdebug, PHPStorm — everything else works fine.

When running Pest browser tests, the request is empty whenever multipart/form-data is used (basically any form with this content type). If I submit the same form manually in the browser (my local PHP dev server is running via Symfony CLI), everything works as expected and the request is populated correctly.

So the problem happens only in Pest browser tests, not in the real browser.

Has anyone encountered this with Pest browser tests or knows what could cause multipart/form-data requests to be empty in this case?

What am I missing?

Edit: It is Pest bug https://github.com/pestphp/pest/issues/1495

And indeed in Pest browser plugin it is unfortunately unfinished - https://github.com/pestphp/pest-plugin-browser/blob/4.x/src/Drivers/LaravelHttpServer.php#L257

Edit 2: Plugin has PR with fix: https://github.com/pestphp/pest-plugin-browser/pull/200

An easy way to add focus trap to the modal is to add this first party focus trap plugin: https://alpinejs.dev/plugins/focus

bootstrap.js

import axios from 'axios';
import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Alpine = Alpine;

Alpine.plugin(focus);
Alpine.start();

modal.blade.php

@props(['name', 'title'])

<div
    x-data="{ show: false, name: @js($name) }"
    x-show="show"
    x-trap="show"
    @open-modal.window="show = ($event.detail === name)"
    @keydown.escape.window="show = false"
    x-transition:enter="ease-out duration-250"
    x-transition:enter-start="opacity-0 -translate-y-4"
    x-transition:enter-end="opacity-100"
    x-transition:leave="ease-in duration-250"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0 -translate-y-4"
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs"
    style="display:none;"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-{{ $name }}-title"
    :aria-hidden="!show"
    tabindex="-1"
    id="modal-{{ $name }}"

>
    <x-card is="div" @click.away="show = false">
        <div>
            <h2 id="modal-{{ $name }}-title" class="text-2xl font-bold">{{ $title }}</h2>
        </div>

        <div>
            {{ $slot }}
        </div>
    </x-card>
</div>

And you can add some extra spice by disabling scrolling when a modal is open:

body:not(:has([role='dialog'][aria-hidden])) {
    overflow: hidden;
}

I'm running this on ddev but for some reason I can't use the --debug flag or use ->debug() in my tests.

I get this:

╔════════════════════════════════════════════════════════════════════════════════════════════════╗
║ Looks like you launched a headed browser without having a XServer running.                     ║
║ Set either 'headless: true' or use 'xvfb-run <your-playwright-app>' before running Playwright. ║
║                                                                                                ║
║ <3 Playwright Team                                                                             ║
╚════════════════════════════════════════════════════════════════════════════════════════════════╝

Anyone have an idea?

EDIT: running the command doesn't really do anything useful.

@MassiV Still my go-to insult. I especially use it with my kids =D

Heya, quick question: What vscode theme are you using there? Looks nice!

Aren't there 3 types of strings? Single quoted, double quoted and backticks? @jwmcpeak

@sketchni lol

Heads up for anyone who gets the error:

Pest\Exceptions\FatalException

The test directory [YOUR WEBSITES DIRECTORY]] does not exist.

Create a folder called tests in your projects main directory. On the same level as public, Http, core etc, then re run the command.

Also if you get the error:

Pest\Exceptions\TestCaseClassOrTraitNotFound

The class Tests\TestCase was not found.

When trying to run the test example shown in the video, add the following to composer.json under psr-4:

"Tests\": "tests/"

You should end up with:

"autoload": {
  "psr-4": {
    "Core\\": "Core/",
    "Http\\": "Http/",
    "Tests\\": "tests/"
  }
},

Make sure to run composer dump-autoload after :)

I am in a Docker container, until now everything from this series worked nicely. But now, when adding pestphp and trying to run tests, I have various warnings by pestphp there like Undefined array key "SERVER_NAME" or include(src/Mockery.php): Failed to open stream: No such file or directory. On the other hand, VScode underlines "test" and "expect" and Intelephense tells me "Undefined function" (but these functions work when I run a test from a command line inside the Docker container).