Many websites use modals and pop-ups to enhance the customer experience, gather valuable information, or present customers with useful notifications.
These pop-ups can be challenging when testing in a synthetic environment as they may cause a false positive failure if you have not taken proper steps to handle these inside your tests. The best ways to handle modals or popups are implementing server side configurations like custom request headers or query string parameters that can be used as a part of every Rigor test.
If those aren't viable options, we've provided a few steps below to ensure that these modals do not adversely impact your checks' results.
1. Is the appearance of the popup predictable?
e.g. Every time a user visits the homepage from a clean cache the modal appears.
We can use a 'Click' step in Rigor to target the 'X' in the top right to close the pop-up.
Example
A modal window appears every time a new user accesses the API Check landing page inside the Rigor app.
We can target the 'X' in the top right-hand corner with a click step in the steps. We also recommend adding a wait step so that the modal has time to appear when the page loads.
2. How is the appearance of the popup initiated on the page?
a) An independent JavaScript file initiates the appearance
b) A function inside the page's main JavaScript file initiates the popup
If 'a' - We can use a Custom Exclusion to block requests to the domain, directory, or individual asset that is responsible for initiating the appearance of the modal on the page.
Example
A common popup window on many sites is served by Foresee. Many times the appearance of this modal is unpredictable on a page.
Below we use a regex expression inside a Custom Exclusion to block the directory that contains Foresee assets on Godiva's site.
If 'b' - If a function inside a page's critical JavaScript code is responsible for initiating the popup, we don't want to use Exclusions as this may break page functionality. Instead, we can handle the modal with a 'Run javascript' step.
JavaScript steps execute asynchronously in the context of a Real Browser Check, so the appearance of the modal is not required for the step to pass. This is useful when you cannot predict the appearance of the modal within given a certain user flow or navigation path in your check.
Example
Using the API Check modal example from above, we can use a 'Run JavaScript' step to close the modal. Because the appearance of the modal is not predictable, we add a wait step before that waits for the Twitter element to load in the footer of the Rigor app.
Do you have questions or want to learn more about handling popup windows in your Rigor checks? Drop us a line at support@rigor.com.