Cypress 10.x 組件測試指南
一個人到底要走多少彎路，才能成為一名合格的測試開發(fā)工程師？
Cypress又又又更新啦！我將講解如何使用Cypress進行組件測試。 （買了書的同學們，公眾號回復你的微信號，拉你到Cypress中國群）。
最近兩年測試界最火的測試工具莫過于Cypress，作為測試工程師彎道超車必備、下一代UI自動化測試利器，Cypress開發(fā)團隊也一直在拼命做事，這不，Cypress10.x重磅發(fā)布，將“Component Testing”重磅引入到了測試團隊。測試人員又可以將自己的勢力版圖向開發(fā)側移動一下啦 ：）
什么是組件測試
組件測試(也叫模塊測試)，關注可單獨測試的組件。
組件測試允許單獨測試一個組件，這在關注特定組件的功能時很重要，
組件測試和端到端測試之間的區(qū)別在于：
端到端通常測試整個應用程序，組件測試則側重于特定組件的功能。
在 Cypress 中，通過調(diào)用 cy.visit() 對 URL 進行端到端測試，通過調(diào)用 cy.mount() 進行組件測試。
組件測試依賴
寫組件測試需要一些前端框架支持，當前Cypress支持的框架如下：
編寫組件測試
當你第一次選擇組件測試這個類型時，Cypress會自動為你創(chuàng)建相關配置。接上兩篇文章介紹，我們在項目根目錄下運行：
yarn debu
然后，在選擇測試類型的時候，選擇Component Testing：
然后，Cypress會讓你選擇一個框架類型：
我們選個Create React APP，當然你也可以選擇列表中的其他選項。
選好后，點擊Next，你會看到下面這個圖：
根據(jù)圖中提示，在目錄下，執(zhí)行上圖命令行命令。安裝成功后，你會看到如下界面：
點擊”Continue“，
你會看到一些配置，點擊”Continue“，最終你會看到這個界面。
然后選擇你要運行的瀏覽器，點擊”Start Component Testing in Chrome“，
選擇Create your first spec，
點擊Create Spec，然后你會看到下圖，
點擊”O(jiān)K“， 然后你會看到如下頁面
修復這個錯誤，安裝react-dom
yarn add react-dom
然后，你就能看到測試用例創(chuàng)建成功了。
同時，你檢查項目文件夾，你會發(fā)現(xiàn)文件已經(jīng)創(chuàng)建到了cypress/component下了。
運行測試用例
測試用例的運行基本不變，你可以直接：
npx cypress run
但是你也知道我不推薦。我們?nèi)ジ捻椖扛夸浵碌膒ackage.json文件。給它添加下如下scripts部分。最后，你的package.json看起來像這樣：
然后你就可以在命令行里如此運行：
yarn debug
然后，你就可以愉快的編寫執(zhí)行Cyprss用例了。
兩個難點
1. 做 Compon ent Test的前提是你對前端代碼庫有訪問權限，否則一切都是白談。 2. 你的Cypress框架要和你的Web端代碼放在一個代碼庫下，這樣你mount起來才方便。這個就是另外一個困難。 由于這兩個原因，加上開發(fā)人員也無意放手組件測試， 所以大部分情況下測試人員都不會執(zhí)行 Compon ent Test 這個測試類型。一個真實用例
假設你在你的組織有一定發(fā)言權，搞定了以上兩件事，我們來看看Cypress能帶給我們什么驚喜。首先，要做組件測試，我們得有一個Web APP。你需要創(chuàng)建一個Web App。Cypress支持幾種框架，我們使用create-react-app來快速創(chuàng)建一個Web App。
npx create-react-app my-ap
然后，你的項目文件夾會變成這個樣：
my-app就是我們剛剛創(chuàng)建好的一個react web app。
然后我們把這個app運行起來：
// 先到my-app文件夾下
cd my-app
// 啟動
npm start
瀏覽器訪問：http://localhost:3000/， 你將看到我們的app啟動了。
此時，更改我們的component Test測試文件:
import * as React from 'react'
import App from '../../../App'
describe('ComponentName.cy.js', () => {
it('renders learn react link', () => {
cy.mount(<App />)
cy.contains(/learn react/i).should('be.visible')
})
}
然后，在項目根目錄下執(zhí)行運行：
yarn debug
你會發(fā)現(xiàn)運行失敗了。查看Log得知：
”Relative imports outside of src/ are not supported“，
也就是說，我們的測試文件里，導入的相對路徑超出了src文件夾，所以我們運行失敗。
import App from '../../../App
知道了錯誤就好辦了。我們?nèi)ジ捻椖拷Y構，變成如下這個樣子：
兩個要點：
-
更改項目的cypress.config.js文件，將component下的specPattern加上。這樣符合這個pattern的便都是Component 測試。
-
把你的Component測試文件移到src下。跟你要測試的組件同目錄。避免無法導入。
然后，你在項目根目錄下，執(zhí)行
yarn debug
你會發(fā)現(xiàn)一切正常，測試成功。
關鍵點
你要測試哪個組件，就把哪個組件導入進來，然后mount它。疑惑點
如果框架使用的是create-react-app，那么你在組件測試導入時，必須保證導入的路徑在src下。這樣就阻擋了我們正常的測試用例組織結構，我們無法把所有component 測試用例都放在component文件夾下面。略有些不方便。
Cypress有很多奇淫巧技， 我已經(jīng)總結超過百篇
別走開，下一篇更精彩！
往期回看：
你不知道的Cypress系列（1） --雞肋的BDD
你不知道的Cypress系列（2） -- ”該死"的PO模型！
你不知道的Cypress系列（3） -- 是時候重構自己的思維了！
你不知道的Cypress系列（4） -- “PO”已死，App Action當立？
你不知道的Cypress系列（5） -- "眼瞎"的TestRunner
你不知道的Cypress系列（6） -- 多Tab的小秘密
你不知道的Cypress系列（7） -- 當iFrame遇見彈出框
你不知道的Cypress系列（8） -- “可視化”測試你知多少
你不知道的Cypress系列（9） -- 代碼“自動生成”術 你不知道的Cypress系列（10） -- CypressHelper你不知道的Cypress系列（11） -- 使用cy.session()加速鑒權。
你不知道的Cypress系列（12） -- 測試報告Allure
你不知道的Cypress系列（13） -- 你真的需要多瀏覽器測試嗎？
你不知道的Cypress系列（14） -- 一文說透元素定位
你不知道的Cypress系列（15） -- 支持跨域訪問了！
為了更好的支持我創(chuàng)作，麻煩同學們動動小手，點贊 + 在看 + 轉發(fā)一鍵三聯(lián)。
技術討論
公眾號里直接回復 666， 帶你入圈
- - 時人莫小池中水, 淺處不妨有臥龍 - -
作者：
Kevin Cai, 江湖人稱蔡老師。
兩性情感專家，非著名測試開發(fā)。
技術路線的堅定支持者，始終相信 Nobody can be somebody。
· 猜你喜歡的文章 ·