Cypress 最佳实践

原文： https://docs.cypress.io/guides/references/best-practices.html

组织测试，登录，控制状态

错误：共用页面对象，使用你的UI登录，不截屏
最佳实践：测试spec之间相互独立，用编程的方式登录，控制你的应用的状态

选择元素

错误：使用脆弱的选择器，无法适应改动
最佳实践：使用“data-”属性来为你的选择器提供支持，避免CSS或JS改动的影响。
1. 不要基于CSS属性来选择元素如：id, class, tag
2. 不要基于可能变化的内容比如：元素的文本内容
3. 添加“data-”属性用于选择元素

赋值

错误：试图把命令的返回值赋给变量或者常量，使用const, let或者var
最佳实践：使用闭包来访问和存储命令返回值
很多初次使用的用户看到Cypress的代码会认为它是同步运行的，把返回值赋给变量后可以使用，但其实不然。你基本上在Cypress里面用不到const，let和var这样的关键字。如果有，那你大概率是错了。如果你已经熟悉了Cypress但你还是在用const，let和var这说明你可能想要做下面（不应该做，译者注）的事：
• 你试图存储和比较某些值，比如text, classes, attributes
• 你试图在不同测试用例与hook之间共享某些值，比如在“before”和“beforeEach”里面。

访问外部站点

错误：试图访问可控范围外的站点或服务器
最佳实践：只测试你能控制的范围。避免访问第三方服务器。如果必须这样做，应该使用“cy.request()”来与第三方服务器通信。

测试依赖之前的测试

错误：几个测试耦合在一起
最佳实践：测试应该可以独立运行而且仍然能够通过。
有两种方式来解决耦合的问题：
1. 合并成一个测试
2. 把共享代码放到“beforeEach”里面

创建只有一个断言的微型测试

错误：像写单元测试一样写Cypress测试
最佳实践：别担心，把多个断言写在一起

使用“after”和“afterEach”

错误：使用“after”和“afterEach”这样的hook来清理状态
最佳实践：在测试运行前清理
这能保证测试每次都是运行在清理过的环境

无需等待

错误：随意使用“cy.wait(Number)”来做延时等待
最佳实践：使用路由别名或断言来保证Cypress符合某种运行条件
以下函数都不需要等待：
• cy.request()
• cy.visit()
• cy.get()

Web服务器

错误：使用“cy.exec()”或“cy.task()”来起web server
最佳实践：运行Cypress前启动web server

设置一个全局baseUrl

错误：使用“cy.visit()”但没有设baseUrl
最佳实践：在cypress.json文件中设置baseUrl