Handle Pop-Ups In Browser Tests

Overview

This guide describes how to manage pop-ups such as modals or application windows in a Synthetic browser test.

Modals

JavaScript

Synthetic browser tests automatically handle JavaScript modals:

  • alert modals are immediately dismissed for OK.
  • prompt modals are filled with Lorem Ipsum for tests on Google Chrome or Microsoft Edge.
  • confirm modals that ask for confirmation are accepted.

Basic authentication

For basic authentication pop-ups, specify the associated credentials in your browser test configuration’s Advanced Options.

Basic Auth Pop-up

Application pop-ups

Anchored pop-ups

If a pop-up appears at a specific point of your journey, you can record a step to close it and allow this step to fail using the corresponding option. This way, your test knows how to behave in case a pop-up appears. If the pop-up does not show up, the step fails without causing the whole test to fail.

Allow step to fail to handle pop-up

Moving pop-ups

If the time at which these pop-ups appear in a session is not predictable, check with the third party providing the pop-up to see if they can create a rule that prevents the pop-up from appearing during your browser test execution. They can, for example, provide you with a cookie that you can input in the Advanced Options section of your test.

Alternatively, use one of these methods to ensure your pop-up is closed and your test is able to continue its journey:

  • Create a JavaScript assertion at the beginning of your browser test to regularly try to close the pop-up:

    if (document.querySelector("<ELEMENT>")) {
  return true;
} else {
  return new Promise((resolve, reject) => {
    const isPopupDisplayed = () => {
      if (document.querySelector("<ELEMENT>")) {
        clearInterval(popup);
        resolve(true);
      }
    };
    let popup = setInterval(isPopupDisplayed, 500);
  });
}

  • Record steps to close the pop-up, add them between all your other browser test steps, and select the Allow this step to fail option for each of them.

Further Reading

Additional helpful documentation, links, and articles:

User experience monitoring with Datadog Browser TestsBLOG more more Learn about Synthetic browser testsDOCUMENTATION more more