Time and time again the discontent grew amongst developers at being unable to test applications using the out of the box tools that Laravel provided. Developers wanted to use and test the JavaScript components found their Laravel apps.

The long-awaited solution came in the form of Laravel Dusk.

Introduction to Laravel Dusk

Laravel Dusk charts a whole new path for developers in application testing.  Application testing has been completely rewritten with ChromeDriver now the base of everything. The ChromeDriver works as a standalone diver that controls the workings of Chrome. Laravel Dusk works by sending your commands to ChromeDriver as you write your application tests. The ChromeDriver then lights up Chrome in which your tests run. While your tests run in the browser Laravel Dusk reports back to you the results.

Lavarel Dusk makes automated of browser tests in your application possible. The developers of Laravel have put out a tool that has made app functionality testing and automation very easy.

So how can you take advantage of what Laravel Dusk offers?

How To Get Laravel Dusk

Get an up to date and a recent version of the Laravel Dusk via composer.

composer require –dev laravel/dusk

As a note though;  never register Dusk in your production environment in the event that you carry out a manual registration of Laravel Dusk’s service provider. If you do so random users could get access to authentication via your application.

When you are done with the installation of the Dusk package run the dusk: install command to complete the process and then get ready to run some tests.

php artisan dusk:install

Upon the installation, there will be a Browser directory created within a tests directory that will contain a test example. What come next is setting up the APP_URL  environment variable in the .env  file. The value of this APP_URL should be the same as the one you will be using while accessing your app in a browser.

You have the option of having Dusk use its own environment file. You can do this by creating a .env.dusk.{environment}  file. An example of this in a local environment file would be .env.dusk.local. This comes in handy in case you don’t want to test your current database but instead want to have a test of a test database instead.

Running Tests

When running any of your tests, make use of the dusk Artisan command. The dusk command will accept any argument accepted by the phpunit command.

php artisan dusk

This command executes the ExampleTest within the tests\Browser\ExampleTest.php.  This gives you the result as shown below:



...
public function testBasicExample()
{
//Visit the homepage and look for the text 'Laravel'
$this->browse(function (Browser $browser) {
$browser->visit('/')
->assertSee(‘Laravel’);
});
}

The results show that the test was passed displaying the result OK (1 test, 1 assertion)

Opening the file tests\Browser\ExampleTest.php will display for you the method above.

 

The browse method used accepts a callback that is an instance of the Brower class. Within this callback, different methods and assertions that are unique to Dusk can be called.

Going to the visit() method allows you to run a test that visits the URL which matches with the argument specified.  

The assertSee()  method inspects to find if the text matching the argument provided appears on the page.

In the example given above a visit on the homepage is done plus a check for the appearance of the text ‘Laravel’. A look at the documentation page on laravel.com will show you that there are other assertions available that you can look into.

 

So how does a failed test look like?

Go to the argument assertSee() and replace the text ‘Laravel’ with text that does not appear on the visited page for example ‘whoa’. You will promptly get a failed test message. A screenshot of the failed test will also be available in the tests\Browser\screenshots directory.

Creating Browsers

To begin with, write a test that verifies application login. Upon generating a test, make a modification to navigate to the login page.  Key in the necessary credentials and then click the ‘Login’ button.

Call on the browse method to create browser instance.



<?php

namespace Tests Browser;

use App \User;
use Tests\DuskTestCase;
use Laravel\Dusk\Chrome;
use Illuminate\Foundation\Testing\Database\Migrations;
class ExainpleTest extends DuskTestCase
{
use DatabaseMigrations;
/**
* A basic browser test example.
*
* @return void
*/
public function testBasicExample()
{
$user - factory(User::class)->create{[
'email' => 'taylor@laravel,com',
]);
$this->browse (function (browser) use ($user) {
$browser->visit('/login')
->type('email1j $user->email)
->type("password", "secret")
->press (' Login')
->assertPathIs('/home");
});
}
}

From the example showcased above, it can be seen that the browse method does accept a callback.

This callback will automatically receive a browser instance from Dusk and through this instance interactions and assertions against the application will be made.

It is worth noting also that this test also can be used to test the make:auth  Artisan command generated login screen.

Multiple Browser Creation

It sometimes becomes necessary to have multiple browsers for proper testing to be done. An example of a chat screen that interacts with WebSockets may need testing on multiple browsers.

By going to the signature of the callback provided in the browse method and using “ask” for more than one browser you will be able to create multiple browsers.


$this->-browse(function ($first, $second) {
    $first->loginAs( User::find(1))
          ->visit{'/home')
          ->waitForText ('Message');
 
      $second->loginAs(User::find(2)) 
       ->visit('/home') 
       ->waitForText('Message')
       ->type('Message', 'Hey Taylor') 
       ->press('Send')
 
       $first->waitForText('Hey Taylor')
            ->assertSee('Jeffrey Way');
});

Working with Authentication and Forms

Laravel Dusk allows you to interact with forms and authentication testing. To see this set up the basic Laravel login and registration forms. Begin by creating a database and update the .env file with information on the database. Now run.

   php artisan make:auth

 

This command results in the creation of migration and scaffolding files for authentication. Worth noting here is, in case you are running MYSQL that is lower than 5.7.7 or MariaDB you will have to go to the default string length in the boot method and edit the file setting app\Providers\AppServiceProvider.php

 




use Illuminate\Support\Facades\Schema;

public function boot()
{
Schema::defaultStringlength{l9l);
}

After this run;

php artisan migrate

This command generates database tables for you from the migration files. A visit to the homepage of your project will reveal the following along with the Login and Register Links on the far right corner.

 

Run the following command to create a new test named RegisterTest

   php artisan dusk:make RegisterTest

If you look at the tests\Browser folder you will see the file RegisterTest.php that will look like the snapshot below;



<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class RegisterTest extends DuskTestCase
{
/**
* A Dusk test example.
*
*@return void
*/
public function testExample()
{
$this->browse(function (Jbrowser) {
$browser->visit('/')
->assertSee('Laravel');
});
}
}

Make changes to the testExample() method so that it looks similar to the image below;



public function testExample()
{
$this->browse(function ($browser) {
$browser->visit('/') //Go to the homepage
->clickLink('Register') //Click the Register link
->assertSee('Register') //Hake sure the phrase in

//Fill the form with these values
->value('#name','Joe')
->value('#email', '[email protected]')
->value('#password', '123456')
->value('#password-confirm', '123456')
->click('button[type="Submit"]') //Click the submit butt
->assertPathIs('/home')//Make sure you are in the home
//Make sure you see the phrase in the argument
->assertSee("You are logged in!");
}>;
}

After making customizations and edits to your command you may opt to get rid of the ExampleTest.php file which you no longer need.

   php artisan dusk:make RegisterTest

Some Final Thoughts

Laravel Dusk brings efficient and easy test writing to your fingertips. We have mentioned the key aspects of Laravel Dusk that you need to know about to get started. On the other side, Laravel Dusk still has plenty to it in relation to features. We shall delve more into the other features in forthcoming articles.