How to take Browser Screenshots in Laravel Dusk

Taking Screenshots are a great way to go over what went wrong in your automation test. In this tutorial we will go over on how you can store the screenshots of where your test failed or of any desired screen during running of your dusk tests.

Laravel Dusk by default makes it easy for us , by storing the screenshot of the screen where the test failed in the following directory test > Browser > screenshots

The screenshots folder content is deleted everytime your run the command php artisan dusk

Thus, if you have failed test , before running your tests again, you should checkout the screenshot folder if you are looking for evidence.

What if you want to take screenshot at any desired point in your test ?

You can make use of screenshot method on the browser object.

For example if you want to take the screenshot of your application home page in the provided ExampleTest.php , modify it like this

<?php

namespace Tests\Browser;

use Tests\DuskTestCase;
use Laravel\Dusk\Browser;
use Illuminate\Foundation\Testing\DatabaseMigrations;

class ExampleTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->screenshot('home-page')
                    ->assertSee('Laravel');
        });
    }
}

screenshot method requires a parameter which is the name of the file that you want to save it as.

Once you run the test, you should see a new file created in your directory Browser > Screenshots with name home-page.png

laravel-dusk-screenshot

From laravel-dusk v 5.5.0, It's now possible to store your screenshots in a subdirectory. You just have to mention the directory path in the screenshot method.


/**
     * A basic browser test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->screenshot('dir/1/home-page')
                    ->assertSee('Laravel');
        });
    }

The above code sample will save the screenshot in folder screenshots > dir > 1 with name home-page.png

That's all about taking screenshots with dusk, next up learn about having a Different environment configuration for your dusk tests.

Comments