html output processor

.gitignore

@@ -4,8 +4,9 @@ test/cypress/screenshots
 test/cypress/videos
 test/output/out.json
 test/output/out.txt
-test/output/not/existing/path/out.txt
+test/output/out.html
 test/output/out.cst
+test/output/not/existing/path/out.txt
 test/output_nested
 test/cypress/reports
 .idea

.prettierignore

@@ -1 +1,2 @@
-tsconfig.json
+tsconfig.json
+test/output*/**/*.html

README.md

@@ -294,6 +294,7 @@ setupNodeEvents(on, config) {
     outputTarget: {
       'out.txt': 'txt',
       'out.json': 'json',
+      'out.html': 'html',
     }
   };
 
@@ -305,7 +306,7 @@ setupNodeEvents(on, config) {
 The `outputTarget` needs to be an object where the key is the relative path of the
 file from `outputRoot` and the value is the **type** of format to output.
 
-Supported types: `txt`, `json`.
+Supported types: `txt`, `json`, `html`.
 
 ### Log specs in separate files
 

index.d.ts

@@ -1,10 +1,9 @@
 declare namespace Cypress {
   import type {Log} from './src/installLogsCollector';
-  import type {BuiltinOutputProcessorsTypes} from './src/types';
 
   interface Cypress {
     TerminalReport: {
-      getLogs(format: BuiltinOutputProcessorsTypes): string | null;
+      getLogs(format: 'txt' | 'json'): string | null;
       getLogs(format?: 'none' = 'none'): Log[] | null;
     };
   }

src/installLogsCollector.ts

@@ -11,7 +11,7 @@ import LogCollectControlSimple from './collector/LogCollectControlSimple';
 import logsTxtFormatter from './outputProcessor/logsTxtFormatter';
 import CONSTANTS from './constants';
 import type {ExtendedSupportOptions, SupportOptions} from './installLogsCollector.types';
-import type {LogType, Log, Severity, BuiltinOutputProcessorsTypes} from './types';
+import type {LogType, Log, Severity} from './types';
 import utils from './utils';
 import {validate} from 'superstruct';
 import {InstallLogsCollectorSchema} from './installLogsCollector.schema';
@@ -75,7 +75,7 @@ function registerLogCollectorTypes(
 function registerGlobalApi(logCollectorState: LogCollectorState) {
   Cypress.TerminalReport = {
     //@ts-ignore there is no error, this works correctly.
-    getLogs: (format: BuiltinOutputProcessorsTypes | 'none' = 'none') => {
+    getLogs: (format: 'txt' | 'json' | 'none' = 'none') => {
       const logs = logCollectorState.getCurrentLogStack();
 
       if (!logs) {

src/installLogsPrinter.ts

@@ -16,13 +16,15 @@ import utils from './utils';
 import consoleProcessor from './outputProcessor/consoleProcessor';
 import {validate} from 'superstruct';
 import {InstallLogsPrinterSchema} from './installLogsPrinter.schema';
+import HtmlOutputProcessor from './outputProcessor/HtmlOutputProcessor';
 
 const OUTPUT_PROCESSOR_TYPE: Record<
   BuiltinOutputProcessorsTypes,
   {new (file: string, options: PluginOptions): IOutputProcecessor}
 > = {
   json: JsonOutputProcessor,
   txt: TextOutputProcessor,
+  html: HtmlOutputProcessor,
 };
 
 let writeToFileMessages: Record<string, Record<string, Log[]>> = {};
@@ -56,9 +58,10 @@ function installLogsPrinter(on: Cypress.PluginEvents, options: PluginOptions = {
     printLogsToFile,
     printLogsToConsole,
     outputCompactLogs,
-    outputTarget,logToFilesOnAfterRun,
+    outputTarget,
+    logToFilesOnAfterRun,
     includeSuccessfulHookLogs,
-    compactLogs: compactLogsOption,
+    compactLogs,
     collectTestLogs,
   } = resolvedOptions;
 
@@ -80,8 +83,8 @@ function installLogsPrinter(on: Cypress.PluginEvents, options: PluginOptions = {
       let messages = data.messages;
 
       const terminalMessages =
-        typeof compactLogsOption === 'number' && compactLogsOption >= 0
-          ? compactLogs(messages, compactLogsOption, logDebug)
+        typeof compactLogs === 'number' && compactLogs >= 0
+          ? getCompactLogs(messages, compactLogs, logDebug)
           : messages;
 
       const isHookAndShouldLog =
@@ -91,7 +94,7 @@ function installLogsPrinter(on: Cypress.PluginEvents, options: PluginOptions = {
         if (data.state === 'failed' || printLogsToFile === 'always' || isHookAndShouldLog) {
           let outputFileMessages =
             typeof outputCompactLogs === 'number'
-              ? compactLogs(messages, outputCompactLogs, logDebug)
+              ? getCompactLogs(messages, outputCompactLogs, logDebug)
               : outputCompactLogs === false
                 ? messages
                 : terminalMessages;
@@ -176,8 +179,8 @@ function installOutputProcessors(on: Cypress.PluginEvents, options: PluginOption
 
   const createProcessorFromType = (
     file: string,
-    options: PluginOptions,
-    type: BuiltinOutputProcessorsTypes | CustomOutputProcessorCallback
+    type: BuiltinOutputProcessorsTypes | CustomOutputProcessorCallback,
+    options: PluginOptions
   ) => {
     const filepath = path.join(options.outputRoot || '', file);
 
@@ -211,18 +214,18 @@ function installOutputProcessors(on: Cypress.PluginEvents, options: PluginOption
           root,
           options.specRoot || '',
           ext,
-          (nestedFile: string) => createProcessorFromType(nestedFile, options, type)
+          (nestedFile: string) => createProcessorFromType(nestedFile, type, options)
         )
       );
     } else {
-      outputProcessors.push(createProcessorFromType(file, options, type));
+      outputProcessors.push(createProcessorFromType(file, type, options));
     }
   });
 
   outputProcessors.forEach((processor) => processor.initialize());
 }
 
-function compactLogs(logs: Log[], keepAroundCount: number, logDebug: (message: string) => void) {
+function getCompactLogs(logs: Log[], keepAroundCount: number, logDebug: (message: string) => void) {
   logDebug(`Compacting ${logs.length} logs.`);
 
   const failingIndexes = logs

src/outputProcessor/HtmlOutputProcessor.ts

@@ -0,0 +1,195 @@
+import type {AllMessages, PluginOptions} from '../installLogsPrinter.types';
+import BaseOutputProcessor from './BaseOutputProcessor';
+import {Log, LogSymbols, LogType, ValueOf} from '../types';
+import CONSTANTS from '../constants';
+import utils from '../utils';
+
+const {COLORS: BASE_COLORS, LOG_TYPES, LOG_SYMBOLS} = CONSTANTS;
+
+export const TYPE_PADDING = Math.max(...Object.values(LOG_TYPES).map((l) => l.length)) + 3;
+
+const COLORS = {
+  ...BASE_COLORS,
+  DARK_CYAN: 'darkcyan',
+  LIGHT_GREY: 'lightgrey',
+} as const;
+
+type Colors = ValueOf<typeof COLORS>;
+
+const MessageConfigMap: Record<
+  LogType,
+  (options: PluginOptions) => {
+    typeColor: Colors;
+    icon: LogSymbols;
+    /**
+     * default is no html color
+     */
+    messageColor?: Colors;
+    /**
+     * default is no trim (full message length)
+     */
+    trim?: number;
+  }
+> = {
+  [LOG_TYPES.PLUGIN_LOG_TYPE]: () => ({typeColor: COLORS.DARK_CYAN, icon: LOG_SYMBOLS.INFO}),
+  [LOG_TYPES.BROWSER_CONSOLE_WARN]: () => ({typeColor: COLORS.YELLOW, icon: LOG_SYMBOLS.WARNING}),
+  [LOG_TYPES.BROWSER_CONSOLE_ERROR]: () => ({typeColor: COLORS.RED, icon: LOG_SYMBOLS.ERROR}),
+  [LOG_TYPES.BROWSER_CONSOLE_DEBUG]: () => ({typeColor: COLORS.BLUE, icon: LOG_SYMBOLS.DEBUG}),
+  [LOG_TYPES.BROWSER_CONSOLE_INFO]: () => ({typeColor: COLORS.DARK_CYAN, icon: LOG_SYMBOLS.INFO}),
+  [LOG_TYPES.BROWSER_CONSOLE_LOG]: () => ({typeColor: COLORS.DARK_CYAN, icon: LOG_SYMBOLS.INFO}),
+  [LOG_TYPES.CYPRESS_LOG]: () => ({typeColor: COLORS.DARK_CYAN, icon: LOG_SYMBOLS.INFO}),
+  [LOG_TYPES.CYPRESS_XHR]: (options) => ({
+    typeColor: COLORS.LIGHT_GREY,
+    icon: LOG_SYMBOLS.ROUTE,
+    messageColor: COLORS.LIGHT_GREY,
+    trim: options.routeTrimLength,
+  }),
+  [LOG_TYPES.CYPRESS_FETCH]: (options) => ({
+    typeColor: COLORS.GREEN,
+    icon: LOG_SYMBOLS.ROUTE,
+    trim: options.routeTrimLength,
+    messageColor: COLORS.GREY,
+  }),
+  [LOG_TYPES.CYPRESS_INTERCEPT]: (options) => ({
+    typeColor: COLORS.GREEN,
+    icon: LOG_SYMBOLS.ROUTE,
+    messageColor: COLORS.GREY,
+    trim: options.routeTrimLength,
+  }),
+  [LOG_TYPES.CYPRESS_REQUEST]: (options) => ({
+    typeColor: COLORS.GREEN,
+    icon: LOG_SYMBOLS.SUCCESS,
+    messageColor: COLORS.GREY,
+    trim: options.routeTrimLength,
+  }),
+  [LOG_TYPES.CYPRESS_COMMAND]: () => ({
+    typeColor: COLORS.GREEN,
+    icon: LOG_SYMBOLS.SUCCESS,
+  }),
+};
+
+// https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript
+export function escapeHtml(html: string) {
+  return html
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/**
+ * Format an individual Cypress message for HTML logging:
+ * - Convert cy.log markup syntax to HTML (bold/italic).
+ * - Color message depending on message type and severity.
+ * - Trim long messages.
+ * - Apply proper spacing, newlines, and HTML syntax.
+ */
+export function formatMessage({type, message, severity}: Log, options: PluginOptions) {
+  const messageConfig = MessageConfigMap[type](options);
+
+  let processedMessage = message;
+  let {typeColor, icon, messageColor, trim = options.defaultTrimLength} = messageConfig;
+
+  if (severity === 'error') {
+    typeColor = COLORS.RED;
+    icon = LOG_SYMBOLS.ERROR;
+  } else if (severity === 'warning') {
+    typeColor = COLORS.YELLOW;
+    icon = LOG_SYMBOLS.WARNING;
+  }
+
+  const maybeTrimLength = (msg: string) =>
+    trim && msg.length > trim
+      ? msg.substring(0, trim) + ' ...\n\n... remainder of log omitted ...\n'
+      : msg;
+
+  const processMessage = (msg: string) => escapeHtml(maybeTrimLength(msg));
+
+  if (type == 'cy:log') {
+    processedMessage = utils.applyMessageMarkdown(processedMessage, {
+      bold: (str) => `<b>${str}</b>`,
+      italic: (str) => `<i>${str}</i>`,
+      processContents: processMessage,
+    });
+  } else {
+    processedMessage = processMessage(processedMessage);
+  }
+
+  // If the message is multilined, align non-first lines with the "message column" that's
+  // to the right of the "type column"
+  processedMessage = processedMessage
+    .split('\n')
+    .map((line, index) => (index === 0 ? line : `${' '.repeat(TYPE_PADDING + 1)}${line}`))
+    .join('\n');
+
+  processedMessage = `<pre${messageColor ? ` style="color:${messageColor};"` : ''}>${processedMessage}</pre>`;
+
+  const typeString = `<pre style="color:${typeColor};">${
+    // pad to make "type column" spacing even
+    `${type}${icon}`.padStart(TYPE_PADDING, ' ')
+  }</pre>`;
+
+  return `<p>${typeString} ${processedMessage}</p>\n`;
+}
+
+/**
+ *  Custom html output processor intended to be used with
+ * `cypress-terminal-report`. Generates detailed html log files that log
+ *  every Cypress message in a test-- in other words, log exactly what is
+ *  in the messages window when running `cypress open`)
+ *
+ *  Example usage in config file:
+ *  ```
+ * import installTerminalReporter from
+ *    'cypress-terminal-report/src/installLogsPrinter'
+ *
+ * installTerminalReporter(on, {
+      printLogsToFile: 'always',
+      outputRoot: config.reporterOptions.resultsDir,
+      specRoot: config.reporterOptions.testsDir,
+      outputTarget:()=>({ 'logs|html': detailedLogHtmlOutputProcessor }),
+    })
+    ```
+ */
+export default class HtmlOutputProcessor extends BaseOutputProcessor {
+  private closingContent = `
+</body>
+</html>`;
+  private beforeClosingContentPos = -this.closingContent.length;
+
+  constructor(
+    protected file: string,
+    protected options: PluginOptions
+  ) {
+    super(file, options);
+    this.initialContent = `<html>
+<head>
+  <style>
+    body { font-family: monospace; }
+    p { margin: 0; padding: 0; }
+    pre { display: inline; margin: 0; }
+    h2 { margin: 0; font-size: 1.2em; }
+  </style>
+</head>
+
+<body>
+${this.closingContent}`;
+  }
+
+  write(allMessages: AllMessages) {
+    for (const [spec, tests] of Object.entries(allMessages)) {
+      let html = `\n<h1>${escapeHtml(spec)}</h1>\n`;
+
+      for (const [test, messages] of Object.entries(tests)) {
+        html += `<h2>${escapeHtml(test)}</h2>\n`;
+        for (const message of messages) {
+          html += formatMessage(message, this.options);
+        }
+        html += '<br>\n';
+      }
+
+      this.writeSpecChunk(spec, html, this.beforeClosingContentPos);
+    }
+  }
+}

src/outputProcessor/consoleProcessor.ts

@@ -89,14 +89,15 @@ const getTypeString = (type: LogType, icon: LogSymbols, color: Colors, padding:
     return TYPE_STRING_CACHE[key];
   }
 
-  const typeString = padType(KNOWN_LOG_TYPES.includes(type) ? type : '[unknown]', padding);
-  const fullString = typeString + icon + ' ';
-  const coloredTypeString = BOLD_COLORS.includes(color)
-    ? chalk[color].bold(fullString)
-    : chalk[color](fullString);
-
-  TYPE_STRING_CACHE[key] = coloredTypeString;
-  return coloredTypeString;
+  let typeString = padType(KNOWN_LOG_TYPES.includes(type) ? type : '[unknown]', padding);
+  typeString += icon + ' ';
+  typeString = chalk[color](typeString);
+  if (BOLD_COLORS.includes(color)) {
+    typeString = chalk.bold(typeString);
+  }
+
+  TYPE_STRING_CACHE[key] = typeString;
+  return typeString;
 };
 
 function consoleProcessor(messages: Log[], options: PluginOptions, data: MessageData) {

src/outputProcessor/logsTxtFormatter.ts

@@ -2,7 +2,7 @@ import CONSTANTS from '../constants';
 import type {Log, Severity} from '../types';
 
 const PADDING = '    ';
-const PADDING_LOGS = `${PADDING}`.repeat(6);
+const PADDING_LOGS = PADDING.repeat(6);
 const SEVERITY_ICON = {
   [CONSTANTS.SEVERITY.ERROR]: 'X',
   [CONSTANTS.SEVERITY.WARNING]: '!',

src/types.ts

@@ -29,7 +29,7 @@ export type State = ValueOf<typeof CONSTANTS.STATE>;
 
 export type CommandTimings = ValueOf<typeof CONSTANTS.COMMAND_TIMINGS>;
 
-export type BuiltinOutputProcessorsTypes = 'txt' | 'json';
+export type BuiltinOutputProcessorsTypes = 'txt' | 'json' | 'html';
 
 // *****************************************************************************
 // Objects

test/cypress.config.js

@@ -25,6 +25,7 @@ module.exports = defineConfig({
           'not/existing/path/out.txt': 'txt',
           'out.txt': 'txt',
           'out.json': 'json',
+          'out.html': 'html',
           'out.cst': function (allMessages) {
             this.initialContent = 'Specs:\n';
             this.chunkSeparator = '\n';
@@ -40,6 +41,7 @@ module.exports = defineConfig({
         options.outputTarget = {
           'txt|txt': 'txt',
           'json|json': 'json',
+          'html|html': 'html',
           'custom|cst': function (allMessages) {
             this.initialContent = 'Specs:\n';
             this.chunkSeparator = '\n';