Browser Testing met Laravel Dusk: Part 2 - PhantomJS

In the previous part I wrote how you can implement Browser Testing with Laravel Dusk (5.4+). By default Laravel uses the Chrome Driver but the disadvantage is that when you execute these tests, Chrome has to be installed and actively pops up.

While this may be fine in local development, this could get annoying or be a problem when running these tests in a Dockerized instance or on acceptance/production environments. You'll want this to be headless. This means testing in the background without opening any windows.

PhantomJS

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. Laravel is able to communicate over the Webdriver protocol with PhantomJS.

Installation of PhantomJS: phantomjs.org/download.html

Installation instructions for Mac OS X

For other platforms, see the link above.

Mac OS X: Download the release to a new folder and extract its contents.

$ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip 
$ unzip phantomjs-2.1.1-macosx.zip $ cd phantomjs-2.1.1-macosx

Execute

Start PhantomJS in webdriver-mode with this command:

$ ./bin/phantomjs --webdriver=4444

Open up the file: tests/DuskTestCase.php and change the driver to:

/**
 * Create the RemoteWebDriver instance.
 *
 * @return \Facebook\WebDriver\Remote\RemoteWebDriver
 */
protected function driver()
{
    return RemoteWebDriver::create(
        'http://localhost:4444', DesiredCapabilities::phantomjs()
    );
}

Open a new terminal tab and run the test again to see if it works:

$ php artisan dusk

If everything works, you'll see passed tests without any windows popping up on you.