e2e测试之cypress怎么使用

2023-05-08,

今天小编给大家分享一下e2e测试之cypress怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

用e2e测试想要达到什么目的?

  • 将被测试的单元放在特定环境下,选中并让它发生交互,达到目标结果。

  • 在测试之前,为测试用例创造它需要的环境,并进行测试,在测试结束后,将环境恢复原状。

如何启动cypress测试?

  • 在项目中安装cypress 插件库

  • 在根目录下可看见自动生成的cypress文件夹以及cypress.config.ts,在cypress.config.ts中配置baseUrl等

  • 编写测试:在cypress/e2e文件夹下编写测试用例

  • 启动测试: 终端输入 npx cypress open, 并选择e2e,选择浏览器,点击需要测试的用例即可

了解目录结构:

  • e2e: 存放编写的测试用例

  • support:cypress/support/index.js文件在每个规范文件之前运行,比如有些动作是适用于全局的,那么就可以放在这里。

  • global.d.ts:存放编写测试用例中的typing,尤其是自定义的函数需要编写的ts都是存放在这里。

  • fixtures:存放测试数据的地方,可以理解为放接口mock数据的地方

  • plugins:存放插件,插件可以是自己编写的,也可以是第三方,插件是在项目加载之前、浏览器启动之前和测试执行期间在Node中执行用的。

  • integration: 一般测试用例会写在integration下面,自带官方示例测试用例文件。

  • screenshot:当测试发生错误时,cypress会自动截图并保存

  • video:当测试发生错误时,cypress会自动录屏并保存

  • downloads: 存放测试过程中下载的文件

基础概念

Cypress和cy的区别 cypress是一个全局对象,在整个测试的过程中会持续存在,当你希望跟踪整个程序未捕获或者失败事件时,比较有用。(以下代码是自定义的fail方法,可以在各个测试用例中使用)

	Cypress.on('fail', (error, runnable) => {
		throe error;
	})

cy是单个测试的对象,它将绑定到每一个单独测试中,并且,在完成这个测试后,自动解绑和清理。

describe( )/context( ) 和 it( ) 对于一条可执行的测试用例来说,describe()和it()是两个必要的组成部分,describe()表示测试套件,context()是它的别名,可以直接用context()代替

钩子函数 - before() 运行cypress时,在开始测试前都会调用这个钩子函数,在钩子中,可以将接口代理到mock数据 - after() 在所有用例跑完后运行 - beforeEach() 每个用例开始前都会运行 - afterEach() 每个用例结束后运行。有人会在这里写下以下代码:

	describe('loggout', () => {
		beforeEach(() => {
			cy.login();
		})
	
		afterEach(() => {
			cy.logout();
		})
	})

这样的行为可能是不必要的,原因是,当测试用例跑完后,这些登录状态不仅在测试时被修改,而且会保存到程序的状态中。意味着你测试完后退出登录后,当你运行代码时,就会发现自己回到了登录页(cypress保存了你退出登录的状态)。

使用场景:

如果你想要在不同的测试用例中共享同一个变量,你可以在before或beforeEach钩子中定义这个变量,在随后的用例中使用它。

在开始测试前,准备好测试环境(向后端发起请求,准备好测试数据,或者mock数据)

以上就是“e2e测试之cypress怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注本站行业资讯频道。

《e2e测试之cypress怎么使用.doc》

下载本文的Word格式文档,以方便收藏与打印。