view console.log output in angular protractor jasmine test

Question

How can I view console.log output in an angularjs protractor jasmine test? As of now, the browser closes by itself too quickly.

more info - I am working with the angularjs tutorial, step 8. I am trying to change the e2e test to protractor. The protractor config file I'm using is based on %appdata%\npm\node_modules\protractor\referenceConf.js. In spec js files referenced by the config file, I have instances of console.log. However, during execution of the protractor e2e test, the web site opens in chrome, I see things happen in the browser, then the browser closes before I can examine any console.log output. I think I need to keep chrome open somehow. How?

Answer 1

Use browser.manage().logs().get('browser')

browser.manage().logs().get('browser').then(function(browserLogs) {
   // browserLogs is an array of objects with level and message fields
   browserLogs.forEach(function(log){
      if (log.level.value > 900) { // it's an error log
        console.log('Browser console error!');
        console.log(log.message);
      }
   });
});

Answer 2

A general misconception is console.log will log the things in your browser. That is incorrect. When you run your tests, along with the results of tests you should see the console.log() values also in the terminal. Browser console is completely different from this.

A general example:

it('get name as John', function(){
        element(by.id('name')).getText().then(function(value){
        console.log(value);
    })
});

Results in Terminal:

John
get name as John - pass

Hope it helps.

Answer 3

This can now be achieved without writing any special code and via plugins:

• first party protractor-console-plugin (Chrome only)
• third party protractor-console

Answer 4

In order to keep the browser's window open you should try running Protractor in debug mode:

$ <route-to-protractor> debug <route-to-conf-file>

Then in your spec file add this line where you want the execution to stop:

browser.debugger();

In the Protractor debugger console, you can step over the stops by typing c or cont.

More info here: https://github.com/angular/protractor/blob/master/docs/debugging.md

Now, in order to get the console content you can check how to do it in Protractor FAQ: https://github.com/angular/protractor/blob/master/docs/faq.md#how-can-i-get-hold-of-the-browsers-console

Something like:

browser.manage().logs().get('browser').then(function(browserLog) {
  console.log('log: ' + require('util').inspect(browserLog));
})

Answer 5

You may also want to change the logging level to see other types of console outputs.

See my proposed update to the protractor faq to do this here

Answer 6

You could always just override console.log in your test :)

logMessages = [];

console.log = function(message) {
    logMessages.push(message);
}

You could also use $log instead of console.log and use a solution like this to put some hooks into the log messages: https://gist.github.com/lrvick/6938531

Answer 7

A simple option is to use:

browser.pause(); protractor/api/browser.pause

for example:

it('should .. test stuff', function() {
    browser.pause(); //--->the automation will pause here - follow the instructions in your terminal to continue 
    //--->your broken testing magic here...
});

Place that method call as the first item in the spec body where you need to view the browsers console.

After the browser pauses you'll have control of the automation. You can then interact with the browser as usual, inspecting elements at different states, checking the browsers console, etc.

Continue the tests by entering c for continue in your terminal - there will be a prompt with instructions waiting for your entry.