Automated Testing of Web Push Notifications
The Web Notification is not something which is new in the market. All the major browsers are supporting these notifications since last 4 to 5 years.
At-least this blog is a proof that notifications arrived in Chrome in the year 2015.
When my team recently got a task of automating these web notifications, I started googling about it and to my surprise there is no strategic solution available for this problem over the entire internet.
As a normal tech person I decided to throw this problem to my automation fraternity on Linkedin but unfortunately did not find any concrete solution.
Is nobody interested in automating these web notifications or it is really hard to automate them ??? I believe the latter is true so I decided to dig more in to this area.
As these notifications are displayed in the browser’s native UI so they can’t be automated using Selenium. The only solution left is to automate them using native UI automation tools like UFT, TestComplete etc, which is not a strategic solution in my opinion because it would be specific to OS and cannot be used in case of headless/containerised environment where there is no UI displayed.
To understand this problem in detail, first we have to understand what exactly are Web Notifications. Notification is a way to engage a web user even if he is not actively working on your web application.
To see browser notifications, you would need to set the permission to receive them as shown below.
There are two types of Notifications:
- Simple Web Notification
- Push Web Notifications
Let’s cover them in detail.
Simple Web Notifications
These are the notifications which gets triggered by the javascript code running in your application and it can be triggered out of any event. Let’s take an example of gmail application which keeps polling the server for new emails every few seconds and once the new email is received, a browser notification is triggered to get the user attention.
These notifications are triggered by a standard HTML 5 notification API which is supported by all major browsers.
Here is the view of the simple web notification interaction.
Here is one demo application to try your hands on the simple web notifications. You just need to click on “View Demo” button and it will trigger a notification.
Push Web Notifications
These are the more advanced form of notifications which are primarily designed to engage your users when they are not using your application or even when they are offline.
They leverage the concept of web service workers and the notifications are sent by the javascript code which runs in a separate service worker thread. That’s the reason they can send the notification even when the user has closed your application.
Here is the view of the web push notification interaction.
If you want to know more technical details about the web push notifications then you can go through this detailed blog on this topic.
Here is one demo application to try out web push notifications, you just need to click on the button “Send Me Push Notification”.
Enough of talking and lets delve deeper in to the technicalities.
My idea is to come up with a solution which should be generic enough to:
- Work with any browser which supports HTML 5 notification APIs.
- Work with any UI automation tool which can inject a javascript in to the browser under test.
- Work with out introducing any external proxy/dependency and should work in a standard UI automation environment including Selenium Grid.
Automating Simple Web Notifications
The solution which I came up is to intercept the Notification API using the Javascript’s proxy object which gives you a capability to inject and execute your code whenever a new Notification is created using the above api.
Let’s see the script to start listening to all the Web notifications.
In this script we created a Global array under the window object to store all the notification objects so that this array can have a global scope and can be shared across multiple scripts which we will inject using Selenium’s JavascriptExecutor.
In the proxy handler function you can see, first we are printing the Notification properties to the console for debugging purpose and then we are pushing that notification object in to the global array.
Now how would you validate that the notification which was triggered is stored in the global array. Here is the Java code to read the contents of that array and and then later you can iterate over it and look for your notification.
ArrayList<Map> notifications = (ArrayList<Map>) UIUtils.getInstance().executeJavaScript("return window.notifications;");Once you are are done with your assertion it is recommended that you have removed that proxy object as shown below.
Automating Web Push Notifications
Automation of web push notifications is even more trickier due to the complexity with which they work as they use Service workers as a middleman between your client javascript code and your backend server.
The proxy solution which we used for Web notifications will not work here as the service worker code runs on a different thread and any proxy which you will set will not be reflected in your service worker code.
So it took some time for me to figure out a solution for Web Push Notifications which are more popular these days.
Let’s see the script to start listening to all the Web Push notifications.
In this script we leveraged the setInterval method of Javascript which allows us to run a javascript code at regular intervals (every 2 seconds in our case). As we could not find a way to intercept the push notifications so what we will do is to poll the service worker registration object at regular intervals to get the notifications and saving them in a global map.
There are also some asynchronous elements in this script to handle the promises returned by navigator api.
This is how we will collect all the push notifications arrived till now.
In this script we are simply iterating over the global map and storing all the notifications in another global array and returning back to the caller and later we can use the same logic which we used for web notifications to collect that notification array in your java code.
ArrayList<Map> notifications = (ArrayList<Map>) UIUtils.getInstance().executeJavaScript("return window.notifications;");Once you are are done with your assertion it is recommended that you remove the setInterval as shown below.
Here is the complete code where I have created a Notification Service which does all the work required to start/stop these listeners and also search for a specific notification.
These are two simple JUnit tests to tests the Web and Push notifications where I have used the demo websites to simulate these notifications and then asserting them.
The complete Java project can be found here.
Hope this blog has given you more insights in to the Web Notifications technicalities and how we can automatically test these notifications. Please feel free to share your thoughts/queries in the comments sections and I will try my best to answer them.
