一文详解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使用的资料请关注编程网其它相关文章！