Feat/screenshot (#22)

* feat: add screenshot and attachments

Author: Ma11hewThomas

.github/workflows/main.yaml

@@ -6,6 +6,9 @@ on:
   pull_request:
     branches: [main]
 
+env:
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -28,21 +31,17 @@ jobs:
       - run: npm ci
       - run: npm run build
       - run: npm run test
-      - name: Publish Test Results summary
-        run: npx github-actions-ctrf summary ctrf/ctrf-report.json
-      - name: Publish CTRF Failed Test Summary Results
-        run: npx github-actions-ctrf failed ctrf/ctrf-report.json
-      - name: Publish CTRF Flaky Test Summary Results
-        run: npx github-actions-ctrf flaky ctrf/ctrf-report.json
-      - name: Publish CTRF Detailed Test Summary Results
-        run: npx github-actions-ctrf tests ctrf/ctrf-report.json
-      - name: Annotate failed tests
-        run: npx github-actions-ctrf annotate ctrf/ctrf-report.json
       - run: npm run lint-check
       - run: npm run format-check
-
-      # - name: Upload report as artifact
-      #   uses: actions/upload-artifact@v2
-      #   with:
-      #     name: ctrf-report
-      #     path: ctrf/ctrf-report.json
+      - name: Publish Test Report
+        uses: ctrf-io/github-test-reporter@v1
+        with:
+          report-path: './ctrf/*.json'
+          upload-artifact: true
+        if: always()
+      - name: Publish Test Report
+        uses: ctrf-io/github-test-reporter@v1
+        with:
+          report-path: './ctrf/*.json'
+          pull-request-report: true
+        if: always()

README.md

@@ -66,16 +66,6 @@ Explore more <a href="https://www.ctrf.io/integrations">integrations</a>
 }
 ```
 
-## What is CTRF?
-
-CTRF is a universal JSON test report schema that addresses the lack of a standardized format for JSON test reports.
-
-**Consistency Across Tools:** Different testing tools and frameworks often produce reports in varied formats. CTRF ensures a uniform structure, making it easier to understand and compare reports, regardless of the testing tool used.
-
-**Language and Framework Agnostic:** It provides a universal reporting schema that works seamlessly with any programming language and testing framework.
-
-**Facilitates Better Analysis:** With a standardized format, programatically analyzing test outcomes across multiple platforms becomes more straightforward.
-
 ## Installation
 
 ```bash
@@ -215,23 +205,79 @@ module.exports = defineConfig({
 })
 ```
 
+## Screenshots
+
+Enable base-64 screenshots in your test report by setting the `screenshot` option to `true`.
+
+Supports only the default [Cypress screenshot naming convention](https://docs.cypress.io/api/commands/screenshot#Naming-conventions).
+
+Captures a single screenshot per test, prioritizing failed screenshots.
+
+Uses the following file structure:
+
+`{screenshotsFolder}/{adjustedSpecPath}/{testName} (failed).png`
+
+If no failed screenshots are found, the last captured screenshot for the test is used (if following the default naming convention).
+
+If no screenshots are available, the screenshot property is omitted from the report.
+
+base-64 screenshots can increase the size of the report significantly.
+
+Screenshot file paths are also included as attachments in the report as follows:
+
+```json
+"attachments": [
+  {
+    "name": "screenshot",
+    "contentType": "image/png",
+    "path": "/path/to/screenshot.png"
+  }
+]
+```
+
+## Video
+
+Videos are included as attachments in the report.
+
+```json
+"attachments": [
+  {
+    "name": "video",
+    "contentType": "video/mp4",
+    "path": "/path/to/video.mp4"
+  }
+]
+```
+
 ## Test Object Properties
 
 The test object in the report includes the following [CTRF properties](https://ctrf.io/docs/schema/test):
 
-| Name        | Type    | Required | Details                                                                             |
-| ----------- | ------- | -------- | ----------------------------------------------------------------------------------- |
-| `name`      | String  | Required | The name of the test.                                                               |
-| `status`    | String  | Required | The outcome of the test. One of: `passed`, `failed`, `skipped`, `pending`, `other`. |
-| `duration`  | Number  | Required | The time taken for the test execution, in milliseconds.                             |
-| `message`   | String  | Optional | The failure message if the test failed.                                             |
-| `trace`     | String  | Optional | The stack trace captured if the test failed.                                        |
-| `rawStatus` | String  | Optional | The original cypress status of the test before mapping to CTRF status.              |
-| `type`      | String  | Optional | The type of test (e.g., `api`, `e2e`).                                              |
-| `filepath`  | String  | Optional | The file path where the test is located in the project.                             |
-| `retries`   | Number  | Optional | The number of retries attempted for the test.                                       |
-| `flaky`     | Boolean | Optional | Indicates whether the test result is flaky.                                         |
-| `browser`   | String  | Optional | The browser used for the test.                                                      |
+| Name          | Type    | Required | Details                                                                             |
+| ------------- | ------- | -------- | ----------------------------------------------------------------------------------- |
+| `name`        | String  | Required | The name of the test.                                                               |
+| `status`      | String  | Required | The outcome of the test. One of: `passed`, `failed`, `skipped`, `pending`, `other`. |
+| `duration`    | Number  | Required | The time taken for the test execution, in milliseconds.                             |
+| `message`     | String  | Optional | The failure message if the test failed.                                             |
+| `trace`       | String  | Optional | The stack trace captured if the test failed.                                        |
+| `rawStatus`   | String  | Optional | The original cypress status of the test before mapping to CTRF status.              |
+| `type`        | String  | Optional | The type of test (e.g., `api`, `e2e`).                                              |
+| `filepath`    | String  | Optional | The file path where the test is located in the project.                             |
+| `retries`     | Number  | Optional | The number of retries attempted for the test.                                       |
+| `flaky`       | Boolean | Optional | Indicates whether the test result is flaky.                                         |
+| `browser`     | String  | Optional | The browser used for the test.                                                      |
+| `screenshot`  | String  | Optional | The base-64 screenshot of the test.                                                 |
+| `attachments` | Array   | Optional | The attachments of the test.                                                        |
+
+## What is CTRF?
+
+CTRF is a universal JSON test report schema that addresses the lack of a standardized format for JSON test reports.
+
+**Consistency Across Tools:** Different testing tools and frameworks often produce reports in varied formats. CTRF ensures a uniform structure, making it easier to understand and compare reports, regardless of the testing tool used.
+
+**Language and Framework Agnostic:** It provides a universal reporting schema that works seamlessly with any programming language and testing framework.
+
+**Facilitates Better Analysis:** With a standardized format, programatically analyzing test outcomes across multiple platforms becomes more straightforward.
 
 ## Support Us
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-ctrf-json-reporter",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Generate a common JSON test report for Cypress tests",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -2,6 +2,7 @@ import fs = require('fs')
 import path = require('path')
 
 import {
+  type CtrfAttachment,
   type CtrfEnvironment,
   type CtrfReport,
   type CtrfTest,
@@ -54,6 +55,7 @@ export class GenerateCtrfReport {
       outputFile: reporterOptions?.outputFile ?? this.defaultOutputFile,
       outputDir: reporterOptions?.outputDir ?? this.defaultOutputDir,
       minimal: reporterOptions?.minimal ?? false,
+      screenshot: reporterOptions?.screenshot ?? false,
       testType: reporterOptions?.testType ?? 'e2e',
       appName: reporterOptions?.appName ?? undefined,
       appVersion: reporterOptions?.appVersion ?? undefined,
@@ -178,6 +180,18 @@ export class GenerateCtrfReport {
         ctrfTest.retries = attemptsLength - 1
         ctrfTest.flaky = isFlaky
         ctrfTest.browser = this.browser
+        const screenshot = this.getScreenshot(test, cypressResults, false)
+        if (screenshot !== undefined && typeof screenshot === 'string') {
+          ctrfTest.screenshot = screenshot
+        }
+      }
+      const attachments = this.getAttachments(test, cypressResults)
+      if (attachments.length > 0) {
+        if (ctrfTest.attachments !== undefined) {
+          ctrfTest.attachments = [...ctrfTest.attachments, ...attachments]
+        } else {
+          ctrfTest.attachments = attachments
+        }
       }
       this.ctrfReport.results.tests.push(ctrfTest)
     })
@@ -265,6 +279,107 @@ export class GenerateCtrfReport {
     return failureDetails
   }
 
+  private getScreenshot(
+    test: CypressTest,
+    results: CypressAfterSpecResults,
+    returnAttachmentObjects: boolean = false
+  ): string | CtrfAttachment[] | undefined {
+    if (
+      this.reporterConfigOptions.screenshot === false &&
+      !returnAttachmentObjects
+    ) {
+      return undefined
+    }
+
+    if (results.screenshots === undefined || results.screenshots.length === 0) {
+      return undefined
+    }
+
+    const testScreenshots = results.screenshots.filter(
+      (screenshot) =>
+        screenshot.path !== undefined &&
+        screenshot.path !== '' &&
+        screenshot.path.includes(test.title.join(' -- '))
+    )
+
+    if (testScreenshots.length === 0) {
+      return undefined
+    }
+
+    if (returnAttachmentObjects) {
+      return testScreenshots.map((screenshot) => ({
+        name: 'screenshot',
+        contentType: 'image/png',
+        path: screenshot.path,
+      }))
+    }
+
+    let matchingScreenshot = testScreenshots.find((screenshot) =>
+      screenshot.path.includes('(failed)')
+    )
+
+    if (matchingScreenshot === undefined && testScreenshots.length > 0) {
+      matchingScreenshot = testScreenshots[testScreenshots.length - 1]
+    }
+
+    if (matchingScreenshot !== undefined) {
+      try {
+        const screenshotData = fs.readFileSync(matchingScreenshot.path, {
+          encoding: 'base64',
+        })
+        return screenshotData
+      } catch (error) {
+        console.warn(
+          `Error reading screenshot file ${matchingScreenshot.path}:`,
+          error
+        )
+        return undefined
+      }
+    }
+
+    return undefined
+  }
+
+  private getAttachments(
+    test: CypressTest,
+    results: CypressAfterSpecResults
+  ): CtrfAttachment[] {
+    const attachments: CtrfAttachment[] = []
+
+    if (results.screenshots !== undefined && results.screenshots.length > 0) {
+      try {
+        const screenshots = this.getScreenshot(test, results, true)
+        if (screenshots !== undefined && Array.isArray(screenshots)) {
+          attachments.push(...screenshots)
+        }
+      } catch (error) {
+        console.error('Error processing screenshot attachments:', error)
+      }
+    }
+
+    if (
+      results.video !== undefined &&
+      results.video !== null &&
+      results.video.trim() !== ''
+    ) {
+      try {
+        if (fs.existsSync(results.video)) {
+          attachments.push({
+            name: 'video',
+            contentType: 'video/mp4',
+            path: results.video,
+          })
+        } else {
+          console.warn(`Video file not found: ${results.video}`)
+        }
+      } catch (error) {
+        console.warn('Error processing video attachment:', error)
+      }
+    }
+
+    return attachments
+  }
+
   private writeReportToFile(data: CtrfReport): void {
     const filePath = path.join(
       this.reporterConfigOptions.outputDir ?? this.defaultOutputDir,