cypress基础教程1-测试用例和钩子函数

1.新增测试用例

cypress 每个用例文件中在

describe('文件名/用例组名称', () => {})

内部写具体的测试用例。

其中 describe 块中的 {} 内部每一个测试用例都是一个

it('用例名称', () => {})

代码块。

describe('测试一个网页 to-do', () => {
  it('测试计划一用例', () => {
  })
  it('测试计划二用例', () => {
  })
})

2. 测试前后相同操作的重用

cypress 使用 beforEach 钩子函数在每一个测试用例运行前执行操作，afterEach 钩子函数在每一个测试用例运行后执行操作。

describe('example to-do app', () => {
  beforeEach(() => {
    // 重复的操作如：登录操作，打开网页的操作，创建测试所需资源等，都可以在这里实现
  })
​
  afterEach(() => {
    // 重复的操作如：恢复测试时的修改内容，还原到测试前的状态
  })
})

cypress 还提供了另外两种钩子函数。使用 befor 钩子函数在所有测试用例运行前执行操作，当前文件内只会执行一次，after 钩子函数在所有测试用例运行后执行操作，也是只执行一次。

describe('example to-do app', () => {
  before(() => {
    // 常用于初始化测试环境
  })
​
  after(() => {
    // 恢复测试环境至测试前的状态
  })
})

上面提到的四种钩子函数可以放在describe()块内或者块外，放在describe()外的优先级要高。

3. 测试用例的执行顺序

before() // describe()外的钩子函数
-> before() // describe()内的钩子函数
​
-> beforeEach() // describe()外的钩子函数
-> beforeEach() -> test1() -> afterEach() // describe()内的钩子函数与测试函数
-> afterEach() // describe()外的钩子函数
​
-> beforeEach() // describe()外的钩子函数
-> beforeEach() -> test2() -> afterEach()
-> afterEach() // describe()外的钩子函数
​
-> after() // describe()内的钩子函数
-> after() // describe()外的钩子函数

示例

/// <reference types="cypress" />
​
before(() => {
    console.log('describe外的before');
})
after(() => {
    console.log('describe外的after');
})
beforeEach(() => {
    console.log('describe外的beforeEach');
})
afterEach(() => {
    console.log('describe外的afterEach');
})
​
describe('example', () => {
    before(() => {
        console.log('describe内的before');
    })
    after(() => {
        console.log('describe内的after');
    })
    beforeEach(() => {
        console.log('describe内的beforeEach');
    })
    afterEach(() => {
        console.log('describe内的afterEach');
    })
​
    it('test1', () => {
        console.log('test1');
    })
    it('test2', () => {
        console.log('test2');
    })
})

运行结果如下