Cypress 最佳实践

设置 baseUrl

针对单个网站的测试，最好设置一下 baseUrl，保证代码的简洁

✗ avoid
使用 cy.visit 但没有设置 baseUrl

✓ ok
cypress.[js|json] 中设置 baseUrl

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

✗ avoid
共用页面对象，使用 UI登录，不截屏

✓ ok
测试 spec 之间互相独立，用编程的方式登录，控制你的应用的状态

选择元素

尽可能的考虑 UI 元素的变动，以防止页面做了修改之后，测试用例报错。提升健壮性

✗ avoid
使用 `id`, `class`, `tag`, `文本内容` 等选择元素

✓ ok
添加 `data-` 属性用于选择元素。但是要有修改代码的权限,此条存疑

赋值

✗ avoid
把命令的返回值赋给变量或者常量，使用 const, let 或者 var

// 例外：
- 存储和比较某些值，如 text, class, attribute 等
- 不同测试用例与 hook 之间共享某些值，如 before 和 beforeEach

✓ ok
使用闭包来访问和存储命令返回值

访问外部站点

✗ avoid
试图访问可控范围外的站点或服务器

✓ ok
只测试你能控制的范围。避免访问第三方服务器
如果必须做，请使用 cy.request() 来通信

测试依赖之前的测试

✗ avoid
几个测试耦合在一起

✓ ok
测试应该可以独立运行而且仍然能够通过

// 解决耦合
· 合并成一个测试
· 将共享代码放在 beforeEach 中

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

跟上条相比，使用 Cypress 不可太抽象，其主要还是做 e2e 测试

✗ avoid
像写单元测试一样写 Cypress 测试

✓ ok
将多个断言写在一起，尽量场景化 e2e

使用 after 和 afterEach

✗ avoid
用于清理状态

✓ ok
在测试运行前清理

无需等待

尤其是在等待 API 返回这样的例子中，不要使用 cy.wait, 因为网络是不可预测的

✗ avoid
不要使用 cy.wait(number)

✓ ok
尽量使用 cy.wait(alias) 或者断言来保证 Cypress 符合某种运行条件

WEB 服务器

✗ avoid
使用 cy.exec 或 cy.task 运行 web server

✓ ok
运行 cypress 前启动 web server

持续补充

Cypress 里面的一些坑

异步

Cypress 的命令大多是异步的，在学习初期，如果不了解异步，写起来会很痛苦。随之而来的，是针对编程思维和编程经验的要求较高。初学者容易懵逼