@jahia/cypress 6.3.1 → 6.4.1

package/dist/support/jsErrorsLogger.d.ts

@@ -4,15 +4,31 @@
  */
 /**
  * Strategy for handling JavaScript errors and warnings in Cypress tests.
- * - failFast: Fail *immediately* when an error is detected.
+ *
  * - failAfterEach: Collect all errors and warnings *during test* execution and fail if any issues are found.
+ *
+ *   Proc: Allows each test to run, collects console errors and warnings,
+ *         and fails the particular test by the end of its execution if any issues are found.
+ *   Cons: Since the analysis happens in afterEach() hook, the rest of spec will be ignored.
+ *
  * - failAfterAll: Collect all errors and warnings *after all tests* and fail at the end of the test suite.
+ *
+ *  Proc: Allows all tests to run, collects console errors and warnings, and fails the test suite at the end if any issues are found.
+ *         This is useful for reporting all issues at once after all tests are executed, rather than failing immediately on the first issue.
+ *   Cons: Reporting might be confusing, e.g. - cypress will report the very last test as failed, while many tests might have issues.
+ *         This is because the hook is executed after all tests are completed, so the last test is reported as failed.
  */
 declare enum STRATEGY {
-    failFast = 0,
-    failAfterAll = 1,
-    failAfterEach = 2
+    failAfterEach = 0,
+    failAfterAll = 1
 }
+/**
+ * Returns the current strategy for handling JavaScript errors and warnings in Cypress tests.
+ * @returns {STRATEGY} - The current strategy for handling JavaScript errors and warnings.
+ * @note be careful with Cypress.env(envVarStrategy), since it might return `0` for `failAfterEach` strategy,
+ *       which is falsy in JavaScript, so we need to check if the variable is undefined.
+ */
+declare function getStrategy(): STRATEGY;
 /**
  * Sets the strategy for handling JavaScript errors and warnings in Cypress tests.
  * @param {STRATEGY} strategy - Strategy for handling JavaScript errors and warnings.
@@ -20,26 +36,38 @@ declare enum STRATEGY {
  * @returns {void}
  */
 declare function setStrategy(strategy: STRATEGY): void;
+/**
+ * Returns the list of allowed warnings that will not be reported by the logger.
+ * @returns {string[]} - Array of allowed warning messages.
+ */
+declare function getAllowedJsWarnings(): string[];
 /**
  * Sets the list of allowed warnings that will not be reported by the logger.
  * @param warnings {string[]} - Array of warning messages to be allowed.
  * @return {void}
  */
 declare function setAllowedJsWarnings(warnings: string[]): void;
+/**
+ * Disables the js errors and warnings logger.
+ * @returns {void}
+ */
+declare function disable(): void;
 /**
  * Attaches custom hooks to Cypress events to monitor and report JavaScript errors and warnings.
- * This method is called automatically in registerSupport.ts#registerSupport
- * It sets up listeners for console errors and warnings, collects them after each test,
- * and throws an error if any issues are found after all tests are executed.
+ * It sets up listeners for console errors and warnings, collects them for each visited URL in each test,
+ * and throws an error if any issues are found after each or all tests are executed (depending on the strategy chosen).
  */
-declare function attachHooks(): void;
+declare function enable(): void;
 /**
  * Exports the jsLogger module with methods to attach hooks, enable/disable logging, and set allowed warnings.
  */
 export declare const jsErrorsLogger: {
-    attachHooks: typeof attachHooks;
     setAllowedJsWarnings: typeof setAllowedJsWarnings;
+    getAllowedJsWarnings: typeof getAllowedJsWarnings;
     setStrategy: typeof setStrategy;
+    getStrategy: typeof getStrategy;
+    enable: typeof enable;
+    disable: typeof disable;
     STRATEGY: typeof STRATEGY;
 };
 export {};

package/dist/support/jsErrorsLogger.js

@@ -12,30 +12,54 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 };
 exports.__esModule = true;
 exports.jsErrorsLogger = void 0;
-var envVarDisabled = 'JS_LOGGER_DISABLED';
+var envVarDisableAll = 'JAHIA_HOOKS_DISABLE';
+var envVarDisableJsLogger = 'JAHIA_HOOKS_DISABLE_JS_LOGGER';
 var envVarCollector = '__JS_LOGGER_FAILURES__';
 var envVarAllowedWarnings = '__JS_LOGGER_ALLOWED_WARNINGS__';
 var envVarStrategy = '__JS_LOGGER_STRATEGY__';
 /**
  * Strategy for handling JavaScript errors and warnings in Cypress tests.
- * - failFast: Fail *immediately* when an error is detected.
+ *
  * - failAfterEach: Collect all errors and warnings *during test* execution and fail if any issues are found.
+ *
+ *   Proc: Allows each test to run, collects console errors and warnings,
+ *         and fails the particular test by the end of its execution if any issues are found.
+ *   Cons: Since the analysis happens in afterEach() hook, the rest of spec will be ignored.
+ *
  * - failAfterAll: Collect all errors and warnings *after all tests* and fail at the end of the test suite.
+ *
+ *  Proc: Allows all tests to run, collects console errors and warnings, and fails the test suite at the end if any issues are found.
+ *         This is useful for reporting all issues at once after all tests are executed, rather than failing immediately on the first issue.
+ *   Cons: Reporting might be confusing, e.g. - cypress will report the very last test as failed, while many tests might have issues.
+ *         This is because the hook is executed after all tests are completed, so the last test is reported as failed.
  */
 var STRATEGY;
 (function (STRATEGY) {
-    STRATEGY[STRATEGY["failFast"] = 0] = "failFast";
+    STRATEGY[STRATEGY["failAfterEach"] = 0] = "failAfterEach";
     STRATEGY[STRATEGY["failAfterAll"] = 1] = "failAfterAll";
-    STRATEGY[STRATEGY["failAfterEach"] = 2] = "failAfterEach";
 })(STRATEGY || (STRATEGY = {}));
+/**
+ * Returns an emoji based on the type of message.
+ * @param {string} type
+ */
+function getEmoji(type) {
+    switch (type) {
+        case 'warn':
+            return '⚠️';
+        case 'error':
+            return '❌️';
+        default:
+            return '';
+    }
+}
 /**
  * Returns the current strategy for handling JavaScript errors and warnings in Cypress tests.
  * @returns {STRATEGY} - The current strategy for handling JavaScript errors and warnings.
- * @note be careful with Cypress.env(envVarStrategy), since it might return `0` for `failFast` strategy,
+ * @note be careful with Cypress.env(envVarStrategy), since it might return `0` for `failAfterEach` strategy,
  *       which is falsy in JavaScript, so we need to check if the variable is undefined.
  */
 function getStrategy() {
-    return typeof Cypress.env(envVarStrategy) === 'undefined' ? STRATEGY.failFast : Cypress.env(envVarStrategy);
+    return typeof Cypress.env(envVarStrategy) === 'undefined' ? STRATEGY.failAfterAll : Cypress.env(envVarStrategy);
 }
 /**
  * Sets the strategy for handling JavaScript errors and warnings in Cypress tests.
@@ -44,11 +68,26 @@ function getStrategy() {
  * @returns {void}
  */
 function setStrategy(strategy) { Cypress.env(envVarStrategy, strategy); }
+/**
+ * Returns console issues collected during the test execution.
+ * @returns {CollectorItem []} - Array of collected issues, each issue is an object with test title and errors.
+ */
+function getCollectedIssues() { return Cypress.env(envVarCollector) || []; }
+/**
+ * Sets the console issues collected during the test execution.
+ * @returns {void}
+ */
+function setCollectedIssues(items) { Cypress.env(envVarCollector, items); }
 /**
  * Checks if the js errors and warnings logger is disabled.
  * @returns {boolean} - true if the logger is disabled, false otherwise.
  */
-function isDisabled() { return Cypress.env(envVarDisabled) === true; }
+function isDisabled() { return ((Cypress.env(envVarDisableAll) === true) || (Cypress.env(envVarDisableJsLogger) === true)); }
+/**
+ * Returns the list of allowed warnings that will not be reported by the logger.
+ * @returns {string[]} - Array of allowed warning messages.
+ */
+function getAllowedJsWarnings() { return Cypress.env(envVarAllowedWarnings) || []; }
 /**
  * Sets the list of allowed warnings that will not be reported by the logger.
  * @param warnings {string[]} - Array of warning messages to be allowed.
@@ -56,225 +95,149 @@ function isDisabled() { return Cypress.env(envVarDisabled) === true; }
  */
 function setAllowedJsWarnings(warnings) { Cypress.env(envVarAllowedWarnings, warnings); }
 /**
- * Attaches custom hooks to Cypress events to monitor and report JavaScript errors and warnings.
- * This method is called automatically in registerSupport.ts#registerSupport
- * It sets up listeners for console errors and warnings, collects them after each test,
- * and throws an error if any issues are found after all tests are executed.
- */
-function attachHooks() {
-    // Skip hook attachment if the logger is disabled (e.g. from CI/CD pipeline)
-    if (isDisabled()) {
-        return;
-    }
-    switch (getStrategy()) {
-        case STRATEGY.failAfterAll:
-            attachFailAfterAll();
-            break;
-        case STRATEGY.failAfterEach:
-            attachFailAfterEach();
-            break;
-        default:
-            attachFailFast();
-    }
-}
-/**
- * Custom hook implementation which fails the test after all tests are executed if any JavaScript errors or warnings are found.
- *
- * Proc: Allows all tests to run, collects console errors and warnings, and fails the test suite at the end if any issues are found.
- *       This is useful for reporting all issues at once after all tests are executed, rather than failing immediately on the first issue.
- * Cons: Reporting might be confusing, e.g. - cypress will report the very last test as failed, while many tests might have issues.
- *       This is because the hook is executed after all tests are completed, so the last test is reported as failed.
+ * Attaches a custom JavaScript interceptor to capture console errors and warnings.
  */
-function attachFailAfterAll() {
+function attachJsInterceptor() {
     /**
-     * Custom 'window:before:load' hook to spy on console errors and warnings
-     * This hook is executed before the page is loaded, allowing us to capture console messages.
+     * Custom 'window:before:load' hook to attach interceptors before the page is loaded,
+     * allowing us to spy on console messages.
      */
     Cypress.on('window:before:load', function (window) {
-        // Skip 'window:before:load' hook if the logger is not enabled
-        // Double-check in case if functionality was disabled within the test-case code
-        // to skip js validations for some particular test and enable it afterward
+        // Skip 'window:before:load' hook if the logger is disabled
         if (isDisabled()) {
             return;
         }
+        // Spy on console.error and console.warn to capture errors and warnings
         cy.spy(window.console, 'error').as('errors');
         cy.spy(window.console, 'warn').as('warnings');
     });
     /**
-     * Custom 'afterEach' hook to collect console errors and warnings
+     * Custom 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
      */
-    afterEach(function () {
-        // Skip 'afterEach' hook if the logger is not enabled
-        // Double-check in case if functionality was disabled within the test-case code
-        // to skip js validations for some particular test and enable it afterward
+    Cypress.on('window:load', function (win) {
+        // Skip 'window:load' hook if the logger is disabled
         if (isDisabled()) {
             return;
         }
-        var consoleIssues = [];
-        var allowedWarnings = Cypress.env(envVarAllowedWarnings) || [];
+        // Collect issues immediately after the window is loaded and analyze them
+        collectIssues(win);
+    });
+}
+/**
+ * Collects JavaScript errors and warnings using the spies set up in attachJsInterceptor.
+ * @returns {Cypress.Chainable} - Cypress chainable object that resolves when issues are collected.
+ */
+function collectIssues(win) {
+    var allowedWarnings = getAllowedJsWarnings();
+    var consoleIssues = [];
+    var url = win.location.href;
+    // Look for console errors and warnings, collected by the spies
+    return cy.get('@errors')
+        .invoke('getCalls')
+        .then(function (errorCalls) {
         // All errors should be collected
-        cy.get('@errors')
-            .invoke('getCalls')
-            .then(function (calls) { consoleIssues = calls; });
-        // Only warnings not in the allowed list should be collected
+        consoleIssues = errorCalls.flatMap(function (call) { return call.args.map(function (arg) { return ({ type: 'error', msg: String(arg) }); }); });
+    })
+        .then(function () {
+        // Analyze warnings
         cy.get('@warnings')
             .invoke('getCalls')
-            .each(function (call) {
-            call.args.forEach(function (arg) {
+            .then(function (warningCalls) {
+            warningCalls.flatMap(function (call) { return call.args; }).forEach(function (arg) {
+                // Only warnings not in the allowed list should be collected
                 if (!allowedWarnings.some(function (item) { return arg.includes(item); })) {
-                    consoleIssues.push(arg);
+                    consoleIssues.push({ type: 'warn', msg: String(arg) });
                 }
             });
         });
-        // Collect all issues and store them in the Cypress environment variable for later usage
-        cy.then(function () {
-            if (consoleIssues.length > 0) {
-                Cypress.env(envVarCollector, __spreadArray(__spreadArray([], (Cypress.env(envVarCollector) || [])), [{
-                        test: Cypress.currentTest.title,
-                        errors: consoleIssues
-                    }]));
-            }
-        });
-    });
-    /**
-     * Custom 'after' hook to analyze collected errors and warnings after all tests are executed.
-     */
-    after(function () {
-        // Skip 'after' hook if the logger is not enabled
-        // Double-check in case if functionality was disabled within the test-case code
-        // to skip js validations for some particular test and enable it afterward
-        if (isDisabled()) {
-            return;
+    })
+        .then(function () {
+        // Update the Cypress environment variable with the collected issues
+        if (consoleIssues.length > 0) {
+            setCollectedIssues(__spreadArray(__spreadArray([], getCollectedIssues()), [
+                { url: url, test: Cypress.currentTest.title, errors: consoleIssues }
+            ]));
         }
-        // Analyze collected errors and warnings
-        var failures = Cypress.env(envVarCollector) || [];
-        cy.log('[JS ERRORS LOGGER] Analyze collected issues').then(function () {
-            if (failures.length > 0) {
-                // Format the error message for each test
-                var errorMessage = failures.map(function (failure) {
-                    return "TEST: " + failure.test + "\nISSUES:\n" + failure.errors.map(function (e) { return "- " + e; }).join('\n');
-                }).join('\n\n');
-                // Throw an error with the collected issues
-                throw new Error('CONSOLE ERRORS and WARNINGS FOUND:\n\n' + errorMessage);
-            }
-            else {
-                cy.log('[JS ERRORS LOGGER] No console errors or warnings found.');
-            }
-        });
     });
 }
 /**
- * Custom hook implementation which fails the test after each test execution if any JavaScript errors or warnings are found.
- *
- * Proc: Allows each test to run, collects console errors and warnings, and fails the particular test by the end of it's execution
- *       if any issues are found.
- * Cons: If errors or warnings were found during beforeEach or afterEach hook(s), the rest of spec will be ignored.
+ * Analyzes collected JavaScript errors and warnings and throws an error if any were found.
  */
-function attachFailAfterEach() {
-    // Double-check in case if functionality was disabled within the test-case code
-    // to skip js validations for some particular test and enable it afterward
-    if (isDisabled()) {
-        return;
-    }
-    /**
-     * Custom 'window:before:load' hook to spy on console errors and warnings
-     * This hook is executed before the page is loaded, allowing us to capture console messages.
-     */
-    Cypress.on('window:before:load', function (window) {
-        cy.spy(window.console, 'error').as('errors');
-        cy.spy(window.console, 'warn').as('warnings');
+function analyzeIssues() {
+    cy.then(function () {
+        var failures = getCollectedIssues();
+        if (failures.length > 0) {
+            // Group all issues by test title
+            var groupedByTest = failures.reduce(function (acc, failure) {
+                acc[failure.test] = acc[failure.test] || [];
+                acc[failure.test].push(failure);
+                return acc;
+            }, {});
+            // Format the error message for each test with its collected issues
+            var errorMessage = Object.entries(groupedByTest).map(function (_a) {
+                var test = _a[0], items = _a[1];
+                var urlsAndErrors = items.map(function (item) {
+                    return "URL: " + item.url + "\nISSUES:\n" + item.errors.map(function (e) { return "- " + (e.type === 'warn' ? getEmoji('warn') : getEmoji('error')) + " " + e.msg; }).join('\n');
+                }).join('\n\n');
+                // Return the formatted message for the test;
+                // Intentionally use fixed-width (50 chars) separators for better readability,
+                // when the message might be wrapped
+                return getEmoji('error') + "\uFE0F TEST: " + test.trim() + " " + getEmoji('error') + "\uFE0F\n" + '-'.repeat(50) + "\n" + urlsAndErrors + "\n" + '='.repeat(50);
+            }).join('\n\n');
+            // Reset the collector for the next test run
+            setCollectedIssues([]);
+            // Throw an error with the collected issues
+            throw new Error('CONSOLE ERRORS and WARNINGS FOUND:\n\n' + errorMessage);
+        }
     });
+}
+/**
+ * Disables the js errors and warnings logger.
+ * @returns {void}
+ */
+function disable() { Cypress.env(envVarDisableJsLogger, true); }
+/**
+ * Attaches custom hooks to Cypress events to monitor and report JavaScript errors and warnings.
+ * It sets up listeners for console errors and warnings, collects them for each visited URL in each test,
+ * and throws an error if any issues are found after each or all tests are executed (depending on the strategy chosen).
+ */
+function enable() {
+    // Ensure the logger is enabled by default
+    Cypress.env(envVarDisableJsLogger, false);
+    // Attach errors and warnings collector
+    attachJsInterceptor();
     /**
-     * Custom 'afterEach' hook to collect console errors and warnings
+     * Custom 'afterEach' hook to analyze JavaScript errors and warnings after EACH test execution.
      */
     afterEach(function () {
-        var consoleIssues = [];
-        var allowedWarnings = Cypress.env(envVarAllowedWarnings) || [];
-        // All errors should be collected
-        cy.get('@errors')
-            .invoke('getCalls')
-            .then(function (calls) { consoleIssues = calls; });
-        // Only warnings not in the allowed list should be collected
-        cy.get('@warnings')
-            .invoke('getCalls')
-            .each(function (call) {
-            call.args.forEach(function (arg) {
-                if (!allowedWarnings.some(function (item) { return arg.includes(item); })) {
-                    consoleIssues.push(arg);
-                }
-            });
-        });
+        // Skip the hook if the logger is disabled or if the strategy is not failAfterEach
+        if (isDisabled() || getStrategy() !== STRATEGY.failAfterEach) {
+            return;
+        }
         // Analyze collected errors and warnings
-        cy.log('[JS ERRORS LOGGER] Analyze collected issues').then(function () {
-            if (consoleIssues.length > 0) {
-                // Format the error message for each test
-                var errorMessage = consoleIssues.map(function (e) { return "- " + e; }).join('\n');
-                // Throw an error with the collected issues
-                throw new Error('CONSOLE ERRORS and WARNINGS FOUND:\n\n' + errorMessage);
-            }
-            else {
-                cy.log('[JS ERRORS LOGGER] No console errors or warnings found.');
-            }
-        });
+        analyzeIssues();
     });
-}
-/**
- * Custom hook implementation which fails the test immediately when a JavaScript error or warning is detected.
- *
- * Proc: Allows each test to run, looks for console errors and warnings, and fails the particular test IMMEDIATELLY
- *       if any issues are found.
- * Cons: If errors or warnings were found during beforeEach or afterEach hook(s), the rest of spec will be ignored.
- */
-function attachFailFast() {
-    // Double-check in case if functionality was disabled within the test-case code
-    // to skip js validations for some particular test and enable it afterward
-    if (isDisabled()) {
-        return;
-    }
     /**
-     * Custom 'window:before:load' hook to spy on console errors and warnings
-     * This hook is executed before the page is loaded, allowing us to capture console messages.
+     * Custom 'after' hook to analyze JavaScript errors and warnings after ALL tests execution.
      */
-    Cypress.on('window:before:load', function (window) {
-        cy.spy(window.console, 'error').as('errors');
-        cy.spy(window.console, 'warn').as('warnings');
-    });
-    Cypress.on('window:load', function () {
-        // DOM should be loaded and parsed by now, so we can check for console errors and warnings
-        var consoleIssues = [];
-        var allowedWarnings = Cypress.env(envVarAllowedWarnings) || [];
-        // All errors should be collected
-        cy.get('@errors')
-            .invoke('getCalls')
-            .then(function (calls) { consoleIssues = calls; });
-        // Only warnings not in the allowed list should be collected
-        cy.get('@warnings')
-            .invoke('getCalls')
-            .each(function (call) {
-            call.args.forEach(function (arg) {
-                if (!allowedWarnings.some(function (item) { return arg.includes(item); })) {
-                    consoleIssues.push(arg);
-                }
-            });
-        }).then(function () {
-            if (consoleIssues.length > 0) {
-                // Format the error message for each test
-                var errorMessage = consoleIssues.map(function (e) { return "- " + e; }).join('\n');
-                // Throw an error with the collected issues
-                throw new Error('CONSOLE ERRORS and WARNINGS FOUND:\n' + errorMessage);
-            }
-            else {
-                cy.log('[JS ERRORS LOGGER] No console errors or warnings found.');
-            }
-        });
+    after(function () {
+        // Skip the hook if the logger is disabled or if the strategy is not failAfterAll
+        if (isDisabled() || getStrategy() !== STRATEGY.failAfterAll) {
+            return;
+        }
+        // Analyze collected errors and warnings
+        analyzeIssues();
     });
 }
 /**
  * Exports the jsLogger module with methods to attach hooks, enable/disable logging, and set allowed warnings.
  */
 exports.jsErrorsLogger = {
-    attachHooks: attachHooks,
     setAllowedJsWarnings: setAllowedJsWarnings,
+    getAllowedJsWarnings: getAllowedJsWarnings,
     setStrategy: setStrategy,
+    getStrategy: getStrategy,
+    enable: enable,
+    disable: disable,
     STRATEGY: STRATEGY
 };

package/dist/support/registerSupport.js

@@ -8,8 +8,6 @@ var logout_1 = require("./logout");
 var fixture_1 = require("./fixture");
 var repeatUntil_1 = require("./repeatUntil");
 var testStep_1 = require("./testStep");
-// FUNCTIONALITY IS TEMPORARY DISABLED DUE TO UNEXPECTED ISSUES
-// import {jsErrorsLogger} from './jsErrorsLogger';
 var registerSupport = function () {
     Cypress.Commands.add('apolloClient', apollo_1.apolloClient);
     Cypress.Commands.add('apollo', { prevSubject: 'optional' }, apollo_1.apollo);
@@ -24,11 +22,5 @@ var registerSupport = function () {
     Cypress.Commands.add('repeatUntil', repeatUntil_1.repeatUntil);
     Cypress.Commands.overwrite('fixture', fixture_1.fixture);
     Cypress.Commands.add('step', testStep_1.step);
-    // Since registerSupport() function is called in each repo from e2e.js,
-    // attaching the JavaScript errors logger hooks here ensures that logger is initialized automatically
-    // for all tests without needing to call it explicitly in each test file.
-    // This is useful for capturing and logging JavaScript errors across all tests.
-    // FUNCTIONALITY IS TEMPORARY DISABLED DUE TO UNEXPECTED ISSUES
-    // jsErrorsLogger.attachHooks();
 };
 exports.registerSupport = registerSupport;

package/dist/utils/Logger.d.ts

@@ -13,11 +13,12 @@
  *       It tells the logger to log only messages with the given level and above.
  */
 /**
- * Logging levels enumerator.
+ * Logging levels enumerator
  */
 declare enum LEVEL {
     DEBUG = 0,
-    INFO = 1
+    INFO = 1,
+    WARNING = 2
 }
 /**
  * Sets the logging verbosity level for the logger. Messages with a level lower than the set level will not be logged.
@@ -37,6 +38,12 @@ declare function info(message: string): Cypress.Chainable;
  * @returns {Cypress.Chainable} - Cypress chainable object
  */
 declare function debug(message: string): Cypress.Chainable;
+/**
+ * Logs WARNING message
+ * @param {string} message - log message
+ * @returns {Cypress.Chainable} - Cypress chainable object
+ */
+declare function warning(message: string): Cypress.Chainable;
 /**
  * Logs JSON object with logging level given
  * @param {LEVEL} level - log level (e.g. 'INFO', 'DEBUG')
@@ -47,6 +54,7 @@ declare function json(level: LEVEL, text: string): Cypress.Chainable;
 export declare const Log: {
     info: typeof info;
     debug: typeof debug;
+    warning: typeof warning;
     json: typeof json;
     setVerbosity: typeof setVerbosity;
     LEVEL: typeof LEVEL;

package/dist/utils/Logger.js

@@ -15,16 +15,65 @@
  */
 exports.__esModule = true;
 exports.Log = void 0;
-// ENV variable to store the logging verbosity level
+/**
+ * ENV variable to store the logging verbosity level
+ */
 var envVarLoggingVerbosity = '__LOG_VERBOSITY__';
 /**
- * Logging levels enumerator.
+ * Logging levels enumerator
  */
 var LEVEL;
 (function (LEVEL) {
     LEVEL[LEVEL["DEBUG"] = 0] = "DEBUG";
     LEVEL[LEVEL["INFO"] = 1] = "INFO";
+    LEVEL[LEVEL["WARNING"] = 2] = "WARNING";
 })(LEVEL || (LEVEL = {}));
+/**
+ * Base colors for each log level
+ */
+var LOGGER_COLORS = [
+    { name: 'DEBUG', color: '#686868' },
+    { name: 'INFO', color: '#10b981' },
+    { name: 'WARNING', color: '#fbbf24' }
+];
+/**
+ * Unique style ID to identify the logger styles in the document head
+ */
+var LOGGER_STYLE_ID = 'jahia-cypress-ptf-logger-styles';
+/**
+ * Helper function to convert hex colors to rgb
+ * @param {string} hex - hex color
+ * @returns {string} - rgb color in format "r g b"
+ * @example hex2rgb("#ffffff") => "255 255 255"
+ */
+function hex2rgb(hex) {
+    var r = parseInt(hex.slice(1, 3), 16);
+    var g = parseInt(hex.slice(3, 5), 16);
+    var b = parseInt(hex.slice(5, 7), 16);
+    return r + " " + g + " " + b;
+}
+/**
+ * Creates a custom logger styles and attaches them to the document head.
+ * Basically - attaches CSS styles to Cypress browser window to style the log messages.
+ */
+function attachLoggerStyles() {
+    // Check if style tag with the corresponding attribute exists in the document head to avoid duplicating styles
+    if (Cypress.$(window.top.document.head).find("style[data-id=\"" + LOGGER_STYLE_ID + "\"]").length > 0) {
+        return;
+    }
+    // Create style element
+    var styleSheet = document.createElement('style');
+    // Add marker attribute to identify the style tag
+    styleSheet.setAttribute('data-id', LOGGER_STYLE_ID);
+    // Build styles for each log level
+    LOGGER_COLORS.forEach(function (logger) {
+        var name = logger.name.toLowerCase();
+        var color = hex2rgb(logger.color);
+        styleSheet.textContent += "\n        .command.command-name-ptf-" + name + " span.command-method {\n            margin-right: 0.5rem;\n            border-radius: 0.125rem;\n            border-width: 1px;\n            padding: 0.125rem 0.375rem;\n            text-transform: uppercase;\n\n            border-color: rgb(" + color + " / 1);\n            background-color: rgb(" + color + " / 0.2);\n            color: rgb(" + color + " / 1) !important;\n        }\n\n        .command.command-name-ptf-" + name + " span.command-message {\n            color: rgb(" + color + " / 1);\n            font-weight: normal;\n        }\n\n        .command.command-name-ptf-" + name + " span.command-message strong,\n        .command.command-name-ptf-" + name + " span.command-message em { \n            color: rgb(" + color + " / 1);\n        }\n    ";
+    });
+    // Attach styles to the document head
+    Cypress.$(window.top.document.head).append(styleSheet);
+}
 /**
  * Return the current logging verbosity level.
  * @returns {LEVEL} - current logging level set in Cypress environment variable `__LOG_VERBOSITY__`
@@ -58,6 +107,14 @@ function info(message) {
 function debug(message) {
     return _send_(exports.Log.LEVEL.DEBUG, message);
 }
+/**
+ * Logs WARNING message
+ * @param {string} message - log message
+ * @returns {Cypress.Chainable} - Cypress chainable object
+ */
+function warning(message) {
+    return _send_(exports.Log.LEVEL.WARNING, message);
+}
 /**
  * Logs JSON object with logging level given
  * @param {LEVEL} level - log level (e.g. 'INFO', 'DEBUG')
@@ -83,6 +140,8 @@ function _send_(level, message) {
     if (!Object.values(exports.Log.LEVEL).includes(level)) {
         throw new Error("Log level \"" + level + "\" is not supported. Supported levels are: " + exports.Log.LEVEL);
     }
+    // Attach logger styles to the document head (done only once)
+    attachLoggerStyles();
     // Check if the log level is enabled,
     // take into account the log level set in Cypress.env('LOG_LEVEL') and the log level set in the Log.LEVEL variable.
     // If the log level is enabled, send the message to Cypress log.
@@ -91,14 +150,15 @@ function _send_(level, message) {
         // use cy.then() to ensure that the log message is sent in the correct order
         // and use cy.wrap() to return the Cypress chainable object
         return cy.then(function () {
-            Cypress.log({ displayName: "[ " + exports.Log.LEVEL[level].toUpperCase() + " ]", message: "" + message });
-        }).then(cy.wrap);
+            Cypress.log({ name: "ptf-" + exports.Log.LEVEL[level].toLowerCase(), displayName: "" + exports.Log.LEVEL[level].toUpperCase(), message: "" + message });
+        }).then(function () { return cy.wrap(null, { log: false }); });
     }
 }
 // Export the Log module with methods to log messages and set the logging level
 exports.Log = {
     info: info,
     debug: debug,
+    warning: warning,
     json: json,
     setVerbosity: setVerbosity,
     LEVEL: LEVEL