Log Javascript console output in Laravel Dusk

7
votes

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!

1
laravellaravel-5.6laravel-dusk
Are you actually using logConsole()? The method has been renamed to storeConsoleLog() . – Jonas Staudenmeir
@JonasStaudenmeir Oops, I should have checked that, thank you. Updated, and now I can see that method is actually being called, but I'm still not getting anything logged. By debugging the src I find that Dusk sees no console content to log. But if I duplicate the test steps manually in Chrome, I can see lines being written to my real console, in fact 3 are written immediately on page load. – Don't Panic
In my tests, the console content only contained JavaScript errors, but no data I logged with console.log(). Do you get the same behavior? – Jonas Staudenmeir
Oh, you are absolutely right. If I intentionally generate a JS error it is logged fine. Well that's a shame, does it mean output from console.log() and friends is not supposed to show up? If so this is far less useful than I'd hoped - I wanted to use those msgs to troubleshoot JS issues in my tests. – Don't Panic
Surely we don't have to go back to alert() and look at the screenshot!? :-D – Don't Panic

1 Answers

5
votes

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.