stevebauman/laravel-husk

A Laravel Dusk environment for your Javascript only applications.

v1.1.0 2023-08-29 14:46 UTC

Requires

• php: ^8.0
• laravel-zero/framework: ^10.0
• nunomaduro/laravel-console-dusk: ^1.11
• nunomaduro/termwind: ^1.15

Requires (Dev)

• fakerphp/faker: ^1.23
• laravel/dusk: ^7.9
• mockery/mockery: ^1.6.6
• pestphp/pest: ^2.16

MIT

• Steve Bauman

README

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