Add rudimentary support for videos in reports

These are currently inlined. Furthermore, these are not available in
JSON reports. This fixes #1139 [1].

[1] #1139

Author: badeball

CHANGELOG.md

@@ -28,6 +28,12 @@ Other changes:
 
 - Remove use of patch-package in development mode, which was causing some issues, closes [#1255](https://github.com/badeball/cypress-cucumber-preprocessor/pull/1255).
 
+- Add rudimentary support for videos in reports (messages & HTML), fixes [#1139](https://github.com/badeball/cypress-cucumber-preprocessor/issues/1139).
+
+  - This can be enabled by setting `attachments.addVideos` to `true`.
+
+  - Videos, as with screenshots, are base64-encoded inline within the reports, making them bigger. I suspect size might be an issue for large attachments and this is why I consider this to be rudimentary to begin with. As issues arise, options to externalize attachments might be considered.
+
 ## v23.2.1
 
 - Determine interactive mode correctly, fixes [#1323](https://github.com/badeball/cypress-cucumber-preprocessor/issues/1323).

features/reporters/html.feature

@@ -41,6 +41,50 @@ Feature: html report
     Then it passes
     And the report should display when last run
 
+  Scenario: videos
+    Given additional Cypress configuration
+      """
+      {
+        "e2e": {
+          "video": true
+        }
+      }
+      """
+    And additional preprocessor configuration
+      """
+      {
+        "attachments": {
+          "addVideos": true
+        }
+      }
+      """
+    And a file named "cypress/e2e/duckduckgo.feature" with:
+      """
+      Feature: duckduckgo.com
+        Scenario: visiting the frontpage
+          When I visit duckduckgo.com
+          Then I should see a search bar
+      """
+    And a file named "cypress/support/step_definitions/steps.js" with:
+      """
+      import { When, Then } from "@badeball/cypress-cucumber-preprocessor";
+      When("I visit duckduckgo.com", () => {
+        cy.visit("https://duckduckgo.com/");
+      });
+      Then("I should see a search bar", () => {
+        cy.get("input[type=text]")
+          .should("have.attr", "placeholder")
+          .and(
+            "match",
+            /Search the web without being tracked|Search without being tracked/,
+          );
+      });
+
+      """
+    When I run cypress
+    Then it passes
+    And the report should have a video attachment
+
   Rule: it should obey `omitFiltered`
     Background:
       Given additional preprocessor configuration

features/reporters/messages.feature

@@ -757,3 +757,55 @@ Feature: messages report
       When I run cypress
       Then it passes
       And there should be a messages similar to "fixtures/multiple-scenarios-reloaded.ndjson"
+
+  Rule: it should allow for videos to be attached
+
+    Background:
+      Given additional Cypress configuration
+        """
+        {
+          "e2e": {
+            "video": true
+          }
+        }
+        """
+
+    Scenario: with addVideos disabled (default)
+      Given a file named "cypress/e2e/a.feature" with:
+        """
+        Feature: a feature
+          Scenario: a scenario
+            Given a step
+        """
+      And a file named "cypress/support/step_definitions/steps.js" with:
+        """
+        const { Given } = require("@badeball/cypress-cucumber-preprocessor");
+        Given("a step", function() {});
+        """
+      When I run cypress
+      Then it passes
+      And there should be a messages similar to "fixtures/passed-example.ndjson"
+
+    Scenario: with addVideos enabled
+      Given additional preprocessor configuration
+        """
+        {
+          "attachments": {
+            "addVideos": true
+          }
+        }
+        """
+      And a file named "cypress/e2e/a.feature" with:
+        """
+        Feature: a feature
+          Scenario: a scenario
+            Given a step
+        """
+      And a file named "cypress/support/step_definitions/steps.js" with:
+        """
+        const { Given } = require("@badeball/cypress-cucumber-preprocessor");
+        Given("a step", function() {});
+        """
+      When I run cypress
+      Then it passes
+      And the messages report should contain a video attachment

features/step_definitions/html_steps.ts

@@ -98,6 +98,23 @@ Then(
   },
 );
 
+Then(
+  "the report should have a video attachment",
+  async function (this: ICustomWorld) {
+    const dom = await JSDOM.fromFile(
+      path.join(this.tmpDir, "cucumber-report.html"),
+      { runScripts: "dangerously" },
+    );
+
+    const el = await findByText(
+      dom.window.document.documentElement,
+      /\w+\.feature\.mp4/,
+    );
+
+    assert(el);
+  },
+);
+
 /**
  * This is rather fudgy, due to number of X steps no longer being displayed in the reports after
  * a major refactor of @cucumber/react-components.

features/step_definitions/messages_steps.ts

@@ -103,6 +103,23 @@ Then(
   },
 );
 
+Then(
+  "the messages report should contain no attachments",
+  async function (this: ICustomWorld) {
+    const messages = await readMessagesReport(this.tmpDir);
+
+    const attachments: messages.Attachment[] = messages
+      .map((m) => m.attachment)
+      .filter(notEmpty);
+
+    if (attachments.length > 0) {
+      throw new Error(
+        `Expected to find np attachments, but found ${attachments.length}`,
+      );
+    }
+  },
+);
+
 Then(
   "the messages report should contain an image attachment for what appears to be a screenshot",
   async function (this: ICustomWorld) {
@@ -149,6 +166,29 @@ Then(
   },
 );
 
+Then(
+  "the messages report should contain a video attachment",
+  async function (this: ICustomWorld) {
+    const messages = await readMessagesReport(this.tmpDir);
+
+    const attachments: messages.Attachment[] = messages
+      .map((m) => m.attachment)
+      .filter(notEmpty);
+
+    if (attachments.length === 0) {
+      throw new Error("Expected to find an attachment, but found none");
+    } else if (attachments.length > 1) {
+      throw new Error(
+        "Expected to find a single attachment, but found " + attachments.length,
+      );
+    }
+
+    const [attachment] = attachments;
+
+    assert.strictEqual(attachment.mediaType, "video/mp4");
+  },
+);
+
 Then(
   "the messages report shouldn't contain any specs",
   async function (this: ICustomWorld) {

lib/plugin-event-handlers.ts

@@ -10,6 +10,7 @@ import detectCiEnvironment from "@cucumber/ci-environment";
 import * as messages from "@cucumber/messages";
 import chalk from "chalk";
 import split from "split";
+import { v4 as uuid } from "uuid";
 
 import {
   ALL_HOOK_FAILURE_EXPR,
@@ -400,6 +401,79 @@ export async function afterRunHandler(
       throw createStateError("afterRunHandler", state.state);
   }
 
+  if (preprocessor.attachments.addVideos && "runs" in results) {
+    const hasVideos = results.runs.some((run) => run.video !== null);
+
+    if (hasVideos) {
+      const hookId = uuid();
+      const testRunHookStartedId = uuid();
+      const testRunStartedId = ensure(
+        config.env["testRunStartedId"],
+        "Expected to find a testRunStartedId",
+      );
+
+      state.messages.accumulation.push(
+        {
+          hook: {
+            id: hookId,
+            type: messages.HookType.AFTER_TEST_RUN,
+            name: "cypress-cucumber-preprocessor: Spec videos",
+            sourceReference: {
+              uri: "cypress-cucumber-preprocessor:internal",
+              location: { line: 0 },
+            },
+          },
+        },
+        {
+          testRunHookStarted: {
+            id: testRunHookStartedId,
+            hookId,
+            testRunStartedId,
+            timestamp: createTimestamp(),
+          },
+        },
+      );
+
+      for (const run of results.runs) {
+        if (!run.video) {
+          continue;
+        }
+
+        const filePath = path.relative(
+          config.projectRoot,
+          path.join(
+            preprocessor.implicitIntegrationFolder,
+            path.relative(config.videosFolder, run.video),
+          ),
+        );
+
+        state.messages.accumulation.push({
+          attachment: {
+            testRunHookStartedId,
+            body: await fs.readFile(run.video, { encoding: "base64" }),
+            fileName: filePath,
+            contentEncoding: messages.AttachmentContentEncoding.BASE64,
+            mediaType: "video/mp4",
+          },
+        });
+      }
+
+      state.messages.accumulation.push({
+        testRunHookFinished: {
+          testRunHookStartedId,
+          result: {
+            duration: {
+              seconds: 0,
+              nanos: 0,
+            },
+            status: messages.TestStepResultStatus.PASSED,
+          },
+          timestamp: createTimestamp(),
+        },
+      });
+    }
+  }
+
   const testRunFinished: messages.Envelope = {
     testRunFinished: {
       success: "totalFailed" in results ? results.totalFailed === 0 : false,

lib/preprocessor-configuration.test.ts

@@ -1007,6 +1007,25 @@ describe("resolve()", () => {
             setValueFn,
           });
         });
+
+        describe("addVideos", () => {
+          const getValueFn = (
+            configuration: IPreprocessorConfiguration,
+          ): boolean => configuration.attachments.addVideos;
+
+          const setValueFn = (
+            configuration: IBaseUserConfiguration,
+            value: boolean,
+          ) => (configuration.attachments = { addVideos: value });
+
+          basicBooleanExample({
+            testingType,
+            default: false,
+            environmentKey: "attachmentsAddVideos",
+            getValueFn,
+            setValueFn,
+          });
+        });
       });
     });
   }

lib/preprocessor-configuration.ts

@@ -80,6 +80,7 @@ const EnvironmentOverrides = D.partial({
   omitFiltered: StringishToBoolean,
   dryRun: StringishToBoolean,
   attachmentsAddScreenshots: StringishToBoolean,
+  attachmentsAddVideos: StringishToBoolean,
 });
 
 type IEnvironmentOverrides = D.TypeOf<typeof EnvironmentOverrides>;
@@ -114,6 +115,7 @@ const BaseConfiguration = D.partial({
   dryRun: D.boolean,
   attachments: D.partial({
     addScreenshots: D.boolean,
+    addVideos: D.boolean,
   }),
 });
 
@@ -160,6 +162,7 @@ export interface IPreprocessorConfiguration {
   readonly dryRun: boolean;
   readonly attachments: {
     addScreenshots: boolean;
+    addVideos: boolean;
   };
 }
 
@@ -308,6 +311,11 @@ export function combineIntoConfiguration(
       specific?.attachments?.addScreenshots ??
       unspecific.attachments?.addScreenshots ??
       true,
+    addVideos:
+      overrides.attachmentsAddVideos ??
+      specific?.attachments?.addVideos ??
+      unspecific.attachments?.addVideos ??
+      false,
   };
 
   return {

package.json

@@ -66,7 +66,7 @@
     "@cucumber/cucumber": "^12.0.0",
     "@cucumber/cucumber-expressions": "^18.0.0",
     "@cucumber/gherkin": "^37.0.0",
-    "@cucumber/html-formatter": "^22.0.0",
+    "@cucumber/html-formatter": "^22.2.0",
     "@cucumber/message-streams": "^4.0.1",
     "@cucumber/messages": "^31.0.0",
     "@cucumber/pretty-formatter": "^1.0.1",