端到端测试神器Cypress!进阶

前言

官方文档：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