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.
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.
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.
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.
To operate the example, you will need to add the following parameters to your 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.
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!