Alerts and Popups in Cypress
Last Updated :
21 Apr, 2025
Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.
It's built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn about Alerts in Cypress.
What are Alerts and Popups in Cypress?
Alerts and Popups is a JavaScript dialog box. It includes alert, confirm, and prompt dialog boxes. It is used to interact with a user like alerting a message, taking input from the user, and getting confirmation from the user. Cypress provides mechanisms to handle these dialog boxes. It allows you to verify their content and control their behavior.
Alerts and Popups in Cypress- Alert Box: It is a box that displays a simple text message and it only has an OK Button.
- Prompt Box: It is a box with a single input option. It is used to take input from the user. It has an Ok and Cancel Button.
- Confirm Box: It is a message box that asks the user to confirm an action. It has OK and Cancel buttons.
Commands to Handle Alerts and Popups
Handling Alerts Box
We can listen to the alert box event by using cy.on(event, callback) method and we have to pass window:alert as an event and in a callback We can do any validations.
Example
describe('Handling Alerts', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1:5500/index.html');
});
it('should handle a simple alert', () => {
cy.on('window:alert', (alertText) => {
expect(alertText).to.equal('This is an alert');
});
cy.get('#alert-button').click();
});
});
Handling Confirm Box
We can listen the confirm box event by using cy.on(event, callback) method and we have to pass window:confirm as a event and in a callback We can do any validations. callback function should return true to simulate clicking OK or false to simulate clicking Cancel.
Example
// cypress/integration/alerts.spec.js
describe('Handling Confirms', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1:5500/index.html');
});
it('should handle a confirm dialog', () => {
cy.on('window:confirm', (confirmText) => {
expect(confirmText).to.equal('Are you sure?');
return true; // Simulate clicking 'OK'
});
cy.get('#confirm-button').click();
cy.get('#confirm-result').should('have.text', 'Confirmed!');
});
});
Handling Prompt Box
We can handle the prompt box by using the cy.window().then(callback) method. It allows us to interact with the window object. Within the callback function, we can stub the prompt method to simulate user input.
Example:
// cypress/integration/alerts.spec.js
describe('Handling Prompts', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1:5500/index.html');
});
it('should handle a prompt dialog', () => {
cy.window().then((win) => {
cy.stub(win, 'prompt').returns('gfg');
});
cy.get('#prompt-button').click();
cy.get('#prompt-result').should('have.text', 'gfg');
});
});
Installation Steps
Before we begin make sure node.js in installed in your system.
Step 1: Create a Project Folder and move to it by using following command.
mkdir cypress
cd cypress
Step 2: Initialize a project and Install Cypress.
npm init -y
npm install cypress --save-dev
Step 3: After Creating a Project, Run this command to start cypress.
npx cypress open
Step 4: Testing type, Configuration and creating a spec.
- Choose a E2E Testing or Component Testing, then after quick configuration choose browser.
- After that create a new spec then click on your spec name to open your spec in any IDE.
Step 5: Testing HTML File.
- Create a HTML File and open it with any live server extension.
- copy that live server file serve link, for later use.
Example
The below example demonstrate the Handling Popup in Cypress.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt Example</title>
</head>
<body>
<h1>Prompt Example</h1>
<button id="prompt-button" onclick="showPrompt()">Show Prompt</button>
<script>
function showPrompt() {
var response = prompt('Please enter your name', 'Default Name');
if (response !== null) {
document.getElementById('prompt-result').innerText = 'Hello, ' + response + '!';
} else {
document.getElementById('prompt-result').innerText = 'Prompt cancelled!';
}
}
</script>
<div id="confirm-result"></div>
<div id="prompt-result"></div>
</body>
</html>
// gfg.cy.js
describe('Handling Prompts with Cypress', () => {
beforeEach(() => {
cy.visit('http://127.0.0.1:5500/index.html');
});
it('should handle a prompt dialog', () => {
cy.window().then((win) => {
cy.stub(win, 'prompt').returns('GeeksForGeeks');
});
cy.get('#prompt-button').click();
cy.get('#prompt-result').should('have.text', 'Hello, GeeksForGeeks!');
});
});
Output
Alerts and Popups in Cypress outputConclusion
In conclusion, Cypress is a end-to-end automated testing tool that enables efficient and reliable testing of web applications. Cypress provides simple commands to interact with alert, confirm, and prompt dialogs box. It allow you to implement user interactions and verify application responses.
Similar Reads
Assertions in Cypress
Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.It's built to w
7 min read
Aliases in Cypress
Cypress is a front-end testing tool. It allows us developers and QA Engineers who build web applications using the modern JavaScript framework to set up tests, write tests, run tests, and debug tests. It is popular as it lets us write faster, easier, and more reliable tests. Cypress can test anythin
4 min read
Basic Commands in Cypress
Cypress being a modern, full-stack test runner, developers are able to create maintainable web application unit tests which turn out to be reliable and supportable. It gives a palette of commands for interacting with web elements that allows for various actions to happen, and it is a very useful too
7 min read
Reports in Cypress
Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.It's built to w
5 min read
How to Create Alerts in Bootstrap ?
Bootstrap Alerts offer a simple method for crafting predefined messages, enhancing their appeal to users. They streamline message display, adding style for increased engagement and improved user experience by presenting important information effortlessly and appealingly.Syntax:<div class="alert a
3 min read
Checking radio buttons in Cypress
In Cypress, interacting with radio buttons is straightforward. Radio buttons allow users to select one option from a group, and Cypress provides the .check() command to simulate selecting these options. In this example, we'll explore how to check radio buttons in Cypress, verify the selection, and p
3 min read
Screenshots and Videos in Cypress
Cypress is a very popular testing framework used for testing web applications. In Cypress, developers can write code for test cases in JavaScript, which is most common among developers. Cypress provides various features, but Screenshots and videos are features that are easy to implement. This featur
7 min read
How to Create an Alert in JavaScript ?
The alert() method in JavaScript displays an alert box with a message and an OK button. It's used when you want information to come through to the user, providing immediate notifications or prompts for user interaction during program execution. Note: Alert boxes interrupt user interaction, shifting
1 min read
How to Test a Bad Request in Cypress?
Testing bad requests in Cypress involves simulating scenarios where your application receives an error response (e.g., 400 Bad Request) from an API or backend service. Cypress provides powerful tools like cy.inte3rcept() to mock and control network requests and responses, allowing you to test how yo
3 min read
Write a For Loop in Cypress
A for loop is a common control structure in programming that allows us to repeat actions multiple times. In Cypress, we can utilize JavaScript's for loop to perform repetitive actions such as interacting with multiple DOM elements, iterating through arrays, or executing assertions.Example of For Loo
3 min read