Setting up Laravel Dusk for Laravel Sail Project with Decoupled Vue Frontend on Windows

November 17, 2024 Enxas

Requirements

Laravel Sail project
Vue project with Vite
WSL

Installation Steps

1. In your docker-compose.yml file, add these ports to the "selenium" section:

ports:
    - '${FORWARD_SELENIUM_PORT:-4444}:4444'
    - '${FORWARD_SELENIUM_HEADFUL_PORT:-7900}:7900'

2. Install Dusk:

sail composer require --dev laravel/dusk

3. Create Dusk test and update configuration:

sail artisan dusk:install

4. Create a test:

sail artisan dusk:make LoginTest

5. Add this test method to verify functionality:

public function testLogin(): void
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->type('name', 'Josh')
            ->type('email', 'josh@example.com')
            ->type('password', 'hunter2')
            ->press('Login')
            ->waitForText('Logged In');
    });
}

Configuration

Before running tests, ensure your Vue application running on Windows is accessible from within the Laravel Sail Docker container.

1. Host your Vue application with:

npm run dev -- --host

2. Create .env.dusk file in your Laravel application root with these values:

APP_URL=http://192.168.0.100:5174/
DB_DATABASE=test_db
LARAVEL_SAIL=1

(Replace IP address with your hosted Vue application IP address).

Running Tests

Basic test execution:

sail dusk --env=.env.dusk

To view tests running visually:

1. Add to .env.dusk:

DUSK_HEADLESS_DISABLED=1

2. Visit http://localhost:7900 (default password: 'secret')

Optionally, you can provide a custom PHPUnit configuration:

sail dusk --configuration phpunit.dusk.xml