damms005's avatar

Failed to load assets in Sail

Assets are not loaded when running Dusk tests.

test('homepage', function () {
    $student = addStudent();

    $this->browse(function (Browser $browser) use ($student) {
        $browser->visit(route('homepage'))
            ->loginAs($student->userModel->id)
            ->storeConsoleLog('error-log') // --> debug purposes
            ->assertSee('Something');
    });
});

Console log output

[
    {
        "level": "SEVERE",
        "message": "http:\/\/tims.local\/build\/assets\/app-931911db.css - Failed to load resource: net::ERR_CONNECTION_REFUSED",
        "source": "network",
        "timestamp": 1710742000259
    },
    {
        "level": "SEVERE",
        "message": "http:\/\/tims.local\/new-frontend\/assets\/js\/jquery.min.js - Failed to load resource: net::ERR_CONNECTION_REFUSED",
        "source": "network",
        "timestamp": 1710742000259
    },
    {
        "level": "SEVERE",
        "message": "http:\/\/tims.local\/build\/assets\/main-f5d540ec.js - Failed to load resource: net::ERR_CONNECTION_REFUSED",
        "source": "network",
        "timestamp": 1710742000259
    },
    {
        "level": "SEVERE",
        "message": "http:\/\/tims.local\/build\/assets\/main-97df0a5b.js - Failed to load resource: net::ERR_CONNECTION_REFUSED",
        "source": "network",
        "timestamp": 1710742000259
    },
    {
        "level": "SEVERE",
        "message": "http:\/\/tims.local\/favicon-32x32.png - Failed to load resource: net::ERR_CONNECTION_REFUSED",
        "source": "network",
        "timestamp": 1710742000774
    },
    {
        "level": "SEVERE",
        "message": "http:\/\/tims.local\/favicon-16x16.png - Failed to load resource: net::ERR_CONNECTION_REFUSED",
        "source": "network",
        "timestamp": 1710742000774
    }
]

docker-compose.yml

version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: tims-laravel-sail-php8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            PHP_CLI_SERVER_WORKERS: 10
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - selenium
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: "%"
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    selenium:
      image: 'selenium/standalone-chrome'
      extra_hosts:
        - 'host.docker.internal:host-gateway'
      volumes:
          - '/dev/shm:/dev/shm'
      networks:
          - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local

Edit: http://tims.local loads and works perfectly well in the browser.

0 likes
1 reply
LaryAI's avatar
Level 58

It looks like the assets are not being loaded because the requests to http://tims.local are being refused. This is likely because the domain tims.local is not accessible within the Docker network created by Laravel Sail. Here are a few steps to troubleshoot and resolve the issue:

  1. Ensure tims.local is Resolvable: Make sure that tims.local is mapped to the correct IP address in your /etc/hosts file on your host machine. It should point to 127.0.0.1 which is the loopback address.

    127.0.0.1 tims.local
    
  2. Use Service Name in Docker Network: Within the Docker network, services can communicate with each other using their service names defined in the docker-compose.yml file. In your case, the service name for the Laravel application is laravel.test. So, you should configure your application to use http://laravel.test instead of http://tims.local when running Dusk tests.

  3. Update Dusk's .env Configuration: If you have a separate .env.dusk.local file for Dusk testing, make sure that the APP_URL is set to the service name with the correct port, like so:

    APP_URL=http://laravel.test:80
    

    If you don't have a separate environment file for Dusk, you can set this in your .env file when running tests.

  4. Update Asset URLs: Ensure that the asset URLs in your views/templates are using the correct base URL. If you're using Laravel Mix, you can use the mix function to generate URLs for your assets, which will automatically use the APP_URL from your .env file.

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <script src="{{ mix('js/app.js') }}"></script>
    
  5. Check Network Access: Verify that the Selenium service can access the laravel.test service. Since they are both in the same network (sail), they should be able to communicate without any issues.

  6. Clear Configuration Cache: Sometimes, configuration caching can cause issues. Make sure to clear the configuration cache by running:

    php artisan config:clear
    
  7. Restart Docker Containers: After making changes to the docker-compose.yml file or .env file, you should restart your Docker containers to apply the changes:

    ./vendor/bin/sail down
    ./vendor/bin/sail up -d
    
  8. Run Dusk Tests Again: After making the above changes, try running your Dusk tests again to see if the assets are now loading correctly.

If you follow these steps and ensure that your application and testing environment are configured to communicate within the Docker network, you should be able to load assets during your Dusk tests.

Please or to participate in this conversation.