Laravel Husk

Laravel Husk is a thin and light scaffolded Laravel Dusk environment.

It allows you to test your JavaScript applications with PHP using Pest, without having to scaffold an entire Laravel application.

Examples

| JS Framework | Tests | | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | NuxtJS | | | NextJS | | | Svelte | | | Gatsby | | | Gridsome | | | Showcode (NuxtJS) | |

Installation

Inside of your JavaScript application folder, run the below command to scaffold the Laravel Husk environment:

Note: This will create the folder named browser which will contain your Laravel Husk test environment.

composer create-project stevebauman/laravel-husk browser

After scaffolding the test environment, you should have the below folder structure;

javascript-app/
├── ...
└── browser/
    ├── bootstrap/
    ├── config/
    ├── storage/
    │   ├── log/
    │   ├── screenshots/
    │   └── source/
    └── tests/
        ├── ...
        ├── ExampleTest.php
        ├── DuskTestCase.php
        └── Pages/
            └── ExamplePage.php

Then, navigate into the browser directory and install the Chrome driver by running the below command:

php application dusk:chrome-driver --detect

Usage

Before running your dusk tests, be sure to set the proper base URL to where your JavaScript application will be served from:

// tests/DuskTestCase.php

protected function setUp(): void
{
    parent::setUp();

    $this->setupBrowser('http://localhost:3000');
}

After setting the base URL, serve your JavaScript application:

npm run dev

Then, inside of another terminal, navigate into the browser directory:

cd browser

And run the below command:

Important: Make sure you've installed the Chrome driver first, via php application dusk:chrome-driver --detect

php application pest:dusk

With arguments:

php application pest:dusk --order-by=random --filter="it can load"

Note: You may also insert the below JSON into the scripts section of your package.json file to run your browser tests from your root project directory:

"scripts": {
    "test": "cd browser && php application pest:dusk"
}

npm run test

GitHub Actions

You may use the below GitHub action as a template to run your Laravel Dusk tests:

name: run-tests

on:
    push:
    pull_request:
    schedule:
        - cron: "0 0 * * *"

jobs:
    run-tests:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v2
            - uses: actions/setup-node@v2
              with:
                  cache: "npm"

            - name: Install Javascript Dependencies
              run: npm install

            - name: Start JavaScript Application
              run: npm run dev &

            - name: Install Composer Dependencies
              working-directory: ./browser
              run: composer install --no-progress --prefer-dist --optimize-autoloader

            - name: Upgrade Chrome Driver
              working-directory: ./browser
              run: php application dusk:chrome-driver `/opt/google/chrome/chrome --version | cut -d " " -f3 | cut -d "." -f1`

            - name: Run Dusk Tests
              working-directory: ./browser
              run: php application pest:dusk

            - name: Upload Screenshots
              if: failure()
              uses: actions/upload-artifact@v2
              with:
                  name: screenshots
                  path: browser/storage/screenshots

            - name: Upload Console Logs
              if: failure()
              uses: actions/upload-artifact@v2
              with:
                  name: console
                  path: browser/storage/console