Interacting with Alerts in Playwright JS

Learn how to interact with alerts in Playwright

One method that we can use to communicate on the web are dialogs that are built-in right into the browser. 

Like here, we have an Alert that we can trigger which is going to give us a message. We also have a Confirmation where we now have the ability to not only read that message, but we can also either hit OK, or cancel out that message to dismiss it. 

Finally, we have the Prompt where now we can even ask for information, such as if my favorite food is chicken. I can type that in, hit OK and we have our answer. 

While chicken might not be the most important answer in the world, sometimes we use these dialogs for important information from the visitor to our applications. And we need to be sure that we’re testing these interactions to make sure we’re actually getting the values we expect.

How to Test an Alert with Playwright

Diving into actually being able to test this with Playwright, we’re going to start off with our basic test where we’re going to first go to our site. We’re going to go to “https://kitchen.applitools.com”, in particular the “/ingredients/alert” page, which we just saw.

We’re going to create a new test. And we’re going to say that it “should trigger an alert with a message”. 

To start off, we want to listen for these alerts to actually occur. We’re going to use the page object where we’re going to use the method of on. We’re going to say that we want to listen for the dialog event. 

When that event occurs, we want to trigger a function. And particularly we want to trigger an async function. Now this event isn’t going to happen by itself, so we want to make sure that we’re also triggering it. So, we’re also going to say we want to await the page object. And we’re going to say that we want to click, and we’re going to particularly click on the “alert-button”.

Now inside of our event function, the very first thing we’re going to see is we’re going to get an argument passed in, and we’re going to call that dialog. And inside of this, we’re going to be able to use this to access information about the dialog. 

Let’s try this out by adding a console.log where I’m going to say that I want to console.log out the dialog and it’s going to use the message method — console.log(dialog.message()). 

If I try to run my test, we can see that it’s going to go through. As usual, it’s going to open up the browser and we can see that one, we do see this dialog. And if we look in our terminal, we can see that it’s console logging out that message. 

How to Dismiss a Dialog Message with Playwright

Now, one thing we’ll also notice is this test hasn’t yet been completed because it hasn’t actually closed this dialog, which doesn’t automatically happen. But we can see if I click it with my cursor, it’s going to close that test.

In order to automatically dismiss that dialog so that our test can continue to run without human intervention, we can then say that we want to await and we’re going to run dialog.dismiss(). 

If we try to run that test again, we can see that it runs just like before, but this time it’s going to automatically dismiss it. But we still see that we get our message. Not only are we able to trigger that alert and dismiss it, we’re actually able to see that we’re able to grab the value using the message method. 

So, we’re able to assert right on that message.  Using expect from Playwright test, I’m going to say that I want to expect(dialog.message()).toContain(‘Airfryers can make anything!’). 

Again, if we try to run this test, we can see that it goes through. Just like before, it opens up the browser. But when it finishes, we can see that we properly asserted that it’s showing the right message.

How to Test a Confirmation with Playwright

Next, I don’t only want to test that I can trigger an alert; I want to also trigger a confirmation. 

To start off, we’re able to use the exact same API using the page.on method, along with listening for dialog in order to inspect the same confirmation, just like the alert. 

The first thing I’m going to do is actually duplicate this test, and then I’m going to update this so that it says, “should trigger a confirmation with a message”. Now, if we look at the confirmation, just like before, we’re actually getting a message. So, we want to first make sure we assert that that message is correct. 

To start, we can actually use the same exact code as we did before. And we want to make sure that instead of saying “Air fryers can make anything”, we want to make sure that it says, “Proceed with adding garlic?”.  

Then finally, before we actually continue, we want to make sure we’re using the right ID. And in this case, we’re using the “#confirm-button”.

One last thing, if we look inside of this test, we’re actually dismissing the dialog, where instead we want to say, “OK”, we do want to proceed with adding garlic. So, this time, instead of saying dismiss, we’re actually going to say accept. 

If we go ahead and run our test, we can see that it’s going to run 2 tests, running a browser for each instance. But this time we can see that it also asserted that our confirmation button was properly triggering that confirmation. 

Now in this test, we’re only testing that we’re actually seeing that message. We’re not testing what happens when somebody actually hits OK. While we don’t actually have a way to do that natively for that dialog event, what we can do is we can test and make sure that something that happened after that confirmation is actually changing. In our case, we can check and make sure that this answer says, “Yes”.

So, after I actually make that click and it actually sees and accepts that event, I’m going to say, I want to create a new constant called answer — const $answer — where I’m going to set that equal to await page, where I’m going to use the dollar sign for a selector. And I’m going to say, “confirm-answer” — await page.$(‘#confirm-answer’). 

Next, I want to actually grab the text inside of that answer. So I’m going to say answerText is equal to await, and I’m going to say, answer.innerText — const answerText = await $answer.innerText().

Finally, I want to assert that that is properly showing. I can use the same expect function, where I’m going to say that I want my answerText to make sure that it contains an answer of “Yes”. 

Like before, if I want to run my test, it’s going to go through, but this time it’s not only going to assert that that question is right, but also that the answer is right.

How to Cancel and Dismiss a Confirmation with Playwright

Now with the confirmation, we also do have the ability to dismiss this and hit Cancel so we want to make sure that we can test that as well.

To start off, I’m going to, again, duplicate this test. This time, I’m going to say that I want it to trigger the confirmation, but I’m going to also say that I want it to cancel. 

If we go back to our first alert, we saw that we were using the dismiss method. We can actually use the same exact thing. And we can say that we want to dismiss this dialog. 

Then finally, to make sure that we’re actually expecting the correct answer, we can say that we want to assert that that’s going to equal “Answer: No”. 

If we run the test, we can see that it’s going to go through. It’s going to run our 3 tests this time and i’s going to assert that all of them are working as expected.

How to Test a Prompt with Playwright

Finally, we have our most complex one where we have our prompt, where not only can we trigger a question along with accepting and dismissing the dialog itself, but we can also accept some text. 

The nice thing about Playwright is all these APIs for the dialog are going to look exactly the same, aside from just a few different methods for how we actually interact with it. That means we have 2 paths that we want to test similar to the confirmation, where we want to test that we can give an answer and accept it, and we can also dismiss it.

The first thing I’m going to do is I’m going to duplicate those last 2 tests. Then we’re going to change so that we have the confirmation, but we’re going to change that to “trigger a prompt”. Like usual, we want to make sure we’re using the right selector for our prompt tests. And just like before, it’s going to be instead of the confirm answer button, it’s going to be the prompt button. 

The biggest difference between the prompt and the confirmation is simply that we’re able to additionally pass in text. To do that, we can use the dialog.accept where we’re going to pass that additional text right in as an argument.

In this test, we don’t actually want to ask about garlic. It’s going to say, “What is your favorite food?”.  This time I want to say that it’s “Pizza!”. 

I also want to make sure that that answer shows up accordingly. Additionally, we want to make sure that if we cancel this prompt, it’s actually going to say that it’s cancelled.  So, when it asks for “What is your favorite food?”, and we ultimately dismiss this prompt, we want to make sure that our answer says that its answer is “Cancelled”. 

Now if we let it go through and run all our new tests, including those 2 that we just added for the confirmation, we were able to see that all our tests pass.

Summing It Up – Testing Alert Notifications with Playwright

In review, when we want to test dialogs, we can really do so with the same API, no matter if it’s an alert, a confirmation, or even a prompt. It’s really just going to depend on the methods we used on that dialog event in order to interact with that dialog.

Starting with our alert, we can make sure that when we’re listening for that on page dialog event, that once we receive that dialog object, we can make sure that our message is expected to be exactly what we wanted, along with dismissing it so that we can make sure it can continue with the test. 

Additionally, with the confirmation dialog, we can make sure that not only are we making sure that it’s showing the right message, but that we can also properly accept it and dismiss it. And that our browser and application are going to do exactly what it we expect it to be.

Finally, with the prompt, since we can actually provide a value, we can make sure that we’re able to accept it with our value, like our favorite food of pizza. We can make sure that we’re properly accepting that value inside of our application. And that we can also dismiss that prompt, just like we did with the others, and that it’s going to actually cancel it out.

Resources

• Git Repo – alert.spec.js

Applitools Kitchen – Alert Testing