Log Javascript console output in Laravel Dusk

Question

I am using Laravel 5.6 and Laravel Dusk 3.0.9.

Dusk is pretty handy, but when a test fails on a page where there is some Javascript functionality it can be pretty hard to work out what went wrong. Dusk generates a screenshot, which helps, but what I really need is to see the output from the Javascript console.

Apparently this is possible - Dusk creates a tests/Browser/console directory as part of its installation, and this PR suggests the JS console output is logged, or at least loggable.

There is no documentation (that I can find) about how to actually do that though. Browsing the diffs in that PR, I see a new method logConsole() (later renamed to storeConsoleLog() as @Jonas pointed out in the comments), but I can't seem to get it to do anything, eg:

$browser->visit('/somewhere')
        ->select('#foo', '2')
        ->value('#date', '2018-07-29')
        ->storeConsoleLog('bar')
        ->assertEnabled('button[type=submit]');

This test fails, and generates a nice screenshot, but there is no sign of any logfile. I've tried moving the position of ->storeConsoleLog('bar') around in the chain, eg first or last, and as a separate line before or after the chain:

$browser->visit('/somewhere')
->...full chain here;
$browser->storeConsoleLog('bar');

But none of them make any difference. My JS has a series of console.log()s which I use when testing myself in a browser, and which will tell me exactly what went wrong. I was expecting this functionality to log those messages.

Am I misunderstanding that PR, is this even possible? If so, how?

UPDATE

By debugging the storeConsoleLog() method in vendor/laravel/dusk/src/Browser.php I can see that the method is being called correctly, but there is no console content to log. If I manually repeat the steps the test is taking in Chrome, there are lines being written to Chrome devtools console, in fact 3 are written on page load. Why can't Dusk see those?

UPDATE 2

I found that if you remove '--headless' from the driver() method in DuskTestCase, the browser will be displayed during tests. You can then display the dev tools for that browser, and watch the console output live as the tests run. It is too fast to really be useful, and if there is an error the browser closes and you lose whatever was on the console anyway (unless there's a way to leave the browser open on failure?), but adding this here in case it is useful to someone!

Answer 1

There is apparently no way to get non-error console output from the browser.

There are other log types, but Chrome only supports browser (used by Dusk) and driver.

You'll probably have to use alerts. But screenshots don't contain alerts, so you have to get the text:

$browser->driver->switchTo()->alert()->getText()

You could also use something like document.write() and check the output on the screenshot.