Assert elements that disappear after a certain time

This article explains how to assert elements that appear and then disappear after a few seconds, such as toast notifications or flash messages.

How to create a scenario

1. Record the actions up to right before the target toast/flash element appears.

2. Perform the action that makes the target element appear (for example, submit or save).

3. Continue recording and add an assertion step for any element (at this point, it does not have to be the toast element).

4. Finish recording and open the Scenario editor.

5. Open the assertion step you added in step 3, and update the Locator and Text to confirm (expected value) to match the content of the target element.

How to get the locator for the target element

If you do not know the locator for the target element, follow these steps to obtain it.

1. Before the target element appears, open DevTools in the recording browser and display the Sources tab.

   • Windows/Linux: Ctrl + Shift + I (or F12)

   • macOS: Command + Option + I

2. Right after the target element appears, do the following in the Sources tab to pause JavaScript execution.

   • Windows/Linux: Ctrl + \ (or F8)

   • macOS: Command + \ (or F8)

3. Switch to the Elements tab in DevTools, select the target element, and note its locator.

4. After you finish, return to the Sources tab and press the same keys as in step 2 to resume execution.

For how to obtain and change a locator, see Change Locator.