Watch Laravel Dusk Test Run in Browser

By Default Laravel Dusk runs the browser automation test in headless mode of Google Chrome. If you are not sure what headless denotes

A headless browser is a web browser without a graphical user interface. Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface or using network communication.

So, when you run the test, Laravel Dusk actually performs tests in the browser but you don’t see it. Headless mode is benefitial since it run’s a lot faster than the browser with GUI. Thus if you are running a lot of tests you would want to opt for headless mode.

What if you are still learning and developing your tests and want to see what’s going on the screen, or consider a case where your test is failed, and you want to see what exactly is happening on the UI. In those cases you can watch the Laravel Dusk test run in the browser by switching off the headless mode.

Go to your IDE / Editor and navigate to tests directory. You will find DuskTestCase.php file, This is the Class that all of your dusk test classes extends to.

/**
 * Create the RemoteWebDriver instance.
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    $options = (new ChromeOptions)->addArguments([
        //'--disable-gpu',
        //'--headless',
        '--window-size=1920,1080',
        'detach=true',
    ]);

    return RemoteWebDriver::create(
        'http://localhost:9515', DesiredCapabilities::chrome()->setCapability(
            ChromeOptions::CAPABILITY, $options
        )
    );
}

As seen in the code above comment out the line --headless as well as --disable-gpu, This tells the google chrome driver to actually start a UI browser to run the test.

Next time you run your test, you should see the action in an actual browser.

Next up, let’s see how you can take Screenshot of your page while running dusk test.