feat: Allow Laravel Sail to run Pest 4 Browser tests

[rogerio-pereira]

This Merge request prepare Laravel Sail image to run Pest 4 Browser tests.

I don't know how to write automated tests for docker images, but this is working on my projects

---

Aditional info (not required)

Besides this i had to include on package.json (but this change is related to PEST 4 package, i'll open a PR related to it on Pest 4 repo)

    "scripts": {
        ...
        "postinstall": "npx playwright install"
    },
    "devDependencies": {
        ...
        "playwright": "^1.55.0",
    },

Also i'm able to run the browser tests on my Github CI workflow

name: tests

on:
  workflow_run:
    workflows: ["linter"]
    types:
      - completed
    branches:
      - develop
      - main

jobs:
  ci:
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    env: 
      PLAYWRIGHT_BROWSERS_PATH: 0   #Install playwright browsers on node_modules

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup PHP
        uses: shivammathur/setup-php@v2
        with:
          php-version: 8.4
          tools: composer:v2
          coverage: xdebug

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'
          cache-dependency-path: './project/package-lock.json'

      # Required for PEST 4 browser tests
      - name: Install Playwright dependencies
        run: npx playwright install-deps

      - name: Install Node Dependencies
        working-directory: ./project
        run: npm install

      - name: Install Dependencies
        working-directory: ./project
        run: composer install --no-interaction --prefer-dist --optimize-autoloader

      - name: Copy Environment File
        working-directory: ./project
        run: cp .env.example .env

      - name: Generate Application Key
        working-directory: ./project
        run: php artisan key:generate

      - name: Build Assets
        working-directory: ./project
        run: npm run build

      - name: Tests
        working-directory: ./project
        # run: php artisan test --type-coverage --mutate --parallel
        run: php artisan test --parallel

[maximyugov]

I have updated sail composer package, installed pest and playwright, but can't run pest browser test using sail (sail pest command): Playwright is outdated. Please run [npm install playwright@latest && npx playwright install] in the root directory of your project. When running ./vendor/bin/pest using locally installed php everything is fine. Any advice?

[rogerio-pereira]

@maximyugov yes
I’m out of town until Monday, on Monday I reply you back on how to properly fix it

or you can follow this discussion
pestphp/pest#1466

[maximyugov]

@rogerio-pereira Hi. I've tried to do what is described in the discussion, but still it doesnt work for me.

[rogerio-pereira]

Sorry @maximyugov
my bad, yesterday there was a lot of stuff in my work

1. Make sure you're using sail with php version 8.4 (this is mandatory, since the change is only in Dockerfile of version 8.4)
   check this line in your docker-compose.yml

laravel.test:
        build:
            context: './docker/8.4'
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: 'sail-8.4/app'                                             #Check here
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail

2. make sure you have new version of sail in composer.json
   IMPORTANT, don't copy and paste it because it's a json file, and it will break because of the comments

{
    "require-dev": {
        "fakerphp/faker": "^1.23",
        "laravel/pail": "^1.2.2",
        "laravel/pint": "^1.13",
        "laravel/sail": "^1.45.0",                        //Check here
        "mockery/mockery": "^1.6",
        "nunomaduro/collision": "^8.6",
        "pestphp/pest": "^4.0",                         //Check here
        "pestphp/pest-plugin-browser": "^4.0",
        "pestphp/pest-plugin-type-coverage": "^4.0"
    },

3. Now the secret is the postinstall script in the package.js
   IMPORTANT, don't copy and paste it because it's a json file, and it will break because of the comments

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite",
        "postinstall": "npx playwright install"                    // Add this line
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.1.11",
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^2.0",
        "tailwindcss": "^4.0.7",
        "vite": "^7.0.4"
    },
    "devDependencies": {               
        "playwright": "^1.55.0"                            // Add this line (note, is dev dependencies)
    },
    "optionalDependencies": {
        "@rollup/rollup-linux-x64-gnu": "4.9.5",
        "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
        "lightningcss-linux-x64-gnu": "^1.29.1"
    }
}

4. after that stop you containers and start again

sail down -v
# I deleted the cached docker image, just to be sure
# docker system prune --all --force
sail up -d --build

# Update composer and npm dependencies
sail composer update
sail npm update

# Install pest browser tests
sail composer require pestphp/pest-plugin-browser --dev
sail npm install

[maximyugov]

@rogerio-pereira Finally, it works! sail npm install - this is what I needed to do. Thanks a lot, much appreciated