@jahia/cypress 6.4.0 → 6.4.1

package/dist/support/jsErrorsLogger.d.ts

@@ -5,17 +5,11 @@
 /**
  * Strategy for handling JavaScript errors and warnings in Cypress tests.
  *
- * - failFast: Fail *immediately* when an error is detected.
- *
- *   Proc: Allows each test to run, looks for console errors and warnings, and fails the particular test IMMEDIATELY
- *         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.
- *
  * - 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 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.
+ *   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.
  *
@@ -25,14 +19,13 @@
  *         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 `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.
  */
 declare function getStrategy(): STRATEGY;
@@ -61,9 +54,8 @@ declare function setAllowedJsWarnings(warnings: string[]): 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 enable(): void;
 /**

package/dist/support/jsErrorsLogger.js

@@ -20,17 +20,11 @@ var envVarStrategy = '__JS_LOGGER_STRATEGY__';
 /**
  * Strategy for handling JavaScript errors and warnings in Cypress tests.
  *
- * - failFast: Fail *immediately* when an error is detected.
- *
- *   Proc: Allows each test to run, looks for console errors and warnings, and fails the particular test IMMEDIATELY
- *         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.
- *
  * - 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 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.
+ *   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.
  *
@@ -41,18 +35,31 @@ var envVarStrategy = '__JS_LOGGER_STRATEGY__';
  */
 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.
@@ -89,11 +96,14 @@ function getAllowedJsWarnings() { return Cypress.env(envVarAllowedWarnings) || [
 function setAllowedJsWarnings(warnings) { Cypress.env(envVarAllowedWarnings, warnings); }
 /**
  * Attaches a custom JavaScript interceptor to capture console errors and warnings.
- * This interceptor is executed before the page is loaded, allowing us to spy on console messages.
  */
 function attachJsInterceptor() {
+    /**
+     * 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
+        // Skip 'window:before:load' hook if the logger is disabled
         if (isDisabled()) {
             return;
         }
@@ -101,20 +111,34 @@ function attachJsInterceptor() {
         cy.spy(window.console, 'error').as('errors');
         cy.spy(window.console, 'warn').as('warnings');
     });
+    /**
+     * Custom 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
+     */
+    Cypress.on('window:load', function (win) {
+        // Skip 'window:load' hook if the logger is disabled
+        if (isDisabled()) {
+            return;
+        }
+        // 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() {
+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
-        consoleIssues = errorCalls.flatMap(function (call) { return call.args; });
+        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')
@@ -122,7 +146,7 @@ function collectIssues() {
             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) });
                 }
             });
         });
@@ -131,13 +155,9 @@ function collectIssues() {
         // Update the Cypress environment variable with the collected issues
         if (consoleIssues.length > 0) {
             setCollectedIssues(__spreadArray(__spreadArray([], getCollectedIssues()), [
-                { test: Cypress.currentTest.title, errors: consoleIssues }
+                { url: url, test: Cypress.currentTest.title, errors: consoleIssues }
             ]));
         }
-    })
-        .then(function () {
-        // Return a Cypress chainable object to allow chaining
-        return cy.wrap(null, { log: false });
     });
 }
 /**
@@ -147,9 +167,22 @@ function analyzeIssues() {
     cy.then(function () {
         var failures = getCollectedIssues();
         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');
+            // 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([]);
@@ -165,9 +198,8 @@ function analyzeIssues() {
 function disable() { Cypress.env(envVarDisableJsLogger, true); }
 /**
  * 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).
  */
 function enable() {
     // Ensure the logger is enabled by default
@@ -175,52 +207,27 @@ function enable() {
     // Attach errors and warnings collector
     attachJsInterceptor();
     /**
-     * Custom 'afterEach' hook to collect JavaScript errors and warnings after each test execution.
-     * The behavior of this hook depends on the strategy set for the logger.
+     * Custom 'afterEach' hook to analyze JavaScript errors and warnings after EACH test execution.
      */
     afterEach(function () {
-        // Skip the hook if the logger is disabled
-        if (isDisabled()) {
+        // Skip the hook if the logger is disabled or if the strategy is not failAfterEach
+        if (isDisabled() || getStrategy() !== STRATEGY.failAfterEach) {
             return;
         }
-        // Depending on the strategy, collect issues and analyze them
-        // If the strategy is failFast, issues will be collected in 'window:load'
-        if (getStrategy() === STRATEGY.failAfterEach) {
-            // Collect issues after each test and analyze them immediately
-            collectIssues().then(function () { return analyzeIssues(); });
-        }
-        else if (getStrategy() === STRATEGY.failAfterAll) {
-            // Collect issues after each test, but analyze them only after all tests are executed
-            collectIssues();
-        }
-        else {
-            // Do nothing for failFast strategy, issues will be collected and analyzed in 'window:load' hook
-        }
+        // Analyze collected errors and warnings
+        analyzeIssues();
     });
     /**
-     * Custom 'after' hook to analyze collected errors and warnings after all tests are executed.
+     * Custom 'after' hook to analyze JavaScript errors and warnings after ALL tests execution.
      */
     after(function () {
         // Skip the hook if the logger is disabled or if the strategy is not failAfterAll
-        // This hook is only relevant for the failAfterAll strategy, where we analyze issues after
         if (isDisabled() || getStrategy() !== STRATEGY.failAfterAll) {
             return;
         }
         // Analyze collected errors and warnings
         analyzeIssues();
     });
-    /**
-     * Custom 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
-     * Applicable only for the failFast strategy.
-     */
-    Cypress.on('window:load', function () {
-        // Skip the hook if the logger is disabled or if the strategy is not failFast
-        if (isDisabled() || getStrategy() !== STRATEGY.failFast) {
-            return;
-        }
-        // Collect issues immediately after the window is loaded and analyze them
-        collectIssues().then(function () { return analyzeIssues(); });
-    });
 }
 /**
  * Exports the jsLogger module with methods to attach hooks, enable/disable logging, and set allowed warnings.

package/docs/js-errors-logger.md

@@ -15,55 +15,20 @@ The JavaScript Errors Logger is a comprehensive monitoring and reporting module
 
 The logger supports three distinct strategies for handling JavaScript errors and warnings:
 
-### 1. Fail Fast (default)
-- **Strategy**: `STRATEGY.failFast`
-- **Behavior**: Fails immediately when an error or warning is detected; the rest of tests will be executed
-- **Use Case**: Best for development environments where immediate feedback is crucial
-- **Pros**: Quick identification of issues
-- **Cons**: May stop test execution on first error, preventing discovery of additional issues
-
-### 2. Fail After Each Test
+### 1. Fail After Each Test
 - **Strategy**: `STRATEGY.failAfterEach`
 - **Behavior**: Collects errors/warnings during test execution and fails at the end of the one; the rest of tests will be skipped
 - **Use Case**: Suitable when you want the test to complete but still get immediate feedback
 - **Pros**: Allows test to be executed till the end before providing a report
-- **Cons**: Additional log review might be needed to identify - where the error or warning occur
+- **Cons**: Since the analysis happens in afterEach() hook, the rest of spec will be ignored
 
-### 3. Fail After All Tests
+### 2. Fail After All Tests (default)
 - **Strategy**: `STRATEGY.failAfterAll`
 - **Behavior**: Collects all errors/warnings and reports them after the entire test suite completes; the last test will be marked as failed
 - **Use Case**: Ideal for CI/CD environments where you want a complete test run overview
 - **Pros**: Complete test suite execution with comprehensive error reporting
 - **Cons**: Error reporting may be confusing as the last test will be marked as failed, since the errors analysis and reporting is done in after() hook
 
-## Configuration
-
-### Environment Variables
-
-| Variable                        | Type | Description |
-|---------------------------------|------|-------------|
-| `JAHIA_HOOKS_DISABLE_JS_LOGGER` | boolean | Disables the logger when set to `true` |
-
-### Programmatic Configuration
-
-It is **strongly** recommended to add custom configuration in project's common files, e.g. `tests/cypress/support/e2e.js` to have it applied to all test-cases within the project.
-
-```typescript
-import { jsErrorsLogger } from '@jahia/cypress';
-
-// Attach Logger
-jsErrorsLogger.enable();
-
-// Set preferrable error handling strategy
-jsErrorsLogger.setStrategy(jsErrorsLogger.STRATEGY.failFast);
-
-// Define allowed warnings that won't trigger failures
-jsErrorsLogger.setAllowedJsWarnings([
-  'Warning: React Hook',
-  'Warning: componentWillReceiveProps'
-]);
-```
-
 ## Usage
 
 ### Basic Setup
@@ -72,11 +37,10 @@ jsErrorsLogger.setAllowedJsWarnings([
 This call should only be used in `tests/cypress/support/e2e.js`. Add the following code in the repo where functionality should be used:
 
 ```typescript
-import { jsErrorsLogger } from '@jahia/cypress';
+import {jsErrorsLogger} from '@jahia/cypress';
 
-before(() => {
-    jsErrorsLogger.enable();
-});
+// Enable and attach JS Errors Logger
+jsErrorsLogger.enable();
 ```
 
 ### Disabling the Logger
@@ -91,7 +55,7 @@ export JAHIA_HOOKS_DISABLE_JS_LOGGER="true"
 #### Disable for the specific Spec
 
 ```typescript
-import { jsErrorsLogger } from '@jahia/cypress';
+import {jsErrorsLogger} from '@jahia/cypress';
 
 describe('Tests with disabled JS logger', () => {
   before(() => {
@@ -104,35 +68,76 @@ describe('Tests with disabled JS logger', () => {
 });
 ```
 
+## Configuration
+
+### Environment Variables
+
+| Variable                        | Type | Description |
+|---------------------------------|------|-------------|
+| `JAHIA_HOOKS_DISABLE_JS_LOGGER` | boolean | Disables the logger when set to `true` |
+
+### Programmatic Configuration
+
+It is **strongly** recommended to add custom configuration in project's common files, e.g. `tests/cypress/support/e2e.js` to have it applied to all test-cases within the project.
+
+```typescript
+import {jsErrorsLogger} from '@jahia/cypress';
+
+// Enable and attach JS Errors Logger
+jsErrorsLogger.enable();
+
+// Set preferrable error handling strategy
+jsErrorsLogger.setStrategy(jsErrorsLogger.STRATEGY.failAfterAll);
+
+// Define allowed warnings that won't trigger failures
+jsErrorsLogger.setAllowedJsWarnings([
+  'Warning: React Hook',
+  'Warning: componentWillReceiveProps'
+]);
+```
+
 ## Error Reporting Format
 
-### Single Test Error (failFast/failAfterEach)
+### Single Test Error (failAfterEach)
 
 ```
-Error: CONSOLE ERRORS and WARNINGS FOUND:
-- TypeError: Cannot read property 'foo' of undefined
-- Warning: React Hook useEffect has missing dependency
+CONSOLE ERRORS and WARNINGS FOUND:
+
+❌️ TEST: Should be authenticated when correct credentials and code are provided: ❌️
+--------------------------------------------------
+URL: http://localhost:8080/jahia/dashboard
+ISSUES:
+- ⚠️ Unsatisfied version 5.0.1 from @jahia/jcontent of shared singleton module redux (required ^4.0.5)
+- ⚠️ Unsatisfied version 9.2.0 from @jahia/jcontent of shared singleton module react-redux (required ^8.0.5)
+- ❌️ TypeError: Cannot read property 'user' of undefined
 ```
 
 ### Multiple Test Errors (failAfterAll)
 
 ```
-Error: CONSOLE ERRORS and WARNINGS FOUND:
+CONSOLE ERRORS and WARNINGS FOUND:
 
-TEST: should load homepage
+❌️ TEST: Should be authenticated when correct credentials and code are provided: ❌️
+--------------------------------------------------
+URL: http://localhost:8080/jahia/dashboard
 ISSUES:
-- TypeError: Cannot read property 'user' of undefined
-- Warning: componentWillMount is deprecated
-
-TEST: should handle form submission
+- ⚠️ No satisfying version (^1.11.9) of shared module dayjs found in shared scope default.
+- ⚠️ No satisfying version (^3.0.6) of shared module @jahia/react-material found in shared scope default.
+- ❌️ TypeError: Cannot read property 'user' of undefined
+==================================================
+
+❌️ TEST: Should be authenticated on a specific site when correct credentials and code are provided: ❌️
+--------------------------------------------------
+URL: http://localhost:8080/jahia/admin
 ISSUES:
-- ReferenceError: handleSubmit is not defined
+- ⚠️ No satisfying version (^3.0.6) of shared module @jahia/react-material found in shared scope default.
+==================================================
 ```
 
 ## Best Practices
 
 ### Development Environment
-- Use `STRATEGY.failFast` for immediate feedback during development
+- Use `STRATEGY.failAfterEach` for immediate feedback during development
 - Configure comprehensive allowed warnings list for known, acceptable warnings
 - Enable detailed logging for debugging purposes
 
@@ -161,4 +166,4 @@ ISSUES:
 
 | Enum | Values | Description |
 |------|--------|-------------|
-| `STRATEGY` | `failFast`, `failAfterAll`, `failAfterEach` | Error handling strategies |
+| `STRATEGY` | `failAfterAll`, `failAfterEach` | Error handling strategies |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jahia/cypress",
-  "version": "6.4.0",
+  "version": "6.4.1",
   "scripts": {
     "build": "tsc",
     "lint": "eslint src -c .eslintrc.json --ext .ts --max-warnings=0"

package/src/support/jsErrorsLogger.ts

@@ -14,17 +14,11 @@ const envVarStrategy = '__JS_LOGGER_STRATEGY__';
 /**
  * Strategy for handling JavaScript errors and warnings in Cypress tests.
  *
- * - failFast: Fail *immediately* when an error is detected.
- *
- *   Proc: Allows each test to run, looks for console errors and warnings, and fails the particular test IMMEDIATELY
- *         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.
- *
  * - 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 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.
+ *   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.
  *
@@ -33,25 +27,41 @@ const envVarStrategy = '__JS_LOGGER_STRATEGY__';
  *   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.
  */
-enum STRATEGY { failFast, failAfterAll, failAfterEach }
+enum STRATEGY { failAfterEach, failAfterAll }
 
 /**
  * Auxiliary type to represent a single item in the collector.
  * It contains the test title and an array of error or warning messages collected during the test.
  */
 type CollectorItem = {
+    url: string; // URL of the current page where the issue was found
     test: string; // The title of the test where the issue was found
-    errors: string[]; // Array of error or warning messages collected during the test
+    errors: {type: string; msg: string}[]; // Array of error or warning messages collected during the test
 };
 
+/**
+ * Returns an emoji based on the type of message.
+ * @param {string} type
+ */
+function getEmoji(type: string): string {
+    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(): STRATEGY {
-    return typeof Cypress.env(envVarStrategy) === 'undefined' ? STRATEGY.failFast : Cypress.env(envVarStrategy);
+    return typeof Cypress.env(envVarStrategy) === 'undefined' ? STRATEGY.failAfterAll : Cypress.env(envVarStrategy);
 }
 
 /**
@@ -95,41 +105,55 @@ function setAllowedJsWarnings(warnings: string[]): void { Cypress.env(envVarAllo
 
 /**
  * Attaches a custom JavaScript interceptor to capture console errors and warnings.
- * This interceptor is executed before the page is loaded, allowing us to spy on console messages.
  */
 function attachJsInterceptor(): void {
+    /**
+     * 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', window => {
-        // Skip 'window:before:load' hook if the logger is not enabled
+        // 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 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
+     */
+    Cypress.on('window:load', win => {
+        // Skip 'window:load' hook if the logger is disabled
+        if (isDisabled()) { return; }
+        // 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(): Cypress.Chainable {
+function collectIssues(win: Cypress.AUTWindow): Cypress.Chainable {
     const allowedWarnings = getAllowedJsWarnings();
-    let consoleIssues: string[] = [];
+    let consoleIssues: {type: string, msg: string}[] = [];
+    const url = win.location.href;
 
     // Look for console errors and warnings, collected by the spies
     return cy.get('@errors')
         .invoke('getCalls')
         .then(errorCalls => {
             // All errors should be collected
-            consoleIssues = errorCalls.flatMap((call: { args: string[] }) => call.args);
-
+            consoleIssues = errorCalls.flatMap((call: { args: unknown[] }) => call.args.map((arg: string) => ({type: 'error', msg: String(arg)})));
+        })
+        .then(() => {
             // Analyze warnings
             cy.get('@warnings')
                 .invoke('getCalls')
                 .then(warningCalls => {
-                    warningCalls.flatMap((call: { args: string[] }) => call.args).forEach((arg: string) => {
+                    warningCalls.flatMap((call: { args: unknown[] }) => call.args).forEach((arg: string) => {
                         // Only warnings not in the allowed list should be collected
-                        if (!allowedWarnings.some((item: string) => arg.includes(item))) { consoleIssues.push(arg); }
+                        if (!allowedWarnings.some((item: string) => arg.includes(item))) { consoleIssues.push({type: 'warn', msg: String(arg)}); }
                     });
                 });
         })
@@ -138,13 +162,9 @@ function collectIssues(): Cypress.Chainable {
             if (consoleIssues.length > 0) {
                 setCollectedIssues([
                     ...getCollectedIssues(),
-                    {test: Cypress.currentTest.title, errors: consoleIssues}
+                    {url: url, test: Cypress.currentTest.title, errors: consoleIssues}
                 ]);
             }
-        })
-        .then(() => {
-            // Return a Cypress chainable object to allow chaining
-            return cy.wrap(null, {log: false});
         });
 }
 
@@ -154,11 +174,31 @@ function collectIssues(): Cypress.Chainable {
 function analyzeIssues(): void {
     cy.then(() => {
         const failures = getCollectedIssues();
+
         if (failures.length > 0) {
-            // Format the error message for each test
-            const errorMessage = failures.map((failure: { test: string; errors: string[]; }) => {
-                return `TEST: ${failure.test}\nISSUES:\n${failure.errors.map((e: string) => `- ${e}`).join('\n')}`;
+            // Group all issues by test title
+            const groupedByTest = failures.reduce((acc: Record<string, CollectorItem[]>, failure) => {
+                acc[failure.test] = acc[failure.test] || [];
+                acc[failure.test].push(failure);
+
+                return acc;
+            }, {} as Record<string, CollectorItem[]>);
+
+            // Format the error message for each test with its collected issues
+            const errorMessage = Object.entries(groupedByTest).map(([test, items]) => {
+                const urlsAndErrors = items.map(item =>
+                    `URL: ${item.url}\nISSUES:\n${item.errors.map((e: {
+                        type: string;
+                        msg: string
+                    }) => `- ${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')}️ TEST: ${test.trim()} ${getEmoji('error')}️\n${'-'.repeat(50)}\n${urlsAndErrors}\n${'='.repeat(50)}`;
             }).join('\n\n');
+
             // Reset the collector for the next test run
             setCollectedIssues([]);
 
@@ -176,9 +216,8 @@ function disable(): void { Cypress.env(envVarDisableJsLogger, true); }
 
 /**
  * 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).
  */
 function enable(): void {
     // Ensure the logger is enabled by default
@@ -188,49 +227,24 @@ function enable(): void {
     attachJsInterceptor();
 
     /**
-     * Custom 'afterEach' hook to collect JavaScript errors and warnings after each test execution.
-     * The behavior of this hook depends on the strategy set for the logger.
+     * Custom 'afterEach' hook to analyze JavaScript errors and warnings after EACH test execution.
      */
     afterEach(() => {
-        // Skip the hook if the logger is disabled
-        if (isDisabled()) { return; }
-
-        // Depending on the strategy, collect issues and analyze them
-        // If the strategy is failFast, issues will be collected in 'window:load'
-        if (getStrategy() === STRATEGY.failAfterEach) {
-            // Collect issues after each test and analyze them immediately
-            collectIssues().then(() => analyzeIssues());
-        } else if (getStrategy() === STRATEGY.failAfterAll) {
-            // Collect issues after each test, but analyze them only after all tests are executed
-            collectIssues();
-        } else {
-            // Do nothing for failFast strategy, issues will be collected and analyzed in 'window:load' hook
-        }
+        // 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
+        analyzeIssues();
     });
 
     /**
-     * Custom 'after' hook to analyze collected errors and warnings after all tests are executed.
+     * Custom 'after' hook to analyze JavaScript errors and warnings after ALL tests execution.
      */
     after(() => {
         // Skip the hook if the logger is disabled or if the strategy is not failAfterAll
-        // This hook is only relevant for the failAfterAll strategy, where we analyze issues after
         if (isDisabled() || getStrategy() !== STRATEGY.failAfterAll) { return; }
-
         // Analyze collected errors and warnings
         analyzeIssues();
     });
-
-    /**
-     * Custom 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
-     * Applicable only for the failFast strategy.
-     */
-    Cypress.on('window:load', () => {
-        // Skip the hook if the logger is disabled or if the strategy is not failFast
-        if (isDisabled() || getStrategy() !== STRATEGY.failFast) { return; }
-
-        // Collect issues immediately after the window is loaded and analyze them
-        collectIssues().then(() => analyzeIssues());
-    });
 }
 
 /**