Add Screenshot on fail plugin

Author: NikolayAvramov

@bellatrix/extras/src/plugins/ScreenshotOnFailPlugin.ts

@@ -0,0 +1,54 @@
+import { Plugin } from '@bellatrix/core/infrastructure';
+import { TestMetadata } from '@bellatrix/core/test/props';
+import { ServiceLocator } from '@bellatrix/core/utilities';
+import { App } from '@bellatrix/web/infrastructure';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export class ScreenshotOnFailPlugin extends Plugin {
+    override async preAfterTest(metadata: TestMetadata): Promise<void> {
+        if(metadata.error !== undefined) {
+            const app = ServiceLocator.resolve(App);
+            const screenshotImage = await app.browser.getScreenshot();
+            // Save the screenshot as an image file
+            try {
+                const savePath = this.saveImageFromBase64(screenshotImage.base64, '../reports/screenshots/' + metadata.testName); // TODO: take from config
+                console.info('\n Screenshot for failed test ' + metadata.testName + ': ' + savePath + '\n');
+            } catch (error) {
+                console.error('Error saving screenshot:', (error as Error).message);
+            }
+        }
+    }
+
+    /**
+     * Save a Base64 string as an image file
+     * @param base64String - The Base64 string of the image
+     * @param outputPath - The path to save the image file
+     */
+    private saveImageFromBase64(base64String: string, outputPath: string): string {
+        // Check if the Base64 string contains the data prefix (e.g., "data:image/png;base64,")
+        let matches = base64String.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/);
+        if (!matches || matches.length !== 3) {
+            base64String = 'data:image/png;base64,' + base64String;
+            matches = base64String.match(/^data:image\/([a-zA-Z]+);base64,(.+)$/);
+        }
+        // Extract the file extension and the Base64-encoded data
+        const fileExtension = matches[1]; // e.g., 'png', 'jpeg', etc.
+        const base64Data = matches[2];
+        // Decode the Base64 string into binary data
+        const binaryData = Buffer.from(base64Data, 'base64');
+        const arrayBufferView: Uint8Array = new Uint8Array(binaryData.buffer, binaryData.byteOffset, binaryData.length);
+        // Ensure the output directory exists
+        const outputDir = path.dirname(outputPath);
+        if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+        }
+        // Determine the output file path (with the correct file extension)
+        const outputFilePath = path.extname(outputPath)
+            ? outputPath
+            : `${outputPath}.${fileExtension}`;
+        // Write the binary data to a file
+        fs.writeFileSync(outputFilePath, arrayBufferView);
+        return outputFilePath;
+    }
+}

@bellatrix/extras/src/plugins/index.ts

@@ -1 +1,2 @@
 export * from './LogLifecyclePlugin';
+export * from './ScreenshotOnFailPlugin';

@bellatrix/web/src/infrastructure/browsercontroller/core/BrowserController.ts

@@ -1,4 +1,5 @@
 import { Locator, SearchContext, WebElement } from '.';
+import { Image } from '@bellatrix/core/image';
 
 export type Cookie = {
     name: string;
@@ -30,6 +31,7 @@ export abstract class BrowserController implements SearchContext {
     abstract getCookie(name: string): Promise<Cookie | null>;
     abstract getAllCookies(): Promise<Cookie[]>;
     abstract clearCookies(): Promise<void>;
+    abstract getScreenshot(): Promise<Image>;
     abstract executeJavascript<T, VarArgs extends unknown[] = []>(script: string | ((...args: VarArgs) => T), ...args: VarArgs): Promise<T>;
     abstract waitUntil(condition: (browserController: Omit<BrowserController, 'waitUntil'>) => boolean | Promise<boolean>, timeout: number, pollingInterval: number): Promise<void>
 

@bellatrix/web/src/infrastructure/browsercontroller/playwright/PlaywrightBrowserController.ts

@@ -4,6 +4,7 @@ import { Cookie, BrowserController, WebElement, Locator } from '@bellatrix/web/i
 import { PlaywrightWebElement } from '@bellatrix/web/infrastructure/browsercontroller/playwright';
 import { BellatrixSettings } from '@bellatrix/core/settings';
 import { HttpClient } from '@bellatrix/core/http';
+import { Image } from '@bellatrix/core/image';
 
 export class PlaywrightBrowserController extends BrowserController {
     private _browser: Browser;
@@ -48,6 +49,10 @@ export class PlaywrightBrowserController extends BrowserController {
         return await this._page.content();
     }
 
+    override async getScreenshot(): Promise<Image> {
+        return await Image.fromBase64((await this._page.screenshot()).toString('base64'));
+    }
+
     override async back(): Promise<void> {
         await this._page.goBack();
     }

@bellatrix/web/src/infrastructure/browsercontroller/selenium/SeleniumBrowserController.ts

@@ -3,6 +3,7 @@ import { By, WebDriver as NativeWebDriver, until } from 'selenium-webdriver';
 import { Cookie, BrowserController, WebElement, Locator } from '@bellatrix/web/infrastructure/browsercontroller/core';
 import { SeleniumShadowRootWebElement, SeleniumWebElement } from '@bellatrix/web/infrastructure/browsercontroller/selenium';
 import { BellatrixSettings } from '@bellatrix/core/settings';
+import { Image } from '@bellatrix/core/image';
 
 export class SeleniumBrowserController extends BrowserController {
     private _driver: NativeWebDriver;
@@ -32,6 +33,11 @@ export class SeleniumBrowserController extends BrowserController {
         return await this.wrappedDriver.getPageSource();
     }
 
+    override async getScreenshot(): Promise<Image> {
+        const base64image = (await this.wrappedDriver.takeScreenshot());
+        return Image.fromBase64(base64image);
+    }
+
     override async back(): Promise<void> {
         await this.wrappedDriver.navigate().back();
     }

@bellatrix/web/src/services/BrowserService.ts

@@ -1,6 +1,7 @@
 import { BrowserController } from '@bellatrix/web/infrastructure/browsercontroller/core';
 import { BellatrixSettings } from '@bellatrix/core/settings';
 import { BellatrixWebService } from '@bellatrix/web/services/decorators';
+import { Image } from '@bellatrix/core/image';
 import { WebService } from '.';
 
 @BellatrixWebService
@@ -21,6 +22,11 @@ export class BrowserService extends WebService {
         return await this.driver.getPageSource();
     }
 
+    async getScreenshot(): Promise<Image> {
+        const base64image = (await this.driver.getScreenshot()).base64;
+        return Image.fromBase64(base64image);
+    }
+
     async back(): Promise<void> {
         return await this.driver.back();
     }

example/tests/ProductPurchaseTests.test.ts

@@ -2,7 +2,7 @@ import { Test, TestClass } from '@bellatrix/web/test';
 import { WebTest } from '@bellatrix/web/infrastructure';
 import { Button } from '@bellatrix/web/components';
 import { ExtraWebHooks } from '@bellatrix/extras/hooks';
-import { LogLifecyclePlugin } from '@bellatrix/extras/plugins';
+import { LogLifecyclePlugin, ScreenshotOnFailPlugin } from '@bellatrix/extras/plugins';
 import { MainPage, CartPage, CheckoutPage, PurchaseInfo } from '../src/pages';
 import { PluginExecutionEngine } from '@bellatrix/core/infrastructure';
 import { WebServiceHooks } from '@bellatrix/web/services/utilities';
@@ -14,6 +14,7 @@ export class ProductPurchaseTests extends WebTest {
         await super.configure();
         ExtraWebHooks.addComponentBDDLogging();
         PluginExecutionEngine.addPlugin(LogLifecyclePlugin);
+        PluginExecutionEngine.addPlugin(ScreenshotOnFailPlugin);
         WebServiceHooks.addListenerTo(NavigationService).before('navigate', (_, url) => console.log(`navigating to ${url}`));
     }