Interacting with Notifications using Cypress

Learn how to interact with browser notifications using Cypress. This includes disabling notifications, enabling notifications, and verifying the text of notifications.

Browser notifications are a great way that when granted, are a way to trigger information that gets popped up to the user on that website. 

When testing our applications, we don’t want to always get bugged by notification alerts if we’re simply trying to test that something in our page, like maybe this title is working as expected. In this instance, I’m just simply getting the h1 and checking that it contains “Notification”. 

How to Disable Notifications in Cypress Tests

If we wanted to tell Cypress that we wanted to disable these notifications though, we can pass in a second argument into the visit command, where we’re going to pass in a new object. And we’re going to say onBeforeLoad, where that function is going to have an argument of win. 

This win gives us access to the window of our page. We can say that we want to cy.stub and answer for the win.Notification, where we can say anytime that notification fires the requestPermission event, we can say that we want it to resolves(‘denied’). 

This time when our test runs, we can see that it actually stubs out for that requestPermission request. And we no longer get that alert.

How to Allow Notifications in Cypress Tests

Now, what if instead we wanted to actually test allowing those notifications and testing that the notifications actually work. 

Well, if we click allow and try to actually trigger this, we’re not going to actually be able to see it inside of the browser with Cypress as they stub that. But we can actually still test with Cypress events that it’s going to work. 

I duplicated our previous test where we’re currently denying that permission, but this time we want to change it to resolves(‘granted’). We also want to mark this as(‘permission’), so we can use that answer later. 

To test this out, we’re going to use cy.get where we’re going to find the “notification-button” that we’re going to click. 

We want to also test that the permission actually worked. So, we’re going to fire cy.get and we’re going to get that “@permission”, which is what we just stubbed above. We can assert that worked by saying should(‘have.been.calledOnce’).

Once that runs, we can see that it goes through. It fires requestPermission, just like before we stubbed it. But this time we stubbed it to allow, and we also checked that that actually worked by checking that permission. 

How to Test Notification Permissions with Cypress 

Now to test that it actually worked and it said what we want, we can use the cy.stub again. But this time we’re only going to stub the window, and we’re going to stub the “Notification” on that window.  And we’re going to say that we want to stub that as our notification — cy.stub(win, ‘Notification’).as(‘Notification’).

Now, before we actually test what that notification says, we want to make sure that the notification happens after our permission. 

So, we can add a new line here. We’re going to add an and chained on to that. We’re going to say, have.been.calledBefore. Inside that we’re going to pass a second argument of cy.get, and we’re going to pass in our permission.

And as you might expect, it tested that the permission setting worked, but it also tested that it worked before the notification itself.

How to Test Browser Notification Text with Cypress

Finally, to test the notification itself, we’re going to run cy.get, and we’re going to get our “@Notification”. 

We’re going to say should(‘have.been.calledWithNew’). This is going to say that it created a new instance of “Notification” rather than an old one.  And like before we’re going to chain the and command on, and we’re going to say, have.been.calledWithExactly. 

When we test this, we want to test exactly what the notification says, which if we trigger it, we can see that it says, “There’s nothing like a good salad”. So, for our second argument we’ll say, “There\’s nothing like a good salad!”, where we also want to escape our apostrophe so that it works as a string.

Now it goes through, it triggers the notification, and then it actually checks the notification that it says exactly what we wanted it to. 

How to Test Blocked Notifications with Cypress

We were able to flat out disable notifications; and we were also able to trigger and approve notifications.

But what if we wanted to test triggering those notifications and that it actually respected the denying?

To start, I’m going to duplicate our test, but inside of it, I’m going to first change our “granted” to “denied”. I’m also going to get rid of the permission and notification, because we’ll make that a little bit different. 

We can see that what it’s going to do is it’s going to come through, it’s going stub our notification as well as the notification itself. And is going to resolve as “denied” for whenever we click our button. 

Now we’re going to use cy.get, and we’re going to pass in our “@Notification”. But this time we want to say, should(‘not.have.been.called’). And to make sure that we have a proper label, we can say, “should block notifications”.

Finally, once it went through, we could see that it actually tried to trigger a notification, which ended up being denied. But then with our assertion, we could see that it was expecting it to not have been called which asserted to be true. 

Summing It Up — Working with Notifications in Cypress

In review, we wanted to both completely disable notifications, but we also wanted to test that our notifications were also working. 

To start, we were able to stub our win.Notification, and any time it requested permission, we always resolved it to “denied”, which just flat out, denies the notifications. 

When we wanted to actually test that our notifications work, we were still able to stub the win.Notification. But whenever the requestPermission was called, we resolved it to “granted”. We stubbed this out with a label of “permission”, which we then also stubbed out the notification on the window to “Notification”. 

With that, we were able to click our button to test the notification, test that the permission was asked for before the notification fired. But once the notification fired, we were able to check that it fired exactly what we were expecting. 

Finally, to actually test that our notifications were being blocked anytime we actively tried to notify, we were able to, similar to the first test, deny that permission. We also stubbed out our notification like our second test. But this time we clicked the button and then tested that the notification never fired at all. 

And with that, we were able to tell Cypress when we wanted to fire notifications, and when we wanted to check that our notifications were working as expected.

Resources

• Git Repo – notification.spec.js
• Applitools Kitchen – Browser Notification Testing