端到端测试神器Cypress!进阶

oysun 发布于2019-08-26 13:55 / 3241人阅读

摘要：前言官方文档目前只支持英文，好处是官方入门视频很多，对于英文水平不好的也很容易入手优缺点优点只要你学好语法上应该不是很大问题获取类似，对前端同学来说是好处缺点内置的工具集成了谷歌内核，决定你只能是在谷歌浏览器上测试，但随着新版的内核采用内核

前言

官方文档：https://docs.cypress.io 目前只支持英文，好处是官方入门视频很多，对于英文水平不好的也很容易入手；

优缺点

优点：

只要你学好js语法上应该不是很大问题获取dom类似jq，对前端同学来说是好处；

缺点：

内置的GUI工具集成了谷歌内核，决定你只能是在谷歌浏览器上测试，但随着新版的Edge内核采用Chromium内核，这点缺点无伤大雅；

为什么要用cypress请看：https://segmentfault.com/a/11... 看1，2，3点就可以；

入门

废话不多说看了以上几点决定要不要入坑应该心里有数了；

安装

网上绝大部分说采用npm i cypress -d 痛点在于内置了谷歌内核太大，每个项目都要安装太麻烦了，不便于管理，此处我们采用全局安装npm i -g cypress,既节约了磁盘空间又节约时间

启动

既然已经全局安装cypress的环境变量会配置到npm的环境变量中，npm的环境变量自然就在系统变量里面，cmd中输入cypress open
全局情况下打开就是慢点

直接拖入项目，会在项目中生成cypress文件夹和cypress.json

在cypress.json中我们可以配置测试环境：

{
    "viewportWidth": 1440,
    "viewportHeight": 900,
    "chromeWebSecurity": false,
    "fixturesFolder": "cypress/fixtures",
    "integrationFolder": "cypress/integration",
    "pluginsFile": "cypress/plugins",
    "screenshotsFolder": "cypress/screenshots",
    "videosFolder": "cypress/videos",
    "supportFile": "cypress/support",
    "requestTimeout": 10000,
    "defaultCommandTimeout": 10000,
    "baseUrl": "http://192.168.1.6:9000"
}

在cypress文件中：有四个文件夹，fixtures(存放测试文件), intergration(测试用例), plugins(插件), support(扩展);

常规测试用例可以参照intergration文件下的examples文件

进阶

常规写法

describe("测试", () => {
  it("test", () => {
    cy.visit("https://news.ycombinator.com/login?goto=news")
    cy.get("input[name="acct"]").eq(0).type("test")
    cy.get("input[name="pw"]").eq(0).type("123456")
    cy.get("input[value="login"]").click()
    cy.contains("Bad login")
  })
})

改进按照模块进行测试用例

import {login} from "./login"
import {issue} from "./issue"

describe("test", function () {
    it("loginIn", login)
    it("issue", issue)
})

在login.js中

const login = () => {
    cy.visit("https://news.ycombinator.com/login?goto=news")
    cy.get("input[name="acct"]").eq(0).type("test")
    cy.get("input[name="pw"]").eq(0).type("123456")
    cy.get("input[value="login"]").click()
    cy.contains("Bad login")
}

export {login}

模拟输入框（指点击重新渲染出input框的）：先点击用force：true忽略错误，在type输入内容

cy.get(":nth-child(1) > .td > .t-input__text.edit-pointer").click({force: true});
cy.get(".el-input__inner").eq(4).type("测试内容", {force: true});

cypress无法操作上传文件弹窗，我们可以采用：

在fixtures中放入需要准备上传的文件,例如：2345.jpg
在support文件夹下的commands.js中写入扩展

Cypress.Commands.add("upload_file", (fileName, fileType = " ", selector) => {
    return cy.get(selector).then(subject => {
        cy.fixture(fileName, "base64")
            .then(Cypress.Blob.base64StringToBlob)
            .then(blob => {
                const el = subject[0];
                const testFile = new File([blob], fileName, {
                    type: fileType
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(testFile);
                el.files = dataTransfer.files;
            });
    });
});

然后在用例中调用：

const fileName = "2345.jpg";  //上传文件名
const fileType = "video/jpg";   //mime类型
const fileInput = "input[type=file]";   //上传file的input框
cy.upload_file(fileName, fileType, fileInput);
cy.wait(2000);

这样就可以愉快的提交了！

后续有遇到痛点还会继续和大家分享的！

欢迎大家访问我的个人网站： http://www.slorl.com

专线服务混合云端到端测试端到端 webrtc端到端通信 webrtc端到端延时

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109819.html

端到端测试神器 cypress 浅入浅出

摘要：我之前写过关于的文章，，最近在工作中用到比较多了，顿时觉得确实是比较优秀的一个。我之前写过关于cypress的文章，https://segmentfault.com/a/11...，最近在工作中用到cypress比较多了，顿时觉得cypress确实是比较优秀的一个。 1. 软件安装. 2. 安装cypress 安装cypress客户端：http://download.cypress...

CarlBenjamin 2019-08-22 18:45 评论0 收藏0
端到端测试哪家强？不容错过的Cypress

摘要：阅读原文目前测试工具有哪些项目不需要不需要端到端测试一般都需要一个容器，来运行前端应用。向快速，一致和可靠的无剥落测试问好。阅读原文 1. 目前E2E测试工具有哪些？项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 nightmare Electron 15502 ...

LancerComet 2019-08-22 17:19 评论0 收藏0
撩测试MM神器cypress使用入门

摘要：上也有几个临时方案，目前我倾向使用自带的来查看。在打开的测试的浏览器中打开切到按下用户按，输入，选择重新刷新并统计代码执行覆盖率。那么，起来为了高撩质测量试代码，起来。不很久不很久以前据说某家公司有两位前端，天天撸bug，为啥嘞？只怪测试MM倾人国，轻语哥哥有bug。✧(๑•̀ㅂ•́)و✧ 可是最近两位有点犯愁 Σ(っ °Д °;)っ。测试MM有几次提了紧急bug，都在旁边鼓励他们...

MAX_zuo 2019-08-22 16:32 评论0 收藏0
前端进阶之路: 前端架构设计(3) - 测试核心

摘要：而测试驱动开发技术并不只是单纯的测试工作。需求向来就是软件开发过程中感觉最不好明确描述易变的东西。这里说的需求不只是指用户的需求，还包括对代码可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视, 早在开发工作启动之前, 他们就被邀请加入到项目中, 而且他们会跟客户讨论即将建成的平台的...

Karuru 2019-08-01 18:16 评论0 收藏0