摘要：是一款开箱即用可以跑在浏览器上的测试工具。同样，测试了也可以直接调试。这个时候我们的测试文件就可以访问了，点击之后发现他需要我们编写测试用例，那么接下来就手把手教你编写基本的测试用例。
What is E2E?
所谓的E2E就是end-to-end。
假设我们编写的每个功能程序都是一个黑匣子，最终用户也只会看到这个黑匣子，那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不需要知道怎么实现的，我只管知道最终效果是不是我们想要的。
那么映射到前端这边的话就是：我不管你逻辑使用什么框架什么逻辑写的，我只想知道浏览器上我要的交互效果，ui展示效果是不是正确的，功能使用上是不是正确的，那么这就叫E2E测试。
打开他Github一目了然. https://github.com/cypress-io...
简单的来说。cypress是一款开箱即用,可以跑在Chrome浏览器上的测试工具。
这种情况下其实很适合开发时模拟各种场景，比如某些接口需要特定操作才可以请求到，并且请求之后又要做很多ui操作，这个时候就可以利用Cypress来模拟用户操作了，一方面可以测试代码是否正确，并且还能看到ui相应变化是否符合预期。同样，测试 fail 了也可以直接调试。
对于新工具的介绍我觉得所有不给出具体例子就直接抛下官方文档的行为都是耍流氓。
所以我这边给出基本使用案例，手把手教你如何做一些基本情况的测试，至于之后的进阶之路，就需要靠你自己啦！
这边为了简单起见我还是用vue-cli构建一个基本应用并在这个应用中教你怎么使用cypress。
系好安全带，老司机即将发车～
1.项目初始化，安装依赖
// 首先，进入桌面，使用vue-cli创建vue项目，并安装相应依赖 vue init webpack vue-cypress-demo // 进入项目目录 cd vue-cypress-demo // 安装cypress npm i cypress --save-dev
2.安装好依赖在项目根目录下创建cypress.json文件并编写配置信息
// cypress.json
{
"baseUrl": "http://localhost:8080", // 测试域名，这里可具体项目更改
"integrationFolder": "cypress/integration", // 测试文件存放目录
"testFiles": "**/*.cypress.spec.js", // 根据规则匹配具体测试文件，可根据喜好任意更改
"videoRecording": false, // 是否使用录制功能 需要的话具体去看官方介绍就好，这边暂时用不上
"viewportHeight": 800, // 测试浏览器视口高度
"viewportWidth": 1600 // 测试浏览器视口宽度
}
3.启动
说来你可能不信，我们已经搭建好了测试环境，那么接下来我们要来启动cypress。
由于没有装全局的cypress依赖命令行中无法识别我们的cypress命令。
故我们需要在package.json中添加scripts脚本.
// package.json
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"cypress": "cypress run",
"cypress-gui": "cypress open"
}
}
这时候打开命令行输入 npm run cypress-gui。
之后cypress会创建一个gui界面。
初次启动会帮你创建以下文件夹,点击ok.
之后我们会看到这个页面，这是因为还没匹配到对应的测试文件。 .
我们可以进入cypress/integration目录创建一个test.cypress.spec.js文件，再来看我们的gui界面。
这个时候我们的测试文件就可以访问了，点击之后发现他需要我们编写测试用例，那么接下来就手把手教你编写基本的测试用例。
首先我们将App.vue改造成这样.
Hello cypress
我是：{{user}}
编写测试用例
// cypress/integration/test.cypress.test.js
describe("测试", () => {
// 测试用例触发前调用的函数钩子
before(() => {
// 进入测试页面
cy.visit("/");
});
it("测试是否包含指定文案", () => {
cy.contains("Hello cypress");
});
it("获取指定元素", () => {
cy.get(".test").contains("我是");
});
it("代理本地请求并修改成任意数据", () => {
cy.server();
// 拦截/api/user请求并传入自定义数据
cy.route("/api/user", {user: "frank"}).as("user");
cy.visit("/");
});
it("代理本地请求并使用mock数据", () => {
cy.server();
// 请求本地 cypress/fixtrues/user.json文件（需要先创建） then方法可修改成任意数据，若不需要修改可不写
cy.fixture("/user.json").then(data => data).as("fix_user");
// 拦截/api/user请求并传入mock数据
cy.route("/api/user", "@fix_user").as("user");
cy.visit("/");
});
it("测试点击事件", () => {
cy.get(".btn").click();
});
});
你会在GUI界面中看到：
以上这4种情况就是最基本的编写范例。
实际使用中肯定还会有很多种情况要判断，这边就做个简单的入门介绍，更多的api使用方式去官方文档查看即可。
官方文档： https://docs.cypress.io/api/i...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107684.html
摘要：进行测试之理论是目前很火的一个测试组件，内部绑定了之类的断言为了让代码代码更有说服力，减少提交测试错误，进行测试显然是非常有必要的。 cypress 进行 e2e 测试之理论 cypress 是目前 e2e 很火的一个测试组件，内部绑定了 macha、chai、chai-jquery 之类的断言,为了让代码代码更有说服力，减少提交测试错误，进行 e2e 测试显然是非常有必要的。 官网...
摘要：上也有几个临时方案，目前我倾向使用自带的来查看。在打开的测试的浏览器中打开切到按下用户按，输入，选择重新刷新并统计代码执行覆盖率。那么，起来为了高撩质测量试代码，起来。 不很久不很久以前 据说某家公司有两位前端，天天撸bug，为啥嘞？只怪测试MM倾人国，轻语哥哥有bug。✧(๑•̀ㅂ•́)و✧ 可是最近两位有点犯愁 Σ(っ °Д °;)っ。测试MM有几次提了紧急bug，都在旁边鼓励他们...
摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做...
摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做...
阅读 2580·2021-09-28 09:35
阅读 3237·2021-09-03 10:28
阅读 2826·2019-08-30 15:43
阅读 1447·2019-08-30 14:04
阅读 1765·2019-08-29 17:02
阅读 1789·2019-08-26 13:59
阅读 662·2019-08-26 11:51
阅读 3222·2019-08-23 17:16
