Capturing and Validating Native Alert Messages

Article Overview:

This article will cover how you can achieve the following:

• Capture and validate the text of native alert messages displayed during journey execution.
• Use extensions and JavaScript to handle and verify alert messages.

Problem Statement:

Users want to capture and validate the text displayed in native browser alerts during specific actions in their journeys. Standard approaches may not work due to the ephemeral nature of alert messages.

Solution:

Solution I: Using outer HTML

Capture the page's HTML, including certain alert-related content, using:

Store value ${document.documentElement.outerHTML} in $details

• This captures the entire HTML content, which can include alert-related details under certain conditions.

Solution II: Using alertcheck() Extension

Code:

The alertcheck(path) extension overrides the browser's native alert function to capture and return the alert message.

// Override the native alert function
let alertMessage = null;
window.alert = function(message) {
    alertMessage = message; // Capture the alert message
    console.log("Captured alert message:", alertMessage); // Optional: Log for debugging
};
// Simulate a form submission and click the OK button
document.querySelector(path).click(); // Replace with your actual OK button selector
// Return the captured alert message
setTimeout(() => {
    if (alertMessage) {
        done(alertMessage); // Return the captured alert message
    } else {
        doneError("No alert message captured");
    }
}, 200); // Adjust timeout if necessary
return alertMessage;

Example:



Reference Screenshot:

Steps to Use:

1. Use the alertcheck(path) extension in your journey.
2. Provide the appropriate path to the button or element triggering the alert.
3. The captured alert message is returned and can be stored for further validation.

Solution III: Inline Extension

Code:

This inline script captures the alert message and stores it in a global variable for later retrieval.

1. Override the alert Function:

   Execute "window.alertMessage = null; window.alert = function(message) { console.log(message); window.alertMessage = message; }"
   

2. Trigger the Alert:

   Click on "Alert"

 3. Retrieve the Alert Message:

Execute "return window.alertMessage" returning $alertMessage