Cypress之处理页面弹框以及多tab页间切换

上次博客讲解了如何模拟键盘输入和鼠标操作以及拖动页面元素，此次课程将介绍如何处理页面弹框，保证测试案例继续运行。另外，还会介绍如果测试案例跨多个tab页，如何实现多tab页间切换测试。最后介绍cypress框架提供的插件和自定义命令功能，为了完成此次课程目标，拆分了2个task。

• 处理页面弹框
• 多tab页间切换
• 使用插件或自定义命令功能

接下来就从第一个task开始吧。

处理页面弹框

实际cypress在浏览器中运行时发出了很多事件，其中就包括监听alert或者confirm弹框，并允许控制弹框行为。默认情况下，会对弹框进行确认处理，也提供了入口让用户自定义如何处理弹框。例如下面web页面，当点击populate按钮时，会弹出一个confirm弹框。

编写自动化脚本，Test Runner中选择“handleAlertDialog_spec.js”运行下面的脚本。运行过程中并没有看见confirm弹框，因为cypress默认进行了确认处理。Test Runner上查看脚本运行日志，可以在console中看到对alert弹框做了确认处理。

   it("should cypress confirm alert dialog successfully", () => {
        cy.visit("https://devexpress.github.io/testcafe/example/");
        cy.get('#populate').click();
    });
  //可以看到，上面脚本只是打开被测页面完成点击按钮操作，没有任何脚本处理alert弹框。

 查看Test Runner左侧的运行日志，可以看到对alert框做了确认处理，下图是处理日志记录。

除默认确认操作外，还可以根据alert弹框信息，用户自定义弹框处理结果。下面脚本对弹框做拒绝处理，等同于点击confirm弹框的cancel按钮。

  it("should change alert dialog behavior successfully", () => {
        cy.on('window:confirm', (str) => {  
            //cy.on('window:confirm')监听页面弹出的alert、confirm弹框

            if (expect(str).to.eq('Reset information before proceeding?')) {
                return false
                //return fasle表示对弹框做拒绝处理，等于点击弹框上的cancel按钮

            } else {
                return true
               //return true或者不返回任何值表示对弹框做确认处理，等于点击弹框上的confirm按钮 
            }
        });
        cy.visit("https://devexpress.github.io/testcafe/example/");
        cy.get('#populate').click();
    });

 查看上面脚本运行日志，可以看到console中对弹框做了拒绝处理。日志记录如下图所示。

Cypress框架在浏览器中运行时，除监听confirm、aler弹框外，还监听应用运行的异常信息，这个在上次课程中也提到过。例如下面的脚本,默认情况下，cypress监听到被测应用存在未捕获的异常信息就会终止测试脚本运行，并显示错误信息。如果运行过程中，不期望被测应用的异常阻止测试脚本运行，那么可以return false。

it("should handle dialog successfully",()=> {
        Cyp