Use log groups

Inspired by @j1000's Cypress Tips [1]. This fixes #796.

[1] https://j1000.github.io/blog/2022/10/27/enhanced_cypress_logging.html

Author: badeball

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## Unreleased
+
+- Log steps and commands using log groups, fixes [#796](https://github.com/badeball/cypress-cucumber-preprocessor/issues/796).
+
 ## v15.0.0
 
 - Drop support for Cypress v8.

lib/create-tests.ts

@@ -50,6 +50,8 @@ import { indent, stripIndent } from "./helpers/strings";
 
 import { generateSnippet } from "./snippets";
 
+import { runStepWithLogGroup } from "./cypress";
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace globalThis {
@@ -421,19 +423,6 @@ function createPickle(
           `Expected to find scenario step associated with id = ${pickleStep.astNodeIds?.[0]}`
         );
 
-        cy.then(() => {
-          window.testState.pickleStep = step.pickleStep;
-
-          Cypress.log({
-            name: "step",
-            displayName: assertAndReturn(
-              "keyword" in scenarioStep && scenarioStep.keyword,
-              "Expected to find a keyword in the scenario step"
-            ),
-            message: text,
-          });
-        });
-
         const argument: DataTable | string | undefined = pickleStep.argument
           ?.dataTable
           ? new DataTable(pickleStep.argument.dataTable)
@@ -442,6 +431,8 @@ function createPickle(
           : undefined;
 
         cy.then(() => {
+          window.testState.pickleStep = step.pickleStep;
+
           internalProperties.currentStep = { pickleStep };
 
           const start = createTimestamp();
@@ -461,13 +452,15 @@ function createPickle(
           return cy.wrap(start, { log: false });
         })
           .then((start) => {
-            const ensureChain = (value: unknown): Cypress.Chainable<unknown> =>
-              Cypress.isCy(value) ? value : cy.wrap(value, { log: false });
-
             try {
-              return ensureChain(
-                registry.runStepDefininition(this, text, argument)
-              ).then((result: unknown) => {
+              return runStepWithLogGroup({
+                keyword: assertAndReturn(
+                  "keyword" in scenarioStep && scenarioStep.keyword,
+                  "Expected to find a keyword in the scenario step"
+                ),
+                text,
+                fn: () => registry.runStepDefininition(this, text, argument),
+              }).then((result) => {
                 return {
                   start,
                   result,

lib/cypress.ts

@@ -0,0 +1,19 @@
+const ensureChain = (value: unknown): Cypress.Chainable<unknown> =>
+  Cypress.isCy(value) ? value : cy.wrap(value, { log: false });
+
+export function runStepWithLogGroup(options: {
+  fn: () => unknown;
+  keyword?: string;
+  text: string;
+}) {
+  Cypress.log({
+    name: options.keyword ?? "Step",
+    message: options.text,
+    groupStart: true,
+  } as object);
+
+  return ensureChain(options.fn()).then((result) => {
+    Cypress.log({ groupEnd: true, emitOnly: true } as object);
+    return result;
+  });
+}

lib/methods.ts

@@ -9,6 +9,8 @@ import {
 } from "./constants";
 import { InternalSpecProperties } from "./create-tests";
 
+import { runStepWithLogGroup } from "./cypress";
+
 import DataTable from "./data_table";
 
 import { getRegistry } from "./registry";
@@ -31,7 +33,11 @@ function runStepDefininition(
   text: string,
   argument?: DataTable | string
 ) {
-  getRegistry().runStepDefininition(world, text, argument);
+  runStepWithLogGroup({
+    keyword: "Step",
+    text,
+    fn: () => getRegistry().runStepDefininition(world, text, argument),
+  });
 }
 
 function defineParameterType<T, C extends Mocha.Context>(