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!

Are you actually using logConsole()? The method has been renamed to storeConsoleLog() . — Jonas Staudenmeir
– Jonas Staudenmeir, Commented Jul 28, 2018 at 23:25
@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
– Don't Panic, Commented Jul 29, 2018 at 7:49
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
– Jonas Staudenmeir, Commented Jul 29, 2018 at 10:37
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
– Don't Panic, Commented Jul 29, 2018 at 11:50
Surely we don't have to go back to alert() and look at the screenshot!? :-D — Don't Panic
– Don't Panic, Commented Jul 29, 2018 at 11:51

Jonas Staudenmeir · Accepted Answer · 2018-07-30 00:43:59Z

5

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.

answered Jul 30, 2018 at 0:43

Jonas Staudenmeir

26k7 gold badges70 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Don't Panic Over a year ago

Thanks - do you have any link references about the drivers supported by Chrome?

Jonas Staudenmeir Over a year ago

I didn't find any. I got them from running dd($browser->driver->manage()->getAvailableLogTypes());.

Don't Panic Over a year ago

What a shame. Thanks for investigating!

danronmoon Over a year ago

It is definitely possible (just figured it out). See my answer.

danronmoon · Accepted Answer · 2022-03-19 15:45:59Z

1

It is possible. There's an answer here written in Python from 2014 that shows it's been possible since at least that long.

Override \Laravel\Dusk\TestCase::driver:

protected function driver()
{
    $desired_capabilities = new DesiredCapabilities([
        'browserName' => 'chrome',
        'platform' => 'ANY',
    ]);

    // the proper capability to set to get ALL logs stored
    $desired_capabilities->setCapability('loggingPrefs', [
        'browser' => 'ALL',
        'driver' => 'ALL',
    ]);

    // return the driver
    return RemoteWebDriver::create(
        'http://localhost:9515',
        $desired_capabilities
    );
}

answered Mar 19, 2022 at 15:45

danronmoon

3,8735 gold badges36 silver badges58 bronze badges

Collectives™ on Stack Overflow

Log Javascript console output in Laravel Dusk

UPDATE

UPDATE 2

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

UPDATE 2

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related