端到端測試神器Cypress!進階

oysun 發布于2019-08-26 13:55 / 3415人閱讀

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

前言

官方文檔：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

GPU云服務器云服務器端到端測試端到端 webrtc端到端通信 webrtc端到端延時

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109819.html

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

摘要：我之前寫過關于的文章，，最近在工作中用到比較多了，頓時覺得確實是比較優秀的一個。我之前寫過關于cypress的文章，https://segmentfault.com/a/11...，最近在工作中用到cypress比較多了，頓時覺得cypress確實是比較優秀的一個。 1. 軟件安裝. 2. 安裝cypress 安裝cypress客戶端：http://download.cypress...

CarlBenjamin 2019-08-22 18:45 評論0 收藏0
端到端測試哪家強？不容錯過的Cypress

摘要：閱讀原文目前測試工具有哪些項目不需要不需要端到端測試一般都需要一個容器，來運行前端應用。向快速，一致和可靠的無剝落測試問好。閱讀原文 1. 目前E2E測試工具有哪些？項目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 nightmare Electron 15502 ...

LancerComet 2019-08-22 17:19 評論0 收藏0
撩測試MM神器cypress使用入門

摘要：上也有幾個臨時方案，目前我傾向使用自帶的來查看。在打開的測試的瀏覽器中打開切到按下用戶按，輸入，選擇重新刷新并統計代碼執行覆蓋率。那么，起來為了高撩質測量試代碼，起來。不很久不很久以前據說某家公司有兩位前端，天天擼bug，為啥嘞？只怪測試MM傾人國，輕語哥哥有bug。?(??????)?? 可是最近兩位有點犯愁 Σ(っ °Д °;)っ。測試MM有幾次提了緊急bug，都在旁邊鼓勵他們...

MAX_zuo 2019-08-22 16:32 評論0 收藏0
前端進階之路: 前端架構設計(3) - 測試核心

摘要：而測試驅動開發技術并不只是單純的測試工作。需求向來就是軟件開發過程中感覺最不好明確描述易變的東西。這里說的需求不只是指用戶的需求，還包括對代碼可能很多人和我一樣, 首次聽到前端架構這個詞, 第一反應是: 前端還有架構這一說呢? 在后端開發領域, 系統規劃和可擴展性非常關鍵, 因此架構師備受重視, 早在開發工作啟動之前, 他們就被邀請加入到項目中, 而且他們會跟客戶討論即將建成的平臺的...

Karuru 2019-08-01 18:16 評論0 收藏0