How to Handle Pop-up Dialogs and Notifications in Cypress Testing Scenarios?

When handling scenarios in Cypress testing involving pop-up dialogs (such as alert and confirm dialogs) and notifications, we can employ strategies to ensure these pop-ups do not interfere with automated test execution. Below are some specific methods and examples:

1. Handling JavaScript Pop-up Dialogs (Alerts, Confirms)

Cypress provides simple APIs to handle JavaScript alert and confirm pop-up dialogs. Use the cy.on() function to capture these events and handle them as needed.

Example:

Suppose clicking a button triggers a confirmation dialog. We can write the test code as follows:

javascript
// Intercept the confirmation dialog and automatically click OK
cy.on('window:confirm', (str) => {
  expect(str).to.equal('您确定要执行此操作吗？')
  return true
})

cy.get('button#confirm-btn').click()
// The following code continues with the logic after the confirmation

In this example, clicking the button automatically handles the confirmation dialog and proceeds with the subsequent test code.

2. Handling Custom Pop-up Dialogs

For non-standard JavaScript pop-up dialogs, such as modal dialogs implemented with HTML/CSS, we typically need to locate the pop-up elements and interact with them.

Example:

Suppose clicking a login button triggers a custom login dialog:

javascript
cy.get('button#login-btn').click()
cy.get('.modal').should('be.visible')
cy.get('.modal #username').type('user')
cy.get('.modal #password').type('password')
cy.get('.modal button#submit').click()

This code first triggers the appearance of the login dialog, then fills in the username and password, and finally clicks the submit button.

3. Handling Browser Notifications

For browser notifications, Cypress cannot directly interact with these elements because they are controlled by the browser rather than the page. However, we can modify browser configurations to automatically deny or accept notifications.

Example:

javascript
// Add to Cypress configuration file (cypress.json):
{
  "chromeWebSecurity": false,
  "permissions": {
    "notifications": "deny"
  }
}

With this configuration, all notifications are automatically denied, thus not interfering with test execution.

Summary

Handling pop-up dialogs and notifications in Cypress requires distinguishing between standard JavaScript pop-up dialogs and custom pop-ups, as well as whether to handle browser-level notifications specifically. By employing the strategies and methods above, we can effectively control and test these scenarios, ensuring smooth automated test execution.