Cypress之测试结果校验

利用cypress完成页面内容校验

前面已提到过cypress底层实际沿用了很多现有的框架或者工具，对于校验这部分，Cypress集成了Chai，这里先简单了解一下Chai。Chai是一个BDD或者TDD assertion库，可以和很多前端测试框架一起配合使用。Chai提供了三种风格的assertion供开发者选用，其中assert属于TDD风格，expect和should属于BDD风格（更贴近自然语言表达）。大家在选择时可以找一种自己习惯或者熟悉的风格使用即可，三种写法都能达到相同的效果。以下是三种风格的实际例子。

var assert = require('chai').assert; 
//assert，should，expect三个接口都属于Chai这个library，这里是引入Chai中的assert模块

var foo = 'bar';
var beverages = { tea: [ 'chai', 'matcha', 'oolong' ] };

// 以下是assert风格即TDD风格
assert.typeOf(foo, 'string'); 
// without optional message

assert.typeOf(foo, 'string', 'foo is a string'); 
// with optional message，assert支持添加错误描述信息，如果此处校验失败，会打印‘foo is a string’

assert.equal(foo, 'bar', 'foo equal `bar`');
assert.lengthOf(foo, 2, 'foo`s value has a length of 3');
assert.lengthOf(beverages.tea, 3, 'beverages has 3 types of tea');
console.log("assert style assertion finished");     
//这里打印日志，方便调试使用，如果日志打印出来，说明前面的脚本全部执行完成

require('chai').should();             
//引入Chai中的should模块

foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.lengthOf(3);
beverages.should.have.property('tea').with.lengthOf(3);
console.log("should style assertion finished");         
//这里实现的校验与前面相同，只是写法上有所不同，可以看到BDD风格的采用链式写法，更贴近自然语言

var expect = require('chai').expect;   
//引入Chai中的expect模块

expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);
expect(beverages).to.have.property('tea').with.lengthOf(3);
console.log("expect style assertion finished");    
//实现的校验与前面相同，可以看到expect和should写法很相似

为了运行上面的脚本，首先需要安装Chai这个包。上述的内容是存放在一个js文件中，执行js文件命令：“node filePath/fileName”，为了避免每次执行都输入很长的执行命令，可以在package.json进行配置。package.json的配置如下所示,故只需输入命令“npm run chaiAssert”即可。

{
  "name": "com.github",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cypress:open": "./node_modules/.bin/cypress open",
    "test": "node ./cypress/integration/e2e/assertion/threeStyleAssert.js"
    //在scripts中配置后，输入npm run test即可执行配置的js文件
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chai": "^4.2.0",    //执行命令：npm install chai --save后，chai的配置会自动化写入dependencies中
    "cypress": "^3.4.1"
  }
}

安装并执行上面的js文件视频如下图所示，可以看到第一次执行完成后，打印了三条console.log中的信息，说明执行成功。修改其中一个校验的期望值为2，再次运行，校验失败并打印了对应的错误信息，说明校验写法无误。

简单了解Chai后回到Cypress，Cypress集成了Chai，选择了should风格的写法，封装了很多简单易用的用于校验的api。以下是打开被测web应用（https://angular.realworld.io）点击“sign in”，打开登陆页面，并使用should风格对页面元素状态进行校验。执行命令“npm run assertDemo”即可运行下面的测试脚本。

describe("assert demo",() => {
    it("assert demo",() => {
        cy.visit("https://angular.realworld.io")
        cy.get('app-layout-header ul li a[href="/login"]').click();

        cy.get('button[type="submit"]').should("be.disable")   
        //校验“Sign in”button是disable状态 

        cy.get('input[formcontrolname="email"]').should("be.visible");  
        //校验email输入框是可见状态

        cy.get('input[formcontrolname="password"]').should("be.visible");  
        //校验密码输入框是可见状态

        cy.get('button[type="submit"]').should("contain","Sign in");     
        //校验提交按钮的text包含“Sign in”
    })
});

 除上面例子中用到几种常用校验外，下面还列举了实际项目中可能的校验场景。

下面是利用cypress提供的api采用should写法完成上面提到的常用校验场景。Should属于BDD风格，非常贴近自然语言。

cy.get('li.selected').should('have.length', 3)
//校验定位的元素个数是3

cy.get('ul li').its('length').should('be.gt', 2)
//校验定位到的元素个数大于2

cy.get('textarea').should('have.value', 'foo bar baz')
//校验定位到的元素的innerText等于“foo bar baz”

cy.get('form').should('have.class', 'form-horizontal')
//校验定位到的元素的class属性等于“form-horizontal”

cy.get('a').parent('span.help').should('not.contain', 'click me')
//校验定位到的元素的innerText不包含字符串“click me”

cy.get('a').parent('span.help').should('contain', 'click me')
//校验定位到的元素的innerttext包含字符串“click me”

cy.get('button').should('be.visible')
//校验元素是可见的

cy.get(':checkbox').should('be.disabled')
//校验多选按钮不可点击

cy.get(':checkbox').should('be.enable')
//校验多选按钮是可点击状态

cy.get(':checkbox').should('be.checked')
//校验多选按钮是被选中状态

cy.get(':radio').should('be.checked')
//校验单选按钮是被选中状态

cy.get(':radio').should('not.checked')
//校验单选按钮是未选中状态

cy.get('#loading').should('not.exist')
//校验定位的元素不存在

cy.get('#loading').should('exist')
//校验定位的元素存在

cy.get('.connectors-div').should('be.hidden')
//校验定位的元素是隐藏状态

cy.get('xxx').should('have.attr', 'href').and('include', 'contact')
//校验定位到的元素存在属性名称等于“href”的属性，且该属性的值包含“contact”字符串

以上是如何进行页面内容校验的知识点，百看不如一练，接下来需要大家完成如下测试场景，下面的场景涵盖了上次课程讲解的定位和 *** 作页面元素以及校验。

1.打开被测应用，menu显示“Home”、“Sign in”、“Sign up”菜单。

2.登陆用户-登陆成功后会默认跳转到“Your Feed”页面，不显示“Sign in”、“Sign up”menu，页面menu显示“Hone”、“New Article","Settings"、“登陆用户名”。

3.点击setting菜单，d出setting页面，title显示“Your Setting”。

4.点击里面的“or click here to logOut”,用户登出，页面menu显示“Home“、“Sign in”、“Sign up“menu，默认跳到“Global Feed”页面。

上述测试场景看似简单，但也有个小难点，当登陆成功后，如何校验默认的页面是“Your Feed”页面而不是“Global Feed”页面呢？因为页面上“Your Feed”和“Global Feed”都是存在的。 以下是上述场景的实现代码，如果大家自己编写过程中遇到问题，可以参考下面的实现代码。执行命令“npm run assertPractice”即可运行下面的测试脚本。

describe("practice assert element content",() => {
    it("assert it",() => {
        cy.visit("https://angular.realworld.io");
        cy.get('app-layout-header ul li a').eq(0).should('contain','Home');   
        //校验右上角第一个菜单是“Home”，注意使用eq时，index是从0开始

        cy.get('app-layout-header ul li a').eq(1).should('contain','Sign in');
        cy.get('app-layout-header ul li a').eq(2).should('contain','Sign up');
        cy.get('app-layout-header ul li a[href="/login"]').click();         
        //点击sign in菜单

        cy.get('[formcontrolname=email]').clear()
        cy.get('[formcontrolname=email]').type("e2etest@163.com");         
        //输入登陆账号

        cy.get('[formcontrolname=password]').clear();
        cy.get('[formcontrolname=password]').type("12345678");            
        //输入密码

        cy.get('app-auth-page button[type="submit"]').click();            
        //点击Sign in button

        cy.get('app-layout-header ul li a').should('have.length', 4);     
        //校验右上角的菜单总共有四个菜单

        cy.get('app-layout-header ul li a').eq(0).should('contain','Home');    
        //校验第一个菜单是“Home”

        cy.get('app-layout-header ul li a').eq(1).should('contain','New Article');
        cy.get('app-layout-header ul li a').eq(2).should('contain','Settings');
        cy.get('app-layout-header ul li a').eq(3).should('contain','e2etest');
        cy.get('app-home-page li a').contains('Your Feed').should('have.class','active');    
        //校验登陆成功后默认跳到Your Feed页面

        cy.get('app-layout-header ul li a').contains('Sign in').should('not.exist');      
        //校验登陆成功后，Sign in菜单隐藏

        cy.get('app-layout-header ul li a').contains('Sign up').should('not.exist');
        cy.get('app-layout-header ul li a').contains('Settings').click();
        cy.get('app-settings-page h1').should('contain','Your Settings');
        cy.get('app-settings-page button[]').click();          
        //点击登陆连接

        cy.get('app-home-page li a').contains('Global Feed').should('have.class','active');   
        //校验登出后默认跳到Global Feed页面

        cy.get('app-layout-header ul li a').should('have.length', 3);             
        //校验登处后右上角显示三个菜单
        cy.get('app-layout-header ul li a').contains('Home').should('exist');
        cy.get('app-layout-header ul li a').contains('Sign in').should('exist');
        cy.get('app-layout-header ul li a').contains('Sign up').should('exist');
    })
});

运行上述测试case如下图所示，可以看到执行成功，说明脚本编写无问题。