如何在Protractor测试报告中添加自定义日志并解决afterAll报错

一、解决AfterAll报错 end is not defined #

报错原因是你在spec.js中定义的afterAll逻辑多余，会提前触发测试结束流程，导致perfecto上报客户端的内部收尾逻辑还未完成就被销毁，从而触发end is not defined的报错。
直接删除spec.js中如下的afterAll代码段即可解决：

afterAll(function(done){
    process.nextTick(done); 
});

二、实现log4js日志同步展示到chercher测试报告 #

按照以下步骤配置即可：

• 第一步：安装对应依赖（已安装可跳过）

npm install chercher-tech-js-protractor-reporter log4js --save-dev

• 第二步：修改conf.js配置，整合log4js和chercher报告
  首先在conf.js顶部引入依赖并配置log4js（和你现有项目的log4js配置保持一致即可）：

var reportingClient;
const log4js = require('log4js');
const ChercherReporter = require('chercher-tech-js-protractor-reporter');
const fs = require('fs');

// 配置log4js
log4js.configure({
  appenders: { 
    appLog: { type: 'file', filename: './logs/app.log' } 
  },
  categories: { 
    default: { appenders: ['appLog'], level: 'info' } 
  }
});
const appLogger = log4js.getLogger('app');

然后在onPrepare钩子中添加chercher报告配置，同时改写日志方法实现双写：

onPrepare: function () {
    // 原有perfecto上报逻辑保持不变
    const Reporting = require('perfecto-reporting');
    reportingClient = new Reporting.Perfecto.PerfectoReportingClient(new Reporting.Perfecto.PerfectoExecutionContext({
        webdriver: browser.driver,
        tags: ['javascript driver']
    }));
    browser.reportingClient = reportingClient;

    var myReporter = {
        specStarted: function (result) {
            reportingClient.testStart(result.fullName);
        },
        specDone: function (result) {
            if (result.status === 'failed') {
                const failure = result.failedExpectations[result.failedExpectations.length - 1];
                reportingClient.testStop({
                    status: Reporting.Constants.results.failed,
                    message: `${failure.message} ${failure.stack}`
                });
            } else {
                reportingClient.testStop({
                    status: Reporting.Constants.results.passed
                });
            }
        }
    }
    jasmine.getEnv().addReporter(myReporter);

    // 新增chercher报告配置
    const chercherReporter = new ChercherReporter({
      reportPath: './reports/chercher',
      reportName: 'AutoTestReport.html',
      showConsoleLogs: true
    });
    jasmine.getEnv().addReporter(chercherReporter);
    global.chercherReporter = chercherReporter;

    // 改写log4js日志方法，输出到文件的同时写入报告
    ['trace','debug','info','warn','error','fatal'].forEach(logLevel => {
      const originalLog = appLogger[logLevel];
      appLogger[logLevel] = function(...logArgs) {
        // 原有日志写入文件逻辑不变
        originalLog.apply(this, logArgs);
        // 新增日志写入报告逻辑
        const logContent = `[${logLevel.toUpperCase()}] ${logArgs.join(' ')}`;
        chercherReporter.addLog(logContent);
      }
    });
    // 把logger挂载到browser对象，方便测试用例中调用
    browser.appLogger = appLogger;
}

如果需要把历史日志文件的全部内容追加到报告末尾，修改onComplete钩子如下：

onComplete: async function () {
    // 原有perfecto报告地址输出逻辑不变
    const url = await reportingClient.getReportUrl();
    console.log(`Report url = ${url}`);

    // 新增读取日志文件追加到报告逻辑
    const logContent = fs.readFileSync('./logs/app.log', 'utf8');
    const reportPath = './reports/chercher/AutoTestReport.html';
    let reportHtml = fs.readFileSync(reportPath, 'utf8');
    reportHtml += `
      <div style="margin: 20px;padding: 15px;border: 1px solid #eee;border-radius: 4px;">
        <h2>全量应用运行日志</h2>
        <pre style="background: #f6f8fa;padding: 10px;border-radius: 4px;white-space: pre-wrap;">${logContent}</pre>
      </div>
    `;
    fs.writeFileSync(reportPath, reportHtml);
}

• 第三步：在测试用例中打日志
  在spec.js需要输出日志的位置直接调用挂载的logger方法即可，日志会同时写入log4js文件和chercher报告：

browser.appLogger.info('当前执行步骤：跳转到谷歌首页');
browser.appLogger.error('元素定位失败：#tsbbbsdasd');

额外注意事项 #

你当前conf.js中的specs配置路径是./tests/SignupAutomation_spec.js，如果你的测试用例文件就是本次贴出的spec.js，需要把路径修改为实际的文件路径，否则会出现找不到测试用例的问题。

内容的提问来源于stack exchange，提问作者Robin