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

資訊專欄INFORMATION COLUMN

前端E2E測試框架 cypress了解一下

mushang / 690人閱讀

摘要：是一款開箱即用可以跑在瀏覽器上的測試工具。同樣，測試了也可以直接調(diào)試。這個時候我們的測試文件就可以訪問了，點(diǎn)擊之后發(fā)現(xiàn)他需要我們編寫測試用例，那么接下來就手把手教你編寫基本的測試用例。

What is E2E?

所謂的E2E就是end-to-end。
假設(shè)我們編寫的每個功能程序都是一個黑匣子，最終用戶也只會看到這個黑匣子，那么站在用戶的角度來看并不需要知道這個黑匣子內(nèi)部是什么東西也不需要知道怎么實(shí)現(xiàn)的，我只管知道最終效果是不是我們想要的。
那么映射到前端這邊的話就是：我不管你邏輯使用什么框架什么邏輯寫的，我只想知道瀏覽器上我要的交互效果，ui展示效果是不是正確的，功能使用上是不是正確的，那么這就叫E2E測試。

What is cypress?

打開他Github一目了然. https://github.com/cypress-io...
簡單的來說。cypress是一款開箱即用,可以跑在Chrome瀏覽器上的測試工具。
這種情況下其實(shí)很適合開發(fā)時模擬各種場景，比如某些接口需要特定操作才可以請求到，并且請求之后又要做很多ui操作，這個時候就可以利用Cypress來模擬用戶操作了，一方面可以測試代碼是否正確，并且還能看到ui相應(yīng)變化是否符合預(yù)期。同樣，測試 fail 了也可以直接調(diào)試。

How to use it?

對于新工具的介紹我覺得所有不給出具體例子就直接拋下官方文檔的行為都是耍流氓。
所以我這邊給出基本使用案例，手把手教你如何做一些基本情況的測試，至于之后的進(jìn)階之路，就需要靠你自己啦！
這邊為了簡單起見我還是用vue-cli構(gòu)建一個基本應(yīng)用并在這個應(yīng)用中教你怎么使用cypress。
系好安全帶，老司機(jī)即將發(fā)車～

從0開始 環(huán)境搭建 
1.項目初始化，安裝依賴
// 首先，進(jìn)入桌面，使用vue-cli創(chuàng)建vue項目，并安裝相應(yīng)依賴
vue init webpack vue-cypress-demo

// 進(jìn)入項目目錄
cd vue-cypress-demo

// 安裝cypress
npm i cypress --save-dev
2.安裝好依賴在項目根目錄下創(chuàng)建cypress.json文件并編寫配置信息
// cypress.json
{
    "baseUrl": "http://localhost:8080", // 測試域名，這里可具體項目更改
    "integrationFolder": "cypress/integration", // 測試文件存放目錄
    "testFiles": "**/*.cypress.spec.js", // 根據(jù)規(guī)則匹配具體測試文件，可根據(jù)喜好任意更改
    "videoRecording": false, // 是否使用錄制功能 需要的話具體去看官方介紹就好，這邊暫時用不上
    "viewportHeight": 800, // 測試瀏覽器視口高度
    "viewportWidth": 1600 // 測試瀏覽器視口寬度
}
3.啟動

說來你可能不信，我們已經(jīng)搭建好了測試環(huán)境，那么接下來我們要來啟動cypress。
由于沒有裝全局的cypress依賴命令行中無法識別我們的cypress命令。
故我們需要在package.json中添加scripts腳本.

// package.json
{
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js",
        "cypress": "cypress run",
        "cypress-gui": "cypress open"
    }
}

這時候打開命令行輸入 npm run cypress-gui。
之后cypress會創(chuàng)建一個gui界面。
初次啟動會幫你創(chuàng)建以下文件夾,點(diǎn)擊ok.

之后我們會看到這個頁面，這是因為還沒匹配到對應(yīng)的測試文件。 .

我們可以進(jìn)入cypress/integration目錄創(chuàng)建一個test.cypress.spec.js文件，再來看我們的gui界面。


這個時候我們的測試文件就可以訪問了，點(diǎn)擊之后發(fā)現(xiàn)他需要我們編寫測試用例，那么接下來就手把手教你編寫基本的測試用例。

舉個?

首先我們將App.vue改造成這樣.





編寫測試用例
// cypress/integration/test.cypress.test.js
describe("測試", () => {
    // 測試用例觸發(fā)前調(diào)用的函數(shù)鉤子
    before(() => {
        // 進(jìn)入測試頁面
        cy.visit("/");
    });

    it("測試是否包含指定文案", () => {
        cy.contains("Hello cypress");
    });
    
    it("獲取指定元素", () => {
        cy.get(".test").contains("我是");
    }); 
    
    it("代理本地請求并修改成任意數(shù)據(jù)", () => {
        cy.server();
        // 攔截/api/user請求并傳入自定義數(shù)據(jù)
        cy.route("/api/user", {user: "frank"}).as("user");
        cy.visit("/");
    });
    
    it("代理本地請求并使用mock數(shù)據(jù)", () => {
        cy.server();
        // 請求本地 cypress/fixtrues/user.json文件（需要先創(chuàng)建） then方法可修改成任意數(shù)據(jù)，若不需要修改可不寫
        cy.fixture("/user.json").then(data => data).as("fix_user");
        // 攔截/api/user請求并傳入mock數(shù)據(jù)
        cy.route("/api/user", "@fix_user").as("user");
        cy.visit("/");
    });
    
    it("測試點(diǎn)擊事件", () => {
        cy.get(".btn").click();
    });
});

你會在GUI界面中看到：

以上這4種情況就是最基本的編寫范例。
實(shí)際使用中肯定還會有很多種情況要判斷，這邊就做個簡單的入門介紹，更多的api使用方式去官方文檔查看即可。
官方文檔： https://docs.cypress.io/api/i...

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

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

相關(guān)文章

  • cypress進(jìn)行e2e測試之理論

    摘要：進(jìn)行測試之理論是目前很火的一個測試組件，內(nèi)部綁定了之類的斷言為了讓代碼代碼更有說服力，減少提交測試錯誤，進(jìn)行測試顯然是非常有必要的。 cypress 進(jìn)行 e2e 測試之理論 cypress 是目前 e2e 很火的一個測試組件，內(nèi)部綁定了 macha、chai、chai-jquery 之類的斷言,為了讓代碼代碼更有說服力，減少提交測試錯誤，進(jìn)行 e2e 測試顯然是非常有必要的。 官網(wǎng)...

    chnmagnus 評論0 收藏0

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

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

    MAX_zuo 評論0 收藏0

  • FE.TEST-前端測試初探

    摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統(tǒng)計的配置參考一個創(chuàng)建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進(jìn)行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 測試可以提供快速反饋，根據(jù)測試用例覆蓋代碼，從而提升代碼開發(fā)效率和質(zhì)量。根據(jù)投入產(chǎn)出價值，通常迭代較快的業(yè)務(wù)邏輯不做...

    Travis 評論0 收藏0

  • FE.TEST-前端測試初探

    摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統(tǒng)計的配置參考一個創(chuàng)建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進(jìn)行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 測試可以提供快速反饋，根據(jù)測試用例覆蓋代碼，從而提升代碼開發(fā)效率和質(zhì)量。根據(jù)投入產(chǎn)出價值，通常迭代較快的業(yè)務(wù)邏輯不做...

    張率功 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<