Dealing with alert dialogs

Alert dialogs (alert, confirm, prompt) are quite different from a standard in-page modal. First, they are synchronous, they block the JavaScript main thread until they are closed. Second they render outside of the page’s DOM.

Frontend Robot abstracts those differences, so that you can manipulate alert dialogs in a way that is similar to any other page element.

To access an alert dialog we can use the :alert pseudo-element. Within the alert we can then:

  • Check if the alert exists by issuing an Element Exists instruction on the selector :alert #alert.
  • Check that the alert has a certain text by sending an Element Exists instruction on the selector :alert #text:eq("<content>").
  • Set the input of a prompt using the Set Element Value instruction on the :alert #input selector.
  • Confirm the dialog by sending a Click on :alert #ok.
  • Dismiss the dialog by sending a Click on :alert #dismiss.

All those selectors are completely transparent if you use the Live Editor’s selector extractor, as shown below.

Alerts in the Live Editor
Alerts in the Live Editor

NOTE: As you may already have noticed from the screenshot, there are certain limitations imposed by the current test driver. In particular the value of the input field can only be set - it cannot be read - therefore you won’t see it in the Live Editor. Also, we can’t distinguish an alert from a confirm or a prompt dialog, therefore they will all look the same in the Live Editor.

Questions?

We're always happy to help with test creation or other questions you might have! Search our documentation, contact support by email or on chat, or connect with our sales team.