端到端測試神器Cypress!進(jìn)階

oysun 發(fā)布于2019-08-26 13:55 / 3407人閱讀

摘要：前言官方文檔目前只支持英文，好處是官方入門視頻很多，對于英文水平不好的也很容易入手優(yōu)缺點優(yōu)點只要你學(xué)好語法上應(yīng)該不是很大問題獲取類似，對前端同學(xué)來說是好處缺點內(nèi)置的工具集成了谷歌內(nèi)核，決定你只能是在谷歌瀏覽器上測試，但隨著新版的內(nèi)核采用內(nèi)核

前言

官方文檔：https://docs.cypress.io 目前只支持英文，好處是官方入門視頻很多，對于英文水平不好的也很容易入手；

優(yōu)缺點

優(yōu)點：

只要你學(xué)好js語法上應(yīng)該不是很大問題獲取dom類似jq，對前端同學(xué)來說是好處；

缺點：

內(nèi)置的GUI工具集成了谷歌內(nèi)核，決定你只能是在谷歌瀏覽器上測試，但隨著新版的Edge內(nèi)核采用Chromium內(nèi)核，這點缺點無傷大雅；

為什么要用cypress請看：https://segmentfault.com/a/11... 看1，2，3點就可以；

入門

廢話不多說看了以上幾點決定要不要入坑應(yīng)該心里有數(shù)了；

安裝

網(wǎng)上絕大部分說采用npm i cypress -d 痛點在于內(nèi)置了谷歌內(nèi)核太大，每個項目都要安裝太麻煩了，不便于管理，此處我們采用全局安裝npm i -g cypress,既節(jié)約了磁盤空間又節(jié)約時間

啟動

既然已經(jīng)全局安裝cypress的環(huán)境變量會配置到npm的環(huán)境變量中，npm的環(huán)境變量自然就在系統(tǒng)變量里面，cmd中輸入cypress open
全局情況下打開就是慢點

直接拖入項目，會在項目中生成cypress文件夾和cypress.json

在cypress.json中我們可以配置測試環(huán)境：

{
    "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(擴(kuò)展);

常規(guī)測試用例可以參照intergration文件下的examples文件

進(jìn)階

常規(guī)寫法

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")
  })
})

改進(jìn)按照模塊進(jìn)行測試用例

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輸入內(nèi)容

cy.get(":nth-child(1) > .td > .t-input__text.edit-pointer").click({force: true});
cy.get(".el-input__inner").eq(4).type("測試內(nèi)容", {force: true});

cypress無法操作上傳文件彈窗，我們可以采用：

在fixtures中放入需要準(zhǔn)備上傳的文件,例如：2345.jpg
在support文件夾下的commands.js中寫入擴(kuò)展

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;
            });
    });
});

然后在用例中調(diào)用：

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);

這樣就可以愉快的提交了！

后續(xù)有遇到痛點還會繼續(xù)和大家分享的！

歡迎大家訪問我的個人網(wǎng)站： http://www.slorl.com

GPU云服務(wù)器云服務(wù)器端到端測試端到端 webrtc端到端通信 webrtc端到端延時

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109819.html

發(fā)表評論

登陸后可評論

0條評論

oysun

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow源碼

閱讀 730·2023-04-25 19:28
指針學(xué)習(xí)進(jìn)階

閱讀 1390·2021-09-10 10:51
清除浮動 or 閉合浮動

閱讀 2389·2019-08-30 15:55
端到端測試神器Cypress!進(jìn)階

閱讀 3408·2019-08-26 13:55
JavaScript是怎樣編碼數(shù)字的[How numbers are encoded in Java

閱讀 2994·2019-08-26 13:24
ES6的demo代碼

閱讀 3324·2019-08-26 11:46
ES6中數(shù)組之some、findIndex和filter方法

閱讀 2749·2019-08-23 17:10
Vue自定義單選按鈕和復(fù)選框組件

閱讀 1413·2019-08-23 16:57

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

端到端測試神器Cypress!進(jìn)階

相關(guān)文章

端到端測試神器 cypress 淺入淺出

***端到端測試哪家強(qiáng)？不容錯過的Cypress***

**撩測試MM神器cypress使用入門**

**前端進(jìn)階之路: 前端架構(gòu)設(shè)計(3) - 測試核心**

發(fā)表評論

0條評論

oysun

男|高級講師

TA的文章

tensorflow源碼

指針學(xué)習(xí)進(jìn)階

清除浮動 or 閉合浮動

端到端測試神器Cypress!進(jìn)階

JavaScript是怎樣編碼數(shù)字的[How numbers are encoded in Java

ES6的demo代碼

ES6中數(shù)組之some、findIndex和filter方法

Vue自定義單選按鈕和復(fù)選框組件

最新活動