How to Handle Pop-ups and Out-of-Window-Artifacts When Web Testing

How to Handle Pop-ups and Out-of-Window-Artifacts When Web Testing

/, Digital Experience/How to Handle Pop-ups and Out-of-Window-Artifacts When Web Testing

Out-of-window user interaction is fairly common these days with desktop websites. Popups can be used to grab users’ attention or to serve a specific function that one may not want to deliver in the body of the page, etc. Some examples include login popup, and the ability to save or refresh a password in the browser. Recently, HTML5 added common popups which request access to user location, microphone, and memory. The latter, for example, allows continued experience even when your laptop is not connected.


Figure 1: Popups enable functionality requested for HTML5

Another common case for desktop testing is add-ons. It can become complex to test add-ons, which are a very popular asset for Chrome users. Using standard Selenium to write a script that interacts with these components can prove challenging. Luckily, a good visual analysis tool can really help, as it operates anywhere in the visible area: you can detect a field, click to interact, enter an URL, username/password, click buttons, and dismiss popups. You can even interact with unexpected popups in an exception-handling clause.


Figure 2: Unexpected popup can cause your script to fail

With the recent addition of desktop browser testing to the Perfecto portfolio, users are now able to benefit from the visual toolset that was previously offered for mobile devices. In a short example, we created a demo test page that requires login. Once the username/password are entered, you need to click the login button. Chrome will then offer saving of the credentials in yet another popup, which we would want to dismiss.


Figure 3: Example test page including login popup

The code sample is based on the visual functions (described here), specifically functions like text edit-set, which would enter a text into a field, and button click, which is based on OCR. The entire code base is here.


Figure 4: Using Perfecto’s visual manipulation and analysis tools to login and dismiss follow up popup

To operate the example, you will need to add the following parameters to your TestNG environment variables:


Figure 5: Set TestNG environment variables

Visual operations are commonly mistaken as exclusively part of a performance testing tool, outside the functional test. Hopefully this post illustrates that sometimes you need visual tools to operate your script. Logging into a website seems a core function to many scripts 😉 Beyond operating your functional script, visual tools can assist with measuring the responsiveness of your site, as well as validating the rendering.


Figure 6: Validate the rendering of desktop of mobile web page

Sometimes, when you have a page with many calls to action, it can become challenging to validate all of those buttons individually. You may want to consider full page visual validation tools like Applitools. Effectively you can point out functional flaws in one screen scan. Check out the blog post and code showcasing an integration of Perfecto script with Applitools.


Our recommendation for test automation engineers is to take another look at your script: some functions would be best served by native objects. But it’s not black or white: you may save yourself work, and gain more coverage and insight if you use and become familiar with some of our awesome visual analysis functions!

Amir Rozenberg is the director of product management, responsible for core product strategy at Perfecto, the leading digital cloud and test automation company. Amir has pioneered mobile quality practices in Perfecto to extend the service across the application life cycle. Amir has extensive experience in the digital industry with expertise in areas including application development, testing, delivery and monitoring. Amir led successful synergies with Microsoft, Blazementer, HP and others to optimize value delivery to our customers. Prior to working at Perfecto , Amir led the mobile monitoring practice at Gomez/Compuware. Prior to Compuware he led the founding of Adva Mobile, a direct-to-fan mobile marketing startup, as well as various leadership positions at Groove Mobile, Nextcode Corp. etc. Find Amir on Twitter (@Amir_Rozenberg), and LinkedIn ( Amir commonly writes for Dzone, CIO Magazine and other publications.

Leave A Comment