Add FilamentPHP admin panel and browser test suite with screenshot artifacts

.env.dusk.local.example

@@ -0,0 +1,12 @@
+APP_NAME=ComboboxTest
+APP_ENV=testing
+APP_KEY=base64:7hJrI1l3H5UBVvEF3dUxHJb2C0dXoP2xC1qiJxz2A/w=
+APP_DEBUG=true
+APP_URL=http://localhost:8000
+
+DB_CONNECTION=sqlite
+DB_DATABASE=:memory:
+
+CACHE_DRIVER=array
+QUEUE_CONNECTION=sync
+SESSION_DRIVER=array

.github/workflows/run-tests.yml

@@ -45,3 +45,63 @@ jobs:
 
       - name: Execute tests
         run: vendor/bin/pest --ci
+
+  browser-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: 8.4
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, fileinfo
+
+      - name: Install dependencies
+        run: composer install --no-ansi --no-interaction --optimize-autoloader --prefer-dist
+
+      - name: Setup Configuration
+        run: |
+          cp testbench.yaml.example testbench.yaml
+          cp .env.dusk.local.example .env.dusk.local
+
+      - name: Upgrade Chrome Driver
+        run: php vendor/bin/dusk-updater detect --auto-update
+
+      - name: Start Chrome Driver
+        run: ./vendor/laravel/dusk/bin/chromedriver-linux --port=9515 &
+
+      - name: Setup and Migrate Database
+        run: |
+          php vendor/bin/testbench package:test-skeleton
+          php vendor/bin/testbench migrate:fresh
+
+      - name: Run Dusk server
+        run: php vendor/bin/testbench serve &
+        env:
+          APP_URL: http://127.0.0.1:8000
+
+      - name: Wait for server
+        run: |
+          timeout 60 bash -c 'until curl -s http://127.0.0.1:8000 > /dev/null; do sleep 1; done'
+
+      - name: Run Browser Tests
+        run: php vendor/bin/pest tests/Browser --colors=always
+        env:
+          APP_URL: http://127.0.0.1:8000
+          DUSK_DRIVER_URL: http://localhost:9515
+
+      - name: Upload Screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: browser-test-screenshots
+          path: tests/Browser/screenshots
+
+      - name: Upload Console Logs
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: browser-test-console-logs
+          path: tests/Browser/console

.gitignore

@@ -13,3 +13,6 @@ phpstan.neon
 testbench.yaml
 vendor
 .pnpm-store
+tests/Browser/screenshots
+tests/Browser/console
+.env.dusk.local

BROWSER_TESTING.md

@@ -0,0 +1,148 @@
+# Browser Testing
+
+This package includes browser tests using Laravel Dusk to test the Combobox component in a real browser environment.
+
+## Requirements
+
+- PHP 8.2+
+- Chrome/Chromium browser
+- ChromeDriver (automatically managed by Dusk)
+
+## Running Browser Tests Locally
+
+### 1. Install Dependencies
+
+```bash
+composer install
+```
+
+### 2. Setup Configuration
+
+Copy the example testbench configuration:
+
+```bash
+cp testbench.yaml.example testbench.yaml
+cp .env.dusk.local.example .env.dusk.local
+```
+
+### 3. Install/Update ChromeDriver
+
+```bash
+php vendor/bin/dusk-updater detect --auto-update
+```
+
+### 3. Setup Database
+
+```bash
+php vendor/bin/testbench migrate:fresh
+```
+
+### 4. Start the Test Server
+
+In one terminal, start the Testbench server:
+
+```bash
+php vendor/bin/testbench serve
+```
+
+The server will start at `http://127.0.0.1:8000`
+
+### 5. Run Browser Tests
+
+In another terminal, run the browser tests:
+
+```bash
+php vendor/bin/pest tests/Browser
+```
+
+## Screenshots
+
+Browser tests automatically capture screenshots during key interactions:
+
+- `before-combobox-interaction.png` - Form state before interacting with combobox
+- `combobox-dropdown-open.png` - Combobox dropdown opened with options
+- `combobox-option-selected.png` - After selecting an option
+- `combobox-search-visible.png` - Search input visible
+- `combobox-search-typed.png` - After typing in search
+- `user-created.png` - Final state after creating user
+
+Screenshots are saved to `tests/Browser/screenshots/`
+
+## GitHub Actions
+
+Browser tests run automatically on every push and pull request. Screenshots from failed tests are uploaded as artifacts.
+
+To view screenshots from CI:
+1. Go to the Actions tab
+2. Select the workflow run
+3. Download the `browser-test-screenshots` artifact
+
+## Test Coverage
+
+The browser tests cover:
+
+1. **Login Flow** - User authentication to admin panel
+2. **Resource Access** - Accessing the User resource
+3. **Combobox Interaction** - Creating a user with the combobox field
+4. **Search Functionality** - Testing the combobox search feature
+
+## Debugging
+
+### View Browser in Non-Headless Mode
+
+To see the browser during test execution, set the `DUSK_HEADLESS_DISABLED` environment variable:
+
+```bash
+DUSK_HEADLESS_DISABLED=1 php vendor/bin/pest tests/Browser
+```
+
+### Check Console Logs
+
+Console logs from failed tests are saved to `tests/Browser/console/`
+
+### Manual Testing
+
+You can manually test the admin panel by:
+
+1. Starting the server: `php vendor/bin/testbench serve`
+2. Creating a test user in tinker:
+   ```bash
+   php vendor/bin/testbench tinker
+   ```
+   ```php
+   User::create([
+       'name' => 'Test User',
+       'email' => 'test@example.com',
+       'password' => bcrypt('password'),
+       'role' => 'admin'
+   ]);
+   ```
+3. Visit `http://127.0.0.1:8000/admin` and login
+
+## Troubleshooting
+
+### ChromeDriver Issues
+
+If you encounter ChromeDriver errors:
+
+```bash
+# Update ChromeDriver
+php vendor/bin/dusk-updater detect --auto-update
+
+# Or manually specify Chrome version
+php vendor/bin/dusk-updater update --version=120
+```
+
+### Port Already in Use
+
+If port 8000 is already in use, specify a different port:
+
+```bash
+php vendor/bin/testbench serve --port=8080
+```
+
+Then update the `APP_URL` in `.env.dusk.local`:
+
+```
+APP_URL=http://127.0.0.1:8080
+```