- Cypress Tutorial
- Cypress - Home
- Cypress - Introduction
- Cypress - Architecture and Environment Setup
- Cypress - Test Runner
- Cypress - Build First Test
- Cypress - Supported Browsers
- Cypress - Basic Commands
- Cypress - Variables
- Cypress - Aliases
- Cypress - Locators
- Cypress - Assertions
- Cypress - Text Verification
- Cypress - Asynchronous Behavior
- Cypress - Working with XHR
- Cypress - jQuery
- Cypress - Checkbox
- Cypress - Tabs
- Cypress - Dropdown
- Cypress - Alerts
- Cypress - Child Windows
- Cypress - Hidden Elements
- Cypress - Frames
- Cypress - Web Tables
- Cypress - Mouse Actions
- Cypress - Cookies
- Cypress - Get and Post
- Cypress - File Upload
- Cypress - Data Driven Testing
- Cypress - Prompt Pop-up Window
- Cypress - Dashboards
- Cypress - Screenshots and Videos
- Cypress - Debugging
- Cypress - Custom Commands
- Cypress - Fixtures
- Cypress - Environment Variables
- Cypress - Hooks
- Cypress - Configuration of JSON File
- Cypress - Reports
- Cypress - Plugins
- Cypress - GitHub
- Cypress Useful Resources
- Cypress - Quick Guide
- Cypress - Useful Resources
- Cypress - Discussion
Cypress - Alerts
Cypress can work with alerts by default. The pop-up can be an alert or confirmation popup.Cypress is designed in such a way that it shall always click on the OK button on the pop-up. Moreover, Cypress has the ability to fire the browser events.
An alert is triggered by window:alert event. This is by default handled by Cypress and the OK button on the alert gets clicked, without being visible during execution.
However, the execution logs will show the presence of the alert.
Implementation Alerts
The implementation of alerts in Cypress is given below −
describe('Tutorialspoint Test', function () { // test case it('Scenario 1', function (){ // launch url cy.visit("https://register.rediff.com/register/register.php"); // click submit cy.get('input[type="submit"]').click(); }); });
Execution Results
The output is as follows −
The alert message gets displayed on the Cypress execution logs.
Cypress has the ability to fire the window:alert event by utilising the method on. Then, we can verify the alert text.
However, this event shall happen in the back end and will not be visible during the execution.
Implementation Alert text verification
Given below is the implementation for the alert text verification in Cypress −
describe('Tutorialspoint Test', function () { // test case it('Scenario 1', function (){ // launch url cy.visit("https://register.rediff.com/register/register.php"); // click submit cy.get('input[type="submit"]').click(); // fire event with method on cy.on('window:alert',(t)=>{ //assertions expect(t).to.contains('Your full name'); }) }); });
Execution Results
The output is mentioned below −
The output logs show the successful verification of the alert text, produced by firing the alert event by Cypress.
For a confirmation pop-up, the browser event window:confirm is triggered. Just like alert pop-ups, Cypress can fire this event with the method on and clicks on the OK button by default.
Example
Let us have a look at the below example. Here, on clicking the Click for JS Confirm button, a confirmation pop up gets displayed.
The following confirmation pop-up with OK and Cancel buttons getting displayed.
On clicking the OK button, the following is displayed −
You clicked: Ok
An image like the one given below will be displayed −
On clicking the Cancel button, the following is displayed below Result −
You clicked: Cancel
An image like the one given below will be displayed −
Implementation Confirmation verification
Given below is an implementation for the confirmation verification of alerts in Cypress −
describe('Tutorialspoint Test', function () { // test case it("Scenario 1", function () { //URL launched cy.visit("https://the-internet.herokuapp.com/javascript_alerts") //fire confirm browser event and accept cy.get(':nth-child(2) > button').click() cy.on("window:confirm", (t) => { //verify text on pop-up expect(t).to.equal("I am a JS Confirm"); }); }); });
Execution Results
The output is stated below −
Implementation Confirmation verification
Given below is an implementation for the confirmation verification of alerts in Cypress −
describe('Tutorialspoint Test', function () { // test case it("Scenario 1", function () { //URL launched cy.visit("https://the-internet.herokuapp.com/javascript_alerts") //fire confirm browser event and accept cy.get(':nth-child(2) > button').click() cy.on("window:confirm", (t) => { //verify text on pop-up expect(t).to.equal("I am a JS Confirm"); }); }); });
Execution Results
The output is stated below −
The output logs show the successful verification of the confirmation text, produced by firing the confirm event by Cypress.
Implementation Cancel click
The implementation of cancel click on confirmation pop up in Cypress is as follows −
describe('Tutorialspoint Test', function () { // test case it("Scenario 1", function () { // URL launched cy.visit("https://the-internet.herokuapp.com/javascript_alerts") //fire confirm browser event cy.on("window:confirm", (s) => { return false; }); // click on Click for JS Confirm button cy.get(':nth-child(2) > button').click() // verify application message on Cancel button click cy.get('#result').should('have.text', 'You clicked: Cancel') }); });
Execution Results
The output is given below −
The output logs show the successful verification of the text You clicked: Cancel, which is produced on clicking the Cancel button on the confirmation pop up.
To Continue Learning Please Login
Login with Google