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

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

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

前言

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

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

只要你學(xué)好js語(yǔ)法上應(yīng)該不是很大問(wèn)題獲取dom類似jq，對(duì)前端同學(xué)來(lái)說(shuō)是好處；

缺點(diǎn)：

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

為什么要用cypress請(qǐng)看：https://segmentfault.com/a/11... 看1，2，3點(diǎn)就可以；

入門

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

安裝

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

啟動(dòng)

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

直接拖入項(xiàng)目，會(huì)在項(xiàng)目中生成cypress文件夾和cypress.json

在cypress.json中我們可以配置測(cè)試環(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文件中：有四個(gè)文件夾，fixtures(存放測(cè)試文件), intergration(測(cè)試用例), plugins(插件), support(擴(kuò)展);

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

進(jìn)階

常規(guī)寫法

describe("測(cè)試", () => {
  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)行測(cè)試用例

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}

模擬輸入框（指點(diǎn)擊重新渲染出input框的）：先點(diǎn)擊用force：true忽略錯(cuò)誤，在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("測(cè)試內(nèi)容", {force: true});

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

在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ù)有遇到痛點(diǎn)還會(huì)繼續(xù)和大家分享的！

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109819.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

oysun

男|高級(jí)講師

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

TA的文章

tensorflow源碼

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

閱讀 1400·2021-09-10 10:51
清除浮動(dòng) or 閉合浮動(dòng)

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

端到端測(cè)試神器 cypress 淺入淺出

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

**撩測(cè)試MM神器cypress使用入門**

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

發(fā)表評(píng)論

0條評(píng)論

oysun

男|高級(jí)講師

TA的文章

tensorflow源碼

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

清除浮動(dòng) or 閉合浮動(dòng)