cypress 是通过模拟用户点击来测试的端到端测试框架,它也允许你编写集成测试与单元测试。
Cypress 是用的真正的后端数据,而不是 mock 一个数据然后测试组件行为。所以在测试时最好不要使用线上环境,这会使得后端写入很多测试脏数据。最好的就是在专门的沙箱环境测试,如果有租户概念可用新租户,测试时机为发起 MR 代码时。
Cypress 主要用于跑通主流程,测试的是预期内的东西,而对于有大量计算或复杂判断的纯函数方法而言,单测肯定是更好。
有的网站的功能之间耦合的、有先后顺序、有分支顺序的。对于多个流程,需要想好系统有几个主流程,有几个分支。以发布文章举例,就有 :
做法:
注意点:
cypress 主要测试的场景为发起 MR 时,一般是在远程服务器上使用无头模式运行,而 cypress 比单测脆弱,只要有网络不稳定就很容易挂掉。 一旦 CI 挂掉开发人员就需要去查原因,如果通过下载 cypress 报告看录屏或截图的话效率不够高。可以直接在控制台打印内容,方便看出原因,下面两个插件可以帮助输出网络请求的状况,当后端接口错误时直接把响应头和返回值输出到控制台。
plugin中: require("@cypress/code-coverage/task")(on, config); require("cypress-terminal-report/src/installLogsPrinter")(on); support中: import installLogsCollector from "cypress-terminal-report/src/installLogsCollector"; installLogsCollector({ printLogs: "always", collectTypes: ["cons:error", "cy:xhr", "cy:request", "cy:route"], xhr: { printHeaderData: true, }, filterLog([type, message]) { if (type === "cy:route") { const statusCode = Number(get(/Status\:\s+(\d+)/.exec(message), "1")); return statusCode >= 300; } return true; }, });
Cypress 测试存在编写测试用例时通过,但之后测试偶发不通过的情况。为了提升稳定性,可从这几个方面来着手:
Cypress.currentTest.retries(重试次数)
{force: true}
让每个测试用例都可重试一次配置:
afterEach(() => { if (Cypress.currentTest.state === "failed") { Cypress.runner.stop(); } });
setCookie
会在每个it
之后自动销毁,保证纯洁性,所以需要修改整个describe
的cookie
需要在beforeEach
中使用。参考:https://docs.cypress.io/api/commands/clearcookies.html#Syntax
Cypress automatically clears all cookies before each test to prevent state from being shared across tests. You shouldn’t need to use this command unless you’re using it to clear a specific cookie inside a single test.
可以设置白名单,使得各用例共享 cookie
Cypress.Cookies.defaults({ whitelist: ["change-role-user-id"], });
Cypress 也是可以通过一些配置查看覆盖率的,通过istanbul
插件就可以做到。
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!