Interacting with Alerts using Cypress

Learn how to interact with alerts using Cypress

The alert, confirmation, and prompt functions are a way to convey important information or ask questions to the people who are visiting your site. 

In this example here, if we Trigger an Alert, it’s going to just display a message that we can click OK. 

If we Trigger a Confirmation, it’s going to ask a question where we can either proceed or cancel. 

Otherwise, the Prompt, if we trigger that, it’s going to ask a question where we can put anything we want like “pizza” and we can hit OK.

If we’re presenting important information or asking questions, we want to make sure that this functionality is working properly. 

How Do You Test an Alert in Cypress?

If we’re testing this in Cypress, the first thing we want to start off doing is by getting the button in this example and clicking it. 

So, we can use cy.get, where we’re going to pass in the ID or selector. And we’re going to simply run the click function. 

Because this interaction is happening in the browser though, we need to set up functionality that’s going to watch for that event and then capture it. 

So we’re going to use the cy.on method. And we’re going to say anytime the window triggers an alert (window:alert), we’re going to run this function. 

When this function is invoked, it’s going to be passed an argument that we’re going to specify as text, which is going to be the text that’s inside of that alert. Which means we can use this text to set an assertion where we can say we expect(text).to.contains() our String, which in this case, it’s going to be “air fryers can make anything”.

So, after Cypress completes this test, we can see that it got that alert button. It even clicked it. And then it asserted that the alert was using the right text. However, we can see that it’s not actually showing the alert. Cypress does this virtually, and it won’t actually show it inside of the browser. 

Next, let’s add tests for the confirmation and the prompt. 

How to You Test a Confirmation in Cypress?

To test the confirmation, it’s going to look very similar to our alert. So, the first thing we’re going to do is actually clone our alert test, where we can say “should trigger a confirmation with a message”, where we’re going to change the get to confirm, the window alert to confirm (window:confirm).

Except in this instance, we have different text that is contained inside of the confirmation alert. So, we want to replace that text, which in this case is “proceed with adding garlic”. 

And just like before we can run our test. 

And once it’s finished, we can see that if we open up our test, we can see that it clicked the confirm button and asserted correctly with our question. 

Now, to take that a step further and actually confirm that somebody answered “yes”, we can confirm with the element right on the page.

In order to do that, we can use our typical cy.get where we’re going to pass in our selector ID, which is “confirm-answer”. And we want to say that it should contains our answer of “yes”. 

And we can see like before that it goes through and confirms the prompt, but it also answers “yes”, which we double check on the page.

But when triggering a prompt, somebody can also cancel that request. So how do we test that?

When testing our confirmation with the window:confirm event, we have the option of returning “false” in this statement where we tell Cypress that we want that confirmation to be canceled. 

So, we can test this out by duplicating that code block test, where we’re going to return “false”. But we’re also going to say that we want this answer to be “no”. 

And this time when it goes through, while we can’t actually see that it actually cancels it in action, we do see that we have our “no” answer right inside of the page, which we’re confirming.

How Do You Test a Prompt in Cypress?

So finally, let’s test the prompt.  Testing the prompt event is going to be a little bit different from testing the alert and the confirmation. Where with alert and confirm, we have this window:confirm event where we can actually test to see when Cypress fires off that alert. And we can also confirm or cancel it.

Instead, with our prompt, we need to do this a little bit more manually.

So first we need to access the window. So we’ll say cy.window. And then we’ll add a then chain where we’re going to pass in a function, or we’re going to pass in an argument of window (win), which will be our window instance for this particular test. 

Now, inside this block, we need to create a new stub for our answer. So we’re going to say cy.stub. And we’re going to attach this to our window where we’re going to say, with the “prompt”, we want it to return “pizza”.

What this is essentially saying is that we want to stub the answer to our prompt to be “pizza”. 

To test this out, we can use cy.get where we’re going to pass in our “prompt-button”, where we’re going to click on that element. But as usual, we want to also test the answer. So, we’ll say cy.get where we want to check the “prompt-answer”, and we want that to contains answer “pizza”. 

And once that runs, it goes through. It answers the prompt with our answer of “pizza”, and it checks on the page that it actually worked.

How Do You Test a Prompt Cancellation in Cypress?

And, finally, just like before, what if we wanted to test if somebody canceled that prompt? 

Now, we don’t have the same option as alert and confirmation because it doesn’t use that same event handler; but what can we do with the prompt? So, this time let’s again duplicate this code block where we’re going to say it “should trigger a prompt with a message and cancel”. 

But this time we’re going to use a function called callsFake, where we’re going to pass in a function as an argument that’s going to simply return “null”.

What this will do is whenever Cypress sees the prompt, it’s going to return “null”, which is essentially what’s going to tell our browser to cancel that prompt. And instead of a “pizza”, or whatever that answer will be, the page will say “Canceled” in our case so that we can test that that’s true. 

And once it goes through, we can’t actually see it. We can see that it actually stubs that answer, but not how it actually works in action, but we can finally see that we get an answer of “Canceled”, which means it worked.

Summing It Up – Testing Alerts, Confirmations and Prompts in Cypress

So, in review, in order to test the alerts and the confirmations, we can use the window:alert and the window:confirm events in order to test that those are working as expected. Because people can also cancel confirmations, we can also return “false” on the window:confirm event, telling Cypress that we want to cancel that dialogue so that we can test that that also works.

But when testing prompts, we need to do it a little bit more manually, where we need to actually stub out the answer to our prompt. 

Here we’re returning “pizza” as our answer and we’re testing that that worked, but then we can also return “null” in a callsFake request, where we’re telling them that we want to cancel that prompt and we can test that it was canceled. 

And with that, Cypress will go through. It’ll trigger the events on all of our buttons, and we’ll be able to test that they’re working as expected.

Resources

• Git Repo – alert.spec.js
• Applitools Kitchen – Alerts