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

这篇具有很好参考价值的文章主要介绍了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');
    })
})

运行结果如下

cypress 教程,前端自动化测试,测试工具