上线没有安全感? 每次都要手点测流程? 老bug又又又出现了? 改完代码之后感觉没问题 结果别的地方报错了?
作为开发, 你是否遇到过上面这些问题? 为什么? 测试不写 人肉测试 效率低下, OK 今天就来教你一步一步开启Taro的E2E之旅
前言
背景: 使用Taro开发了一套商城, 每次更新上线 想要测试全流程是否能够全部跑通
使用的E2E测试框架: Cypress
关于E2E测试是什么之类的问题, 大家可以自行去看看相关资料, 这里不多做赘述了
正文
首先看下目录结构
image.png
这是Taro Cli 初始化后的目录结构
现在我们需要安装 Cypress 的相关依赖
npm i -D cypress start-server-and-test
然后在package.json里面把运行e2e的命令写上
image.png
需要注意的是运行命令里面的监听地址是我们项目运行的地址, 之所以会使用 http-get, 是因为 webpack-dev-server不会对 HEAD请求进行回应, 所以改而使用 GET请求进行相关的检测
同时我们可以在根项目的cypress.json 进行一些相关的配置
{
"baseUrl": "http://localhost:10086",
"video": false,
"viewportHeight": 667,
"viewportWidth": 375
}
tip: 商城为移动端项目, 故设置分辨率为 IPhone 6的尺寸
So let`s start our first test case
describe('First Case', () => {
it('Visit Home Page', () => {
cy.visit('/')
})
})
然后运行npm run test:e2e, 开启我们的E2E之旅
image.png
到此 整个Cypress的配置就结束了
Q&A
我想在CI环境下跑E2E可以么?
完全可以, 只要使用 cypress run 就可以做到这一点, 类似于像下面这样配置
{
"script": {
"cy:run": "cypress run",
"ci:e2e": "server-test dev:h5 http-get://localhost:10086 cy:run",
"build:h5": "taro build --type h5",
"dev:h5": "npm run build:h5 -- --watch",
}
}
运行 ci:e2e即可 :sunglasses:
为什么我有一些请求监测不到
Taro的请求库是使用fetch来处理的, 但是目前Cypress仅支持XHR请求的检测, 所以在页面加载前, 我们需要将window.fetch设置为null, 或者你也可以选择其他的请求库
describe('First Case', () => {
it('Visit Home Page', () => {
cy.visit('/', {
onBeforeLoad: win => {
win.fetch = null;
}
})
})
})
相关链接:
- https://docs.cypress.io/guides/guides/continuous-integration.html#Basics
- https://github.com/cypress-io/cypress/issues/95
- https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-fetch#readme