資訊專欄INFORMATION COLUMN
摘要：是一款開箱即用可以跑在瀏覽器上的測試工具。同樣，測試了也可以直接調試。這個時候我們的測試文件就可以訪問了，點擊之后發現他需要我們編寫測試用例，那么接下來就手把手教你編寫基本的測試用例。
What is E2E?
所謂的E2E就是end-to-end。
假設我們編寫的每個功能程序都是一個黑匣子，最終用戶也只會看到這個黑匣子，那么站在用戶的角度來看并不需要知道這個黑匣子內部是什么東西也不需要知道怎么實現的，我只管知道最終效果是不是我們想要的。
那么映射到前端這邊的話就是：我不管你邏輯使用什么框架什么邏輯寫的，我只想知道瀏覽器上我要的交互效果，ui展示效果是不是正確的，功能使用上是不是正確的，那么這就叫E2E測試。
打開他Github一目了然. https://github.com/cypress-io...
簡單的來說。cypress是一款開箱即用,可以跑在Chrome瀏覽器上的測試工具。
這種情況下其實很適合開發時模擬各種場景，比如某些接口需要特定操作才可以請求到，并且請求之后又要做很多ui操作，這個時候就可以利用Cypress來模擬用戶操作了，一方面可以測試代碼是否正確，并且還能看到ui相應變化是否符合預期。同樣，測試 fail 了也可以直接調試。
對于新工具的介紹我覺得所有不給出具體例子就直接拋下官方文檔的行為都是耍流氓。
所以我這邊給出基本使用案例，手把手教你如何做一些基本情況的測試，至于之后的進階之路，就需要靠你自己啦！
這邊為了簡單起見我還是用vue-cli構建一個基本應用并在這個應用中教你怎么使用cypress。
系好安全帶，老司機即將發車～
1.項目初始化，安裝依賴
// 首先，進入桌面，使用vue-cli創建vue項目，并安裝相應依賴 vue init webpack vue-cypress-demo // 進入項目目錄 cd vue-cypress-demo // 安裝cypress npm i cypress --save-dev
2.安裝好依賴在項目根目錄下創建cypress.json文件并編寫配置信息
// cypress.json
{
"baseUrl": "http://localhost:8080", // 測試域名，這里可具體項目更改
"integrationFolder": "cypress/integration", // 測試文件存放目錄
"testFiles": "**/*.cypress.spec.js", // 根據規則匹配具體測試文件，可根據喜好任意更改
"videoRecording": false, // 是否使用錄制功能 需要的話具體去看官方介紹就好，這邊暫時用不上
"viewportHeight": 800, // 測試瀏覽器視口高度
"viewportWidth": 1600 // 測試瀏覽器視口寬度
}
3.啟動
說來你可能不信，我們已經搭建好了測試環境，那么接下來我們要來啟動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會創建一個gui界面。
初次啟動會幫你創建以下文件夾,點擊ok.
之后我們會看到這個頁面，這是因為還沒匹配到對應的測試文件。 .
我們可以進入cypress/integration目錄創建一個test.cypress.spec.js文件，再來看我們的gui界面。
這個時候我們的測試文件就可以訪問了，點擊之后發現他需要我們編寫測試用例，那么接下來就手把手教你編寫基本的測試用例。
首先我們將App.vue改造成這樣.
Hello cypress
我是：{{user}}
編寫測試用例
// cypress/integration/test.cypress.test.js
describe("測試", () => {
// 測試用例觸發前調用的函數鉤子
before(() => {
// 進入測試頁面
cy.visit("/");
});
it("測試是否包含指定文案", () => {
cy.contains("Hello cypress");
});
it("獲取指定元素", () => {
cy.get(".test").contains("我是");
});
it("代理本地請求并修改成任意數據", () => {
cy.server();
// 攔截/api/user請求并傳入自定義數據
cy.route("/api/user", {user: "frank"}).as("user");
cy.visit("/");
});
it("代理本地請求并使用mock數據", () => {
cy.server();
// 請求本地 cypress/fixtrues/user.json文件（需要先創建） then方法可修改成任意數據，若不需要修改可不寫
cy.fixture("/user.json").then(data => data).as("fix_user");
// 攔截/api/user請求并傳入mock數據
cy.route("/api/user", "@fix_user").as("user");
cy.visit("/");
});
it("測試點擊事件", () => {
cy.get(".btn").click();
});
});
你會在GUI界面中看到：
以上這4種情況就是最基本的編寫范例。
實際使用中肯定還會有很多種情況要判斷，這邊就做個簡單的入門介紹，更多的api使用方式去官方文檔查看即可。
官方文檔： https://docs.cypress.io/api/i...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107684.html
摘要：進行測試之理論是目前很火的一個測試組件，內部綁定了之類的斷言為了讓代碼代碼更有說服力，減少提交測試錯誤，進行測試顯然是非常有必要的。 cypress 進行 e2e 測試之理論 cypress 是目前 e2e 很火的一個測試組件，內部綁定了 macha、chai、chai-jquery 之類的斷言,為了讓代碼代碼更有說服力，減少提交測試錯誤，進行 e2e 測試顯然是非常有必要的。 官網...
摘要：上也有幾個臨時方案，目前我傾向使用自帶的來查看。在打開的測試的瀏覽器中打開切到按下用戶按，輸入，選擇重新刷新并統計代碼執行覆蓋率。那么，起來為了高撩質測量試代碼，起來。 不很久不很久以前 據說某家公司有兩位前端，天天擼bug，為啥嘞？只怪測試MM傾人國，輕語哥哥有bug。?(??????)?? 可是最近兩位有點犯愁 Σ(っ °Д °;)っ。測試MM有幾次提了緊急bug，都在旁邊鼓勵他們...
摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統計的配置參考一個創建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 測試可以提供快速反饋，根據測試用例覆蓋代碼，從而提升代碼開發效率和質量。根據投入產出價值，通常迭代較快的業務邏輯不做...
摘要：使用可以快速生成一個項目，其中包含了和以及覆蓋率統計的配置參考一個創建測試腳本的快速方法其他參考資料前端自動化測試概覽測試之使用對項目進行單元測試 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言 測試可以提供快速反饋，根據測試用例覆蓋代碼，從而提升代碼開發效率和質量。根據投入產出價值，通常迭代較快的業務邏輯不做...
閱讀 2619·2021-09-28 09:35
閱讀 3266·2021-09-03 10:28
閱讀 2917·2019-08-30 15:43
閱讀 1481·2019-08-30 14:04
閱讀 1813·2019-08-29 17:02
閱讀 1820·2019-08-26 13:59
閱讀 700·2019-08-26 11:51
閱讀 3262·2019-08-23 17:16
