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