How to handle logging in cross-browser testing in Protractor?

Question

I was building an automation framework with javascript(VanillaJS), jasmine, and protractor. I chose the log4js with log4js-protractor-appender for the logging. I try to save logs(by browser type) when I perform cross-browser testing. I wanted to run the specs on safari and chrome then expecting to have 2 separate log files for each browser.

Q: How to create two separate log files where one of them contains only log of chrome, the second file contains only logs of safari browser by using technologies mentioned before?

Here is the log4js code from the conf.js file

beforeLaunch : function(){
log4js.configure({
        appenders: {
          out: { type: 'console' },
          result: { type: 'dateFile', filename: 'logs/result',"pattern":"-dd.log", alwaysIncludePattern:true}, 
          error: { type: 'dateFile', filename: 'logs/error', "pattern":"-dd.log", alwaysIncludePattern:true}, 
          default: { type: 'dateFile', filename: 'logs/default', "pattern":"-dd.log", alwaysIncludePattern:true}
        },
        categories: {
          default: { appenders: ['out','default'], level: 'info' },
          result: { appenders: ['result'], level: 'info' },
          error: { appenders: ['error'], level: 'error' }
        }
      });
},

onPrepare : function() {
browser.logger = log4js.getLogger('protractorLog4js');
} 

The expected result is to have 2 files: default_chrome.log & default_safari.log

// obtain browser name
    browser.getBrowserName = function() {
        return browser.getCapabilities().then((caps) => {
            browser.browserName = caps.get('browserName');
        }
    )}
    // resolve the promised so the browser name is obtained.
    browser.getBrowserName();
    
    log4js.configure({
      appenders: {
        out: { type: 'console' }, 
        default: { type: 'dateFile', filename: 'logs/default_'+ browser.browserName, "pattern":".log", alwaysIncludePattern:true}
      },
      categories: {
        default: { appenders: ['out','default'], level: 'info' }
      }
    });

I tried this option too:

var browName = () => {return browser.getCapabilities().then((caps) => {caps.get('browserName');});}

Answer 1

I can't provide a ready-to-use answer, because it'll require to have your setup locally, but I can give you directions to look in...

According to https://github.com/angular/protractor/blob/master/lib/config.ts, beforeLaunch is called once per execution (once for all browsers), whereas onPrepare is called for each browser instance and should be used for configuring your logger. So everything related to logger should go to onPrepare