How to debug failed Laravel Dusk test

Published on Jul 12, 2022

In many cases, they don't tell you how to debug correctly. How to handle a situation when something changes in the system and the test breaks or the test breaks for another unknown reason. I have some suggestions for you:

  1. Before your error line add ->pause(1500000) and by doing this you can pause the running test and you time to check for yourself what could be the problem.
  2. If you get an error like the following Facebook\WebDriver\Exception\NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"body .input-search"}..., it is because your selector is not found. Why? Maybe because it's loading a little bit slower, so I suggest every time before you interact with selectors you should add the wait function and wait till it's loaded. For example: ->waitFor('.class')->press('.class').
  3. Check the created screenshots, they can be found here: tests\Browser\screenshots
  4. Save the DOM and you can analyze it: tests\Browser\source for this use the ->storeSource('filename');
  5. Save the console log and you can analyze it: tests\Browser\console for this use the ->storeConsoleLog('filename');

I suggest to overwrite the default Dusk captureFailuresFor function (it will automatically make a screenshot, save the DOM source code and save the console log) which is called when the test is failing:

    protected function captureFailuresFor($browsers)
    {
        parent::captureFailuresFor($browsers);

        $browsers->each(function ($browser, $key) {
            $browser->storeSource('failure-' . $this->getCallerName() . '-' . $key);
            $browser->storeConsoleLog('failure-' . $this->getCallerName() . '-' . $key);
        });
    }

Place this code to your tests/DuskTestCase.php file.