@estruyf/github-actions-reporter - npm Package Compare versions

Comparing version 1.9.2 to 1.10.0-beta.1128978

CHANGELOG.md

@@ -5,2 +5,6 @@ # Changelog
 
+## [1.10.0]
+
+- [#19](https://github.com/estruyf/playwright-github-actions-reporter/issues/19): Added the ability to show image attachments in the summary
+
 ## [1.9.2]
@@ -7,0 +11,0 @@

dist/index.js

@@ -55,3 +55,3 @@ "use strict";
         }
-        if (process.env.NODE_ENV === "development") {
+        if (process.env.NODE_ENV === "development" || options.debug) {
             console.log(`Using development mode`);
@@ -58,0 +58,0 @@ console.log(`Options: ${JSON.stringify(this.options, null, 2)}`);

dist/models/GitHubActionOptions.d.ts

@@ -10,2 +10,5 @@ import { DisplayLevel } from ".";
     includeResults?: DisplayLevel[];
+    debug?: boolean;
+    azureStorageUrl?: string;
+    azureStorageSAS?: string;
 }

dist/models/index.d.ts

@@ -0,2 +1,3 @@
+export * from "./BlobService";
 export * from "./DisplayLevel";
 export * from "./GitHubActionOptions";

dist/models/index.js

@@ -17,3 +17,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BlobService"), exports);
 __exportStar(require("./DisplayLevel"), exports);
 __exportStar(require("./GitHubActionOptions"), exports);

dist/utils/getHtmlTable.d.ts

 import { TestCase } from "@playwright/test/reporter";
-import { DisplayLevel } from "../models";
-export declare const getHtmlTable: (tests: TestCase[], showAnnotations: boolean, showTags: boolean, showError: boolean, displayLevel: DisplayLevel[]) => Promise<string | undefined>;
+import { BlobService, DisplayLevel } from "../models";
+export declare const getHtmlTable: (tests: TestCase[], showAnnotations: boolean, showTags: boolean, showError: boolean, displayLevel: DisplayLevel[], blobService?: BlobService) => Promise<string | undefined>;

dist/utils/getHtmlTable.js

@@ -23,5 +23,7 @@ "use strict";
 const getTestDuration_1 = require("./getTestDuration");
-const getHtmlTable = (tests, showAnnotations, showTags, showError, displayLevel) => __awaiter(void 0, void 0, void 0, function* () {
+const processAttachments_1 = require("./processAttachments");
+const getHtmlTable = (tests, showAnnotations, showTags, showError, displayLevel, blobService) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     const convert = new ansi_to_html_1.default();
+    const hasBlobService = blobService && blobService.azure;
     const content = [];
@@ -41,2 +43,5 @@ content.push(`<br>`);
         content.push(`<th>Error</th>`);
+        if (hasBlobService) {
+            content.push(`<th>Attachments</th>`);
+        }
     }
@@ -61,2 +66,5 @@ content.push(`</tr>`);
                 colLength++;
+                if (hasBlobService) {
+                    colLength++;
+                }
             }
@@ -81,2 +89,10 @@ const annotations = yield (0, getTestAnnotations_1.getTestAnnotations)(test);
             testRows.push(`<td>${convert.toHtml(error)}</td>`);
+            if (hasBlobService) {
+                const mediaFiles = (yield (0, processAttachments_1.processAttachments)(blobService, result.attachments)) || [];
+                const mediaLinks = mediaFiles
+                    .map((m) => `<p align="center"><img src="${m.url}" alt="${m.name}" width="250"></p>
+<p align="center"><b>${m.name}</b></p>`)
+                    .join(", ");
+                testRows.push(`<td>${mediaLinks}</td>`);
+            }
         }
@@ -83,0 +99,0 @@ testRows.push(`</tr>`);

dist/utils/getTableRows.d.ts

 import { SummaryTableRow } from "@actions/core/lib/summary";
 import { TestCase } from "@playwright/test/reporter";
-import { DisplayLevel } from "../models";
-export declare const getTableRows: (tests: TestCase[], showAnnotations: boolean, showTags: boolean, showError: boolean, displayLevel: DisplayLevel[]) => Promise<SummaryTableRow[]>;
+import { BlobService, DisplayLevel } from "../models";
+export declare const getTableRows: (tests: TestCase[], showAnnotations: boolean, showTags: boolean, showError: boolean, displayLevel: DisplayLevel[], blobService?: BlobService) => Promise<SummaryTableRow[]>;

dist/utils/getTableRows.js

@@ -23,5 +23,7 @@ "use strict";
 const getTestStatusIcon_1 = require("./getTestStatusIcon");
-const getTableRows = (tests, showAnnotations, showTags, showError, displayLevel) => __awaiter(void 0, void 0, void 0, function* () {
+const processAttachments_1 = require("./processAttachments");
+const getTableRows = (tests, showAnnotations, showTags, showError, displayLevel, blobService) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     const convert = new ansi_to_html_1.default();
+    const hasBlobService = blobService && blobService.azure;
     const tableHeaders = [
@@ -56,2 +58,8 @@ {
         });
+        if (hasBlobService) {
+            tableHeaders.push({
+                data: "Attachments",
+                header: true,
+            });
+        }
     }
@@ -74,2 +82,5 @@ const tableRows = [];
                 colLength++;
+                if (hasBlobService) {
+                    colLength++;
+                }
             }
@@ -117,2 +128,12 @@ const annotations = yield (0, getTestAnnotations_1.getTestAnnotations)(test);
             });
+            if (hasBlobService) {
+                const mediaFiles = (yield (0, processAttachments_1.processAttachments)(blobService, result.attachments)) || [];
+                tableRow.push({
+                    data: (mediaFiles || [])
+                        .map((m) => `<p align="center"><img src="${m.url}" alt="${m.name}" width="250"></p>
+<p align="center"><b>${m.name}</b></p>`)
+                        .join("\n\n"),
+                    header: false,
+                });
+            }
         }
@@ -119,0 +140,0 @@ tableRows.push(tableRow);

dist/utils/processResults.js

@@ -60,2 +60,9 @@ "use strict";
         const summary = core.summary;
+        let blobService = undefined;
+        if (options.azureStorageSAS && options.azureStorageUrl) {
+            blobService = {};
+            blobService.azure = {};
+            blobService.azure.azureStorageSAS = options.azureStorageSAS;
+            blobService.azure.azureStorageUrl = options.azureStorageUrl;
+        }
         const summaryTitle = (0, getSummaryTitle_1.getSummaryTitle)(options.title);
@@ -76,3 +83,3 @@ if (summaryTitle) {
                 if (options.useDetails) {
-                    const content = yield (0, getHtmlTable_1.getHtmlTable)(tests[filePath], options.showAnnotations, options.showTags, !!options.showError, options.includeResults);
+                    const content = yield (0, getHtmlTable_1.getHtmlTable)(tests[filePath], options.showAnnotations, options.showTags, !!options.showError, options.includeResults, blobService);
                     if (!content) {
@@ -86,3 +93,3 @@ continue;
                 else {
-                    const tableRows = yield (0, getTableRows_1.getTableRows)(tests[filePath], options.showAnnotations, options.showTags, !!options.showError, options.includeResults);
+                    const tableRows = yield (0, getTableRows_1.getTableRows)(tests[filePath], options.showAnnotations, options.showTags, !!options.showError, options.includeResults, blobService);
                     if (tableRows.length !== 0) {
@@ -89,0 +96,0 @@ summary.addHeading((0, getTestHeading_1.getTestHeading)(fileName, os, project), 2);

package.json

 {
   "name": "@estruyf/github-actions-reporter",
-  "version": "1.9.2",
+  "version": "1.10.0-beta.1128978",
   "description": "GitHub Actions reporter for Playwright",
@@ -49,2 +49,2 @@ "main": "dist/index.js",
   }
-}
+}

README.md

@@ -43,2 +43,4 @@ # GitHub Actions Reporter for Playwright
 | quiet | Do not show any output in the console | `false` |
+| azureStorageUrl | URL to the Azure Storage account where the screenshots are stored (optional) | `""` |
+| azureStorageSAS | Shared Access Signature (SAS) token to access the Azure Storage account (optional) | `""` |
 
@@ -70,2 +72,48 @@ To use these option, you can update the reporter configuration:
 
+## Showing result attachments
+
+If you want to show attachments like when you use pixel matching, you need to provide the configuration for the blob service where the images will be stored.
+
+> [!NOTE]
+> GitHub does not have an API to link images to the summary. Therefore, you need to store the images in a blob storage service and provide the URL to the images.
+
+> [!IMPORTANT]
+> To show the attachments, you need to make sure to enable `showError` as well.
+
+![Example with attachments](./assets/example-with-attachments.png)
+
+### Azure Blob Storage
+
+If you are using Azure Blob Storage, you need to provide the `azureStorageUrl` and `azureStorageSAS` configuration options.
+
+Follow the next steps to get the URL and SAS token:
+
+- Go to your Azure Portal
+- Navigate to your storage account or create a new one
+- Navigate to **data storage** > **containers**
+- Create a new container. Set the access level to **Blob (anonymous read access for blobs only)**
+- Open the container, and click on **Shared access signature**
+- Create a new shared access signature with the following settings:
+  - Allowed permissions: **Create**
+  - Expiry time: **Custom** (set the time you want)
+  - Allowed protocols: **HTTPS only**
+- Click on **Generate SAS and URL**
+- Copy the **Blob SAS token**, this will be your `azureStorageSAS` value
+- Copy the **Blob service URL** and append the container name to it, this will be your `azureStorageUrl` value. Example: `https://<name>.blob.core.windows.net/<container-name>`.
+- Update the `playwright.config.js` file with the following configuration:
+
+```ts
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  reporter: [
+    ['@estruyf/github-actions-reporter', {
+      showError: true,
+      azureStorageUrl: 'https://<name>.blob.core.windows.net/<container-name>',
+      azureStorageSAS: '<your-sas-token>'
+    }]
+  ],
+});
+```
+
 [![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fplaywright-github-actions-reporter&countColor=%23263759)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Festruyf%2Fplaywright-github-actions-reporter)

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46260

26.17%

Number of package files

65

10.17%

Lines of code

918

21.27%

Number of lines in readme file

118

68.57%

Worsened metrics

Number of low quality alerts

1

Infinity%

Number of low supply chain risk alerts

8

33.33%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes