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 picker, as shown below.

NOTE: Currently there are certain technical limitations imposed by Frontend Robot’s underlying 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.