 I am Ankita. So we are from Wingify and we are going to speak on a topic which is web push notification automation mystery solve. So yes indeed we have solved the mystery like these are the push notifications for which there is no automation right now indeed available. So not even Google has provided it like they have started developing but no there is no great progress on that regard. So like we started on working on it. So what we will do is we will demo our tool as well as I will just quickly run down of the agenda like what all we will be covering. So how many of you are having knowledge about web push notifications? Yeah so mobile push notifications were there then Chrome launched about a year back web push notifications as well. So that is great. So we will be discussing what are push notifications, the concept behind it that is a service workers then testing those notifications our tool push not and it's demo and it's for the scope. So talking about push notifications so every one of us are like most probably well versed with the mobile notifications like you must be having applications like Facebook, Twitter and what not any shopping website. So they are pushing content every day every day and night they are sending you product updates or any offer updates so they are using. So this was not present in mobile web. So have you seen such kind of a pop-up or something like which we generally want to click on the blog button because we are afraid that it will spam us. So these are the Chrome notifications. So clicking on allow will like you will get subscribed to them and any new further updates you will be receiving on your desktop on your laptop wherever you are accessing the same. So this is how it looks in Chrome the first screenshot and the second one is for the platform. They have also like Chrome launched in a year back and Firefox did like a couple of months back. So coming back to push notification. So these are basically timely good engaging updates which websites want to send to their users and they are really engaging like there were certain case studies which proved that classic email like email notification and email matching those are turning out to be really sad now like there are very less conversion rates and very less click rates etc. But push notifications they know that a person is accessing his browser and once it is subscribed so even websites like you know leading newspapers in the times dot com fans of India and what not. So they all are these days using push notifications. So one major advantage is that your browser should not be open like if it is open it is fine. So once you have subscribed to them there is no need for the browser to be open just like mobile apps once you have installed that same application then no longer you need like to keep it running to receive such updates. Similarly if we talk about subscribed users so yes once you are subscribed you are done like every time you will be getting these notifications once your script is running there is a background script running over there. So what enables like what is the technology behind. So the technology behind is the service workers. Service workers are basically like these are the background scripts which are running in parallel or off the shelf they are running in the background they do not have like access to the DOM or like they are not at all related to the web page but they do open like opportunities to like basically it is a programmable network proxy so which is listening to all the requests coming on your browser and reciprocate it saying which since it is a network proxy so HTTP is needed like you cannot have any website which is HTTP could note down the push notifications but saying which like nothing is impossible so there are hacks available in which if you are having HTTP website there are certain workarounds for which you can still use push notifications certain SAS players are out there are helping you do that. So as I said it is a background service script so it cannot access DOM directly also it does not have any access to the local cache local storage or index DB it does not have any access to that. So while implementing push notification service workers are having a particular life cycle so it starts from like first of all it is the installation script then it is the activation activation could either lead you to a successful install or maybe an error so this point we need to take care like all the developers or even if the QSR implementing service worker so they need to maintain that all the steps are mandatory and they are being a full fin if your service worker is not installed then definitely you would not receive any of the notifications or any of the other benefits of the service worker. So push notifications is a one use case of service worker there are a lot of use cases of service worker namely like it is used for caching of the resources certain background tasks could be run like you are off your browser you have closed your browser but still there are certain monitoring tasks which would be may be basically sending data to the applications you have accessed it before so knowing your pattern things like that are being developed but one major use case is push notifications so while developing push notifications as a developer or as a QA you need to follow the current life cycle like starting from the registering to installation then at the last registering a push event listener which will actually listen to all the notifications which are back end would be later sending on and all the users would be getting it well service workers can also decrease your web load time so if you see that certain notifications are coming generally there is an icon associated with it just taking a use case so those icons are also cached every time it's not that that from the internet it is fetching the that icon if it gets updated yes there is a different protocol for service workers if it gets updated you need to you know like either clear a cache or generally these days people use it as a hack that update your like up and the random number here to your script being fetched well as I told you like this is kind of a cumbersome task to do like starting many websites are implementing on their own as well like if we talk about facebook.com or say track.in so some of them are implementing service workers on their own but since it's a cumbersome task so there are certain SaaS based companies which are helping you out and even HTTP websites are enabled for them like even if you are having a HTTP website you can still subscribe your users to push notifications and hence interact with them and send over so certain players are there like pushcrew.com pushwish.com iso2.com so they just play like like GTM or something so they will give you a smart code you can install it on any of your head tags and there you go like people can now access your application subscribe to push notifications one which is pushcrew so this is our in-house tool this is a SaaS application so our demo will be using pushcrew like my website is a HTTP website so I haven't implemented service worker on my own but I'm using the service so now the question comes like fine you have developed your service worker you have installed and like every user is getting notifications but the point is how to automate them so like very single approach every manual tester must be doing like it involves a lot of time energy like people would be sitting in hours or say consider scenario these notifications are generally sent by marketers so if a marketer wants to publish a product update or say any offer or something so what it'll do is he'll release update or developer will provide them a CMS or kind of an API to it to send the notification then the tester will basically wait for the notification test its occurrence like maybe that the data is perfectly received or not the URL is correct or not because if you click on the notification they take you to a URL which is the intent of the notification that yes get redirected to a particular content page or an offer page so same which since classic approach is manual testing is cumbersome and it's like kind of boring so why not automate it so as someone also mentioned like there are screen comparison tools available so maybe like take our test data take a snapshot before sending the notification and one after that so maybe you can do it like that but if you're not into that maybe use push not so push not is basically the tool which we develop so it's a specialized open source proxy tool for modifying parsing and fetching notifications and this works for Firefox as well as Chrome so Ankita will walk you down to its architecture and we'll have a demo in a short while. So push not is written in a node and you need to have node on your systems to run it so I'll walk you through the architecture how we are basically what we are doing with push not so you remember the steps in the life cycle the first was registration that was the crucial step so here when we are sending a registration request our proxy tool intercepts it so the response of the request is service worker.js this is basically the file which contains methods and functions which implement the push notifications you have methods which trigger a notification you have methods which help you capture what the user what was the user's action on those notifications so when we are intercepting this service worker.js we are inserting our own payload into this file this payload would not at all affect the existing functionality of the service worker but it will have methods and functions which would enable us to capture the push notification response so what gets registered on a browser is a modified service worker it's like totally like the original one but with some extra methods and functionalities so once we have registered our modified service worker the next is sending a push notification and receiving it so you can send a push notification in two ways if you have like your in-house development then you can use the methods specified by the web API to do it or if you're using a third party they provide you with an API endpoint along with your credentials related to your account using which you can trigger a notification so once a notification is coming in again our proxy intercepts it it captures the response the data which is sent in the notification and saves it in a file the format of the data is in JSON so we create a JSON file at our local systems and save it over there after it has after the data has been saved we again reroute the request back to the browser so that we can actually see the notification on the browser so everything works fine just we came in between and captured the response so a typical response looks like this it has title it has message it has the URL on which of the landing page to be taken to it has an icon so you don't need to verify anything if you just verify all these values it's a simple JSON format you can create a JSON object and verify it so once it is done then before the demo there are some prerequisite steps we need to follow these are very important and crucial so first is related to our proxy as it's a proxy it has to it is running on some port so we've given a flag for by default it runs on 9 0 0 2 port and if you have any other service running on that port you can change it the other one is domain so it's a proxy tool it is intercepting all the request so all SSL handshakes and HTTPS secure connections will break because it's a proxy it won't consider your host as the correct origin as the correct origin so if we provide the domain name suppose my site is anketa.com and I provide domain equal to anketa.com or anketa my proxy tool will just intercept request coming from that particular domain so all my other websites all my other functionalities not belonging to that domain will still work they'll work perfectly fine suppose you example you have a case of push notification on facebook sign up so we want the sign up to happen so if we use this domain flag and just specify our pages domain then our facebook sign up will work perfectly fine then it's a proxy so we have to set up system proxy or browser proxy and chrome we cannot set up proxy so we have to system proxy Firefox gives us capabilities option where we can set up proxy so we need to set up the proxy same as push not proxy by default a local host 9 0 0 2 otherwise whatever mentioned the third is browser option by launching launching the browser so by default Firefox ignore ignores all SSL certificate errors chrome does not so first flag if you want if you are using chrome is ignore SSL certificate errors the second is you remember that allow block pop up so there is no way to click on that so but there are browser preferences which allows big sets all these value so a profile default content setting value notifications it has three it can take three values 0 1 2 0 is default 1 is always allow and 2 is block so if we give it as 1 it will it will still it won't ever open up that allow block box by default all all allow block pop will be accepted so let's go to the demo so the demo depends a lot on the internet connection so the first step was starting the proxy so I'll provide a GitHub link from where you can just download our proxy and start it the start command is node start.js which is our initial file and I have given the domain as Jatin because my website is hosted on Jatin.bingify.com so my proxy has started it's listening on port 9002 so the next step was setting up system proxy I'll go to my system settings I'll set up HTTPS proxy localhost and the same port as my push not service once I've done that I need to launch my browser with the desired capabilities so I'm using protractor here because we are very much familiar with it otherwise you can use any other language all Java Python Ruby every language gives you the option of setting browser capabilities so I'm using Chrome with and in Chrome options I'm using ignore certificate errors argument and a preference so with Firefox you don't need to use the ignore certificate errors argument because it automatically does that but you definitely need to use the other preference so my browser capabilities are set and now I'm going to start a test so this test has some very basic steps it opens up a page which has a service worker enabled okay so it opens up a page you see that allow don't allow notification that is a push-to-custom box other players don't give it it clicks on allow then you get this box in this this is the place where you would get that allow block the system dialogue type of thing so it automatically clicks on allow then it triggers a push notification by API so we are not using our own service and it triggers a notification internet connections our notification is not here so this was the notification which I just sent it's here and now because of her proxy as it's received it has definitely be saved in our response file so our test is run you can see the first is accept the pop-up which was open it accepted then this was push notification has been sent successfully we sent it by API then this is the content of the notification title message and the URL we didn't print out image so we printed out here but if you want to see the response you can see it here it's in js1 format you have title we have message we have URL we have icon URL and other things so we have successfully captured it in a file and now we can just use our existing frameworks to read this file and convert it into a js1 object and assert it so our reports are also here a failed scenario like we could edit the notification or something and okay so this would work only for service workers because they are adding that payload right so that is a service worker specific that must be system notifications this is web push notification this is triggered by the browser so maybe we can take look into it how it's implemented and then there must be a preference like you know we set a preference for 0 1 2 for the auto allow and block so there must be a chrome option and associated there would be a preference so there are preferences also there one is chrome options and the other one is preferences so this preference if you see it is notifications preference only it's not setting all the preferences and here in the browser if you click here you can see location camera so there must be a camera preference which you would have to set so notifications is asked by default when I set it as one this is always allow on this side it gets automatically set so for camera there must be a specific preference so current scope is we have tried and tested it with chrome and firefox also a little difference in how notifications are received in chrome and firefox is the json object in chrome we get it as message in firefox it's msg so keep that in mind if you want to build a generic system for both the for both the browsers and currently we cannot store multiple notifications as we are writing onto a file we are removing it every time so so if multiple notifications come then the latest one is the one which is in the file and you will access that so all previous notifications would be definitely lost step in your script like to delete the json maybe we can add that but the thing is if we duplicate notifications I don't think so like if you are subscribed in more than one browser then definitely yes that is totally dependent on browser and network connection your system speed your network connection basically that we cannot even sometimes it happens with us also it comes in five seconds it comes in 30 seconds it's not it's not at all 100% reliable push notifications sometimes you trigger it but it's not at all received so that is also one drawback of service worker that it's not 100% reliable in the test so push not will capture it as soon as it comes but when at what point of time it will come we cannot determine we will like always be listening on the port for any push notification to appear so in our test we have to handle we have to like maybe wait for like 30 seconds by default if it doesn't come in this much time then it's not a good thing so maybe in our test we can we can make build this scenario wait for the push notification it might come in five seconds it might come it might not come in 30 as like even you if you are like testing it out you don't know till what point of time to wait there's no mechanism to ensure that it should come within five seconds or 10 seconds or that has to be handled in the case and we've like uploaded a sample script in JavaScript right now so that you can have a look what all chrome preferences are to be said and how did we trigger a notification reading and writing json responses you can find our repository at github.com it's all in the slides and they would be available on conference so and if you want to know more about implementing service workers on your own you want to try them out you can go on developers.google.com they have a very elaborate simple and step-by-step walkthrough procedure with code snippets available there which you can just copy paste in your code and try out push notifications for web for your website and a push through has developed case studies of their clients actually captured with numbers how push notifications are effective than email communication or any other mode of communication the numbers are really there's a big difference in number what happens with emails it goes into junk you don't read them you don't open them a lot but push notification it's on your browser you have to have to see that it's up to you to click on that but definitely you will see that that's pretty much about us do try it out and it's pretty interesting it was pretty interesting to work with service workers it's a really a new thing which has come up in the market really interesting to work with any questions or any more demos any queries you have you can reach us out later and do try out so you can fork it it's open source so we have released it and just try out there might be bugs in one so maybe you can smash some bugs over there and maybe corner cases so one such is Chrome Android is also supported so we haven't tried that out yet so maybe someone would try that yes a lot of challenges so the biggest one was issues so Chrome service workers they all work on HTTPS and secure connections at as it's a background script it listens and it's a network proxy also SSL is a must it is kind of like a person man in the middle type of thing so you need SSL so once we are like how do we kind of insert our code so that it does not break the SSL authenticity and still we receive our push notifications so so one was that the other one was it's a background script it does not have access to DOM local cash of special cash cookies or any kind of thing so once we even inserted a script how do we get the data out of it so for that we have implemented web sockets so we are listening on the same port and are like the payload which we've inserted it sends the data via web socket so so you inspect it using like Chrome service worker internals but then if we have to do that we have to open that particular page in the browser then click on inspect and write your code in those in that particular console so that was very cumbersome plus if your browser is not open you'll still get the notification right everything was getting printed you're right like if you inspect everything will get printed all the console log statements and log statements would get printed but the thing is that now you have to assert right so if you are manually clicking on it then it's a manual testing but if you have to assert on its own then you have to get those logs get those data back the notification is sending you like there were eight things right that title message URL so you need to assert that that whatever you had sent it is actually being received because if you're not asserting then yeah so there is no point of so and you cannot assert from a console dog and you cannot assert from the objects you can you can access them over there but you cannot access them with automation rendered at right place yeah so that could be done in your automation script like we had launched a browser you have accepted it maybe you could just kill the browser then and there once it is allowed and then you will receive that notification so another thing is that all these for location and basically it's look and another thing is that we we are assuming that all these actions are native actions like click location and all so they must be working fine so this is basically for how we have implemented it this is testing that not the not whether the click action of for the the native web api click action is working or not it won't capture the screenshot you need it captures the window size nothing above or below the window it doesn't capture which basically insert the system commands you can run the system commands for that right we are assuming that it's a basic functionality and it would be working fine i'm pretty sure it must be possible with the preferences because i was going through the list and i also like so you have to enable it or you have to disable it when it is coming so there must be like definitely if it's possible just write to me or just give me your contact i'll get back to you because i have seen those things and it will definitely work yeah we can try it out so those alerts are implemented by a service workers so automation can handle all those alerts it's windows so you're talking about the yellow strips which come on top we handle as they're a part of browser only so there are ways to handle them yes not outside the browser then thanks a lot and like try out service workers it's a pretty interesting thing thank you