Raj Dhivya
- May 19
- 4 min read

How to Handle Toast Message / Disappeard Message / Pop Up Message in Selenium?

Toast messages are like notification popups, which give information in the form of a notification, for specified action. Since it is a popup notification, we cannot handle it the same as alert. We have to handle the toast message with a certain approach.

What are Toast Messages?

Toast messages help to deliver simple feedback to the user. They most often follow an action performed by a user and provide information regarding the success or failure of that action. Toast messages are informative, have a lifespan of just a few seconds and which will take up a minimal portion of the screen.

Toast message notifications never interrupt the application. When the notification popups. Regardless of any platform, the Toast message notifications are silent and there won't be any tones or sound associated with it.By default behavior this notification will popup at the top or bottom of the viewport.

An Example:

Check this site for an example… https://codeseven.github.io/toastr/demo.html and it covers various Toast messages.

Developers design the notification popup ribbon with required format and color based on the user requirements and suggestions.

Let’s handle this message…

Step1:

Right Click on the page and go to the inspect option at the bottom of the list.

Step2:

Which will open up a new Tool window to select Sources from the top of the window Or Directly Go to Dev Tools, and select the “Sources” option. And we can also pause the DOM elements by using a keyboard shortcut→ fn+F8 (or Ctrl+/) or by clicking Script pause execution. It freezes the web page and DOM.

Step3:

Inspecting the toast message is the last and important step. In the below mentioned window, Once toast message notification popup, click the “Script pause button”. And now we can navigate to the elements tab using cmd/Ctrl+F, and find the text and now we can find the locators too.

For this Toast message Locater is…

X-path is…..By.xpath("//div[@class='toast-message']")

Another way to run the debugger is using snippets…

To locate the disappeared message elements using “snippets” follow the steps.

Go to Developer Tools or click inspect, and select the “Sources” tab.
Select snippet
Click on New Snippet
Go to Script Snippet and enter “debugger;”
Now, Right-click on the Script snippet and select Run Just like below image.

It pauses the DOM as mentioned above and you can locate the elements.

Inspect the toast message using SelectersHub - xpath plugin :

SelectorsHub is the free Next Gen XPath plugin & CSS Selectors plugin. It is officially featured by the chrome store and It is available for Chrome, Firefox, Edge, and Opera browsers. SelectorsHub helps to generate, write and verify xpath and cssSelector of elements.

Install the plugin and add the required Extension in any browser.
Restart the browser before using it.
Now, open the Selectors Hub tab, which is the last tab in the DEV Tools. Using Selectors Hub tab we can generate the exact relative path of elements.

How to inspect using Selectors Hub?

Right click on the element and go to Selectors Hub on the list.
The arrow on the Selectors Hub shows the option to copy the id, name, Relative xpath, CSS selector,. We can choose any of these to locate the elements.
And the Selectors Hub tab shows the respective xpath and we can copy from the DOM.

Code to locate the Toast Message for the above Example:

WebDriver driver= new ChromeDriver();

driver.get("https://codeseven.github.io/toastr/demo.html");

driver.manage().window().maximize();

driver.findElement(By.id("showtoast")).click();

WebElement toast=driver.findElement(By.xpath("//div[@class='toast-message']")); // xpath of toat message

String toast_text=toast.getText(); // Get the text message using gettext() method

System.out.println(toast_text); //prints the Text in Console

Partial Screenshot of Toast Message:

Partial Screenshot to capture the visible area of a specific element on a web page. To identify the element, we can use Selenium WebDriver methods to locate it by ID, class name, CSS selector, or XPath. We applied Partial Screenshot to capture the screenshot of a Toast Message using getScreenshot() method And TakeScreenshot() method to capture screenshots of the entire page or the viewable part of the page. Follow the below steps and code to implement it.

Add below "Common IO" maven dependency. The Apache Commons IO library contains utility classes, stream implementations, file filters, file comparators, endian transformation classes, and much more.

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

</dependency>

Create getScreenshotAs() method and it is from TakeScreenshot to capture the screenshot for the required element.
The parameter OutputType.FILE returns the screenshot as a file.
Fileutils class is to perform operations like copying a file, moving a file,. and it provides method to manipulates files like moving, opening, checking existence, reading of file etc.
CopyFile() method copies the contents of the specified source file to a file which is specified directory in the parameter. The destination directory is created if it does not exist. If the destination file does exist, then this method will overwrite it.

Code:

driver.get("https://codeseven.github.io/toastr/demo.html");

driver.manage().window().maximize();

driver.findElement(By.id("showtoast")).click();

WebElement toast=driver.findElement(By.xpath("//div[@class='toast-message']")); // find the element

String toast_text=toast.getText();

System.out.println(toast_text); // verify the Toast message in console

File file= toast.getScreenshotAs(OutputType.FILE);

FileUtils.copyFile(file, new File(".//src/test/resources/Toast_Message.png"));

Screenshot of Output:

Conclusion:

In this blog, I have explained the approaches to inspect the notification popup/disappeared messages or Toast messages in the DOM. Freeze is the only option to locate some of the elements, but we have different approaches to enable the debugger or script pause button. Selectors Hub plugin helps to verify and find the exact locators. We can apply any of the techniques to locate the element, it depends upon the script. I hope it helps you to inspect disappearing elements on the web application.

“Learning is a lifelong process.”.......…………..