端到端测试神器Cypress!进阶

3

前言

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

你可能感兴趣的

载入中...