Pop-ups
1.2.3 Pop-ups
Most eCommerce websites include pop-ups for advertising new products, sales initiatives or trying to capture user data such as email addresses for marketing campaigns. These kinds of behaviours can be problematic to Synthetic User Journeys. They are often unpredictable and block elements that your Scripts are targeting. A real user can deal with these situations by simply deciding to close the pop-up. However, Synthetic scripts are much more fixed and need to have this intelligence “coded in”.
To handle these scenarios, we first need to determine the parameters for a pop-up appearing. Are they triggered by simply navigating to a specific page, or based on the length of time a user has been visiting the website? In either case, an IfElement action can be used to deal with them. However, we need to know where the pop-up might appear so we know where to place the action.
IfElement actions enable you to add intelligent logic to handle situations that are not guaranteed to always occur in the same way. They use a coding practice called if/else to determine which actions to run. The ‘if’ logic has a WaitForElement-style logic that allows you to do things like this:
- If a pop-up appears within 15 seconds:
- Capture a screenshot
- Click the ‘close’ button
- Wait for it to close
- Capture another screenshot
- Else:
- Capture the page without a pop-up present
By dealing with pop-ups in this way, you’re able to avoid journeys failing due to non-issues that could otherwise could cause test failures.
If you have followed the above structure and are finding the IfElement action is not finding the selector it could be one of three things:
Timing Issue – The majority of sites have pop-ups trigger when the site is first loaded, clicking specific pages or performing certain actions. It is worth clicking around yourself in fresh private browsers to see the different triggers.
Broken Selector – Many pop-ups have ID’s associated with the exit buttons which are great selectors to use in an IfElement. Some Pop-Ups are more complex and you may need to try a few different selectors before finding the more appropriate.
Multiple Pop-Ups – During busy times in the year it is common to have lots of offers on your site. For example, you might have a 10% off Pop-Up, a newsletter and a cookie banner all at the same time. Ensuring the script is looking for the correct Pop-Up at the right time is essential. In cases where the timing varies, you may even want to duplicate an IfElement to double check it has definitely been accepted before proceeding.
Iframes – Maybe you have run a Save & Check, checked for timings, multiple pop-ups and are confident you have done everything correctly, but the IfElement can’t find the pop-up. You may have an Iframe on the Pop-Up which is causing the journey system to not see your selector. To check if this is the case, open DevTools and scroll up the element list of the Pop-Up to see if it is within an Iframe. If you are unable to see an Iframe you can search ‘iframe’ and see if anything is flagged on that pop-up.
If you encounter an Iframe on the Pop-Up the IfElement will look slightly different:
- If a pop-up iframe is visible within 15 seconds::
- Capture a screenshot
- Enter Iframe
- Click the ‘close’ button
- Exit Iframe
- Wait for it to close
- Capture another screenshot
- Else:
- Capture the page without a pop-up present
It is essential that you are looking for the Iframe to be visible to ensure it is present before entering. After the click has been successful remember to add an ‘Exit Iframe’ action before interacting with the Homepage.