nice logs with cypress-mochawesome-reporter and cypress-terminal-report

Question

I am trying to have nice executions logs in HTML reports generated by cypress-mochawesome-reporter. I found that cypress-terminal-report integrates with it.

So I did this in e2e.ts:

import "cypress-mochawesome-reporter/register"
afterEach(() => {
   cy.wait(50, { log: false }).then(() =>
      cy.addTestContext({
         title: "Execution log",
         value: Cypress.TerminalReport.getLogs("txt"),
      })
   )
})
const logsCollectorOptions = {
   collectTypes: ["cy:command", "cy:log"],
}
require("cypress-terminal-report/src/installLogsCollector")(logsCollectorOptions)

and this in cypress.config.ts, inside the setupNodeEvents code block:

         require("cypress-terminal-report/src/installLogsPrinter")(on)
         require("cypress-mochawesome-reporter/plugin")(on)

In the HTML report, the log lines look like this:

        cy:command (K): click
        cy:command (X): contains    Peter

The first line is a pass, the second is a fail. I would like to look them like this instead:

        cy:command (✔️): click
        cy:command (❌): contains    Peter

How can I do this?

Answer 1

Simple solution

Just replace the value line in the code above with:

         value: Cypress.TerminalReport.getLogs("txt")
            .replaceAll("(K): ", "(✔️): ")
            .replaceAll("(X): ", "(❌): "),

Advanced solution

As a starting point to have somewhat more control over each log line:

value: Cypress.TerminalReport.getLogs().reduce((acc: string, log: Log) => acc + "\n" + format(log), ""),

with e.g.

function format(log: Log): string {
   const symbol = log.severity == "error" ? "❌" : "✔️"
   return symbol + " " + log.message
}
import { Log } from "cypress-terminal-report/src/installLogsCollector"