Cypress提供自动等待处理机制以及极佳的调试体验

UI层自动化测试比较痛的两个点，第一是不易调试，第二是需要花费大量精力提升脚本稳定性，而影响稳定性的关键因素之一是没有添加合适的等待处理。Cypress作为新一代UI层自动化测试框架之一，最大的亮点是框架内置了自动等待以及提供了极佳的调试体验。接下来我们先尝试体验下cypress的自动内置等待特性，再尝试如何通过Test Runner对代码进行调试。

• 体验Cypress框架内置的自动等待
• 使用Test Runner进行调试

接下来，我们就开始第一个task。

体验Cypress框架内置的自动等待

Clone代码后，npm install安装所需依赖，安装成功后执行命令“npm run autoWaitDemo”运行案例或者打开Test Runner运行用例。如下图所示，web页面中输入做加法运算的数字后，点击go按钮，页面会等1-2秒才会显示运算结果。

 再看利用cypress编写的自动化脚本没有任何地方添加等待语句，因为cypress框架内置了自动等待机制，只有等待到达超时时间后仍然未找到页面元素才会失败。另外，因为cypress框架提供了全局cy对象，所以直接支持Page Object设计模式。Page Object设计模式指按页管理对该页面元素操作的所有脚本，需要注意一点这里的页对象是指聚合度很高的操作集合。大部分场景下页指web应用的某个页面，把该页面相关的页面元素定位和操作放到同一个js文件中。另外，如果一些通用且聚合度很高的操作也可以放到某个js文件中，例如页面上很多场景可能都会弹出确认框，那么对确认框的确认、取消等操作可以封装到dialog.js文件中。下面的测试案例脚本使用了Page Object设计模式。

calculate.js

function openWebApp(){
    cy.visit("http://juliemr.github.io/protractor-demo/");
}

function addNumber(firstNumber,secondNumber){
    cy.get('input[ng-model="first"]').type(firstNumber);
    cy.get('select[ng-model="operator"]').select("ADDITION");
    cy.get('input[ng-model="second"]').clear();
    cy.get('input[ng-model="second"]').type(secondNumber);
    cy.get("#gobutton").click();
    //点击go button计算加法结果
}

function shouldCalculationCorrect(expectNumber){
    cy.get('h2').should("contain", "5");
    //获取结果值前没有添加任何等待

    cy.get("tbody tr").first().find('td').last().should("contain", "5");
}

module.exports={
    openWebApp:openWebApp,
    addNumber:addNumber,
    shouldCalculationCorrect:shouldCalculationCorrect
};

autoWaitDemo_spec.js

const calculationPage= require('./page/calculationPage');
describe("calculate test", () => {
    it("should add correctly", () => {
       calculationPage.openWebApp();
       calculationPage.addNumber(2,3);
       calculationPage.shouldCalculationCorrect(5);
       //Case层脚本调用Page脚本文件中包好的方法
    });
});

上面通过测试案例演示了cypress框架内置的自动等待机制，在演示脚本运行时是通过打开一个dashbord完成脚本运行的，这个dashboard叫Test Runner，是cypress框架一个亮点，通过Test Runner极大的提升了UI层自动化测试脚本的调试效率。下面将介绍Test Runner的常见配置以及如何利用Test Runner完成调试。

如何使用Test Runner进行调试

为了使用Test Runner运行和调试自动化脚本有三个步骤

• 执行”npm install cypress“命令安装cypress，前面已完成。
• 执行“./node_modules/.bin/cypress open”或者执行“cypress open”命令打开Test Runner。
• 在Test Runner中选择脚本并运行。
• 如果运行失败，可以在dashboard中回看失败步骤原因，同时打开浏览器的console界面查看具体错误原因。

打开Test Runner，如下图所示，可以看到右上角可以选择chrome浏览器和electron。Electron是一个可以用JavaScript、HTML 和 CSS 构建桌面应用程序的库。能在chrome上运行的web应用也能在electron上运行，下载cypress的时候会自动下载electron。所以在Test Runner中可以选择在chrome或者electron中运行测试脚本。另外，test runner中还显示了很多测试案例脚本。

那么哪些脚本会被加载到Test Runner中呢？回到cypress的面板，可以看到setting里面有很多配置，如下图所示

其中一项配置是：testFile：**/.，该配置的含义是项目目录下的所有文件都是期望执行的测试脚本文件，所以在面板上可以看到所有的js文件。Cypress的常用配置如下所示，后面备注了所有配置的作用。

{
animationDistanceThreshold: 5,
baseUrl: null,    //指定被测项目的baseUrl
blacklistHosts: null,
chromeWebSecurity: true,
defaultCommandTimeout: 4000,  //执行命令的超时时间
env: {},                      //指定环境变量，课程后续部分会详细讲解环境变量的使用
execTimeout: 60000,           
fileServerFolder: '',
fixturesFolder: 'cypress/fixtures',
hosts: null,
ignoreTestFiles: '*.hot-update.js',
integrationFolder: 'cypress/integration',
modifyObstructiveCode: true,
numTestsKeptInMemory: 50,
pageLoadTimeout: 60000,        //页面加载的默认超时时间，超时时间内cypress都会自动等待直到页面加载完成
pluginsFile: 'cypress/plugins', //设置插件文件目录
port: null,
projectId: null,
reporter: 'spec',
reporterOptions: null,
requestTimeout: 5000,
responseTimeout: 30000,
screenshotsFolder: 'cypress/screenshots',   //存放运行case的错误截图
supportFile: 'cypress/support',
taskTimeout: 60000,
testFiles: '**/*.*',
trashAssetsBeforeRuns: true,
userAgent: null,
video: true,
videoCompression: 32,
videoUploadOnPasses: true,
videosFolder: 'cypress/videos',     //存放运行case的视频
viewportHeight: 660,       //默认分辨率
viewportWidth: 1000,
waitForAnimations: true,   //开启自动等待，这样大部分场景在编写脚本的时候都无需进行等待处理
watchForFileChanges: true}

上面学习了Test Runner的常用配置，接着我们运行一个失败的案例，当案例失败，点击失败步骤，打开浏览器的console界面，可以看到具体的错误原因，这就是cypress提供的错误回放功能。可以看到，通过Test Runner极大的提升了调试效率。调试是自动化脚本编写和维护中重要一个环节，后面还有章节专门介绍各种调试策略。

 

上面提到运行案例的时候既可以选择electron，也可以选择chrome，但实际情况中用户使用web应用的时候肯定是用真实的浏览器打开，所以这里建议尽量用chrome运行脚本。实际启动cypress时，框架会去默认位置查找是否安装了chrome，如果安装了那么就调用安装目录的启动命令启动chrome。