Cypress 简明教程

Cypress - Alerts

Cypress 可以在缺省情况下处理警报。弹出窗口可能是警报或确认弹出窗口。Cypress 的设计方式是这样的，始终在弹出窗口中单击“确定”按钮。此外，Cypress 还有触发浏览器事件的能力。

警报由 window:alert event 触发。这在缺省情况下由 Cypress 处理，并且在执行过程中警报中的“确定”按钮被单击，且未显示。

但是，执行日志将显示该警报的存在。

Implementation Alerts

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();
   });
});

Execution Results

输出如下 −

cypress execution logs

警报信息显示在 Cypress 执行日志中。

Cypress 有通过使用 on 方法触发 window:alert 事件的能力。然后，我们可以验证警报文本。

但是，此事件将在后端发生，并且在执行过程中不会显示。

Implementation Alert text verification

以下是 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

输出如下：

implementation alert text verification

输出日志显示成功验证了警报文本，该警报是由 Cypress 触发的警报事件产生的。

对于确认弹出窗口，触发浏览器事件 window:confirm。就像警报弹出窗口一样，Cypress 可以使用 on 方法触发此事件，并且在缺省情况下单击“确定”按钮。

Example

我们来看一下下面的示例。在此，单击“单击以获取 JS 确认”按钮时，会显示确认弹出窗口。

javascript alerts

显示包含按钮 OK 和 Cancel 的以下确认弹出窗口。

js confirm

单击“确定”按钮后，显示以下内容−

You clicked: Ok

将显示一个如下图所示的图像 −

js alerts

点击 Cancel 按钮时，Result − 下方会显示以下内容：

You clicked: Cancel

将显示一个如下图所示的图像 −

js cancel

Implementation Confirmation verification

以下给出了 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

输出如下 −

implementation confirmation verification

Implementation Confirmation verification

以下给出了 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

输出如下 −

clicked ok

输出日志显示成功验证确认文本，该文本是通过 cypress 激发的确认事件产生的。

Implementation Cancel click

在 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
      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

输出如下 −

implementation cancel click

输出日志显示成功验证标签 You clicked: Cancel ，该标签是通过点击确认弹出窗口上的取消按钮产生的。