端到端測試神器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