端到端测试神器Cypress!进阶

2019年9月1日 168次阅读 来源: slorder

媒介

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

    原文作者：slorder
    原文地址: https://segmentfault.com/a/1190000019290403
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞