Cypress 入門
簡介
Cypress是一個簡單、好上手的測試工具,其方便好用深受許多開發人員喜愛
安裝之前,請先確認電腦有沒有符合以下要求
硬體:
記憶體最低需求 4GB
軟體:
請先確認電腦裡面有安裝Node.js
Cypress目前支援以下版本(截至2022/12/22/27)
Node.js 14.x
Node.js 16.x
Node.js 18.x 及以上
安裝教學:
打開命令提示字元,輸入
cd/你的專案路徑
把Cypress安裝至專案下的資料夾,以便其進行測試
修改完路徑後,輸入:
npm install cypress--save-dev
第一個測試專案:
在命令提示字元內輸入
npx cypress open
然後可以看到Cypress起始頁
這邊可以看到兩種測試方式可以選擇
簡單說明兩者之間的差異:
E2E
優點:全面性測試開發的應用
缺點:需要大量時間撰寫測試
Componenet Testing
優點:快速、方便進行測試
缺點:無法測到所有功能,即不全面
兩種測試優缺點都是相對的,全面所以慢、快速所以片面,端看當下使用情境決定用什麼方法
我們這次選擇E2E來展示Cypress的易用性
當然,我們可以隨時切換測試模式
接著會看到Cypress會根據剛剛選的測試方法,架設一組適合測試的環境
可以打開確認每項變更,接著選擇想要用的瀏覽器
然後就完成初步的設定啦!
選擇Chrome為此次測試範例的瀏覽器,並按畫面指示完成建檔、命名流程等
這時候在清單左邊的Specs就可以看到剛剛建立的測試腳本
(這時候運行若有出現錯誤,請記得在目前的專案底下安裝Typescript)
npm install –save-dev typescript
打開測試腳本,出現如下畫面
畫面左邊為測試紀錄,紀錄了每個測試執行過的步驟
右邊是測試畫面
因為其預設的腳本內容為打開範例網址
('https://example.cypress.io')
所以右邊就是範例網站
以上就是我們的第一個"前往範例網站"測試
修改測試範例:
我們用Visual Studio打開剛剛建立的腳本
放入以下內容:
describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(true)
})
})
儲存後,畫面就會即時更新
來看看第一個成功的案例長什麼樣子
換一段程式碼看看失敗的案例長如何
describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(false)
})
})
進入實戰:
情境:進入網頁並登入
在這之前,先看看會用到的常見指令
cy.visit(‘欲測試頁面’)
通常會是測試案例的第一步
cy.visit('https://example.com')
cy.get() 找到指定元素
以尋找頁面中的輸入帳號欄位為例
cy.get('#userEmail')
cy.contains(內容) 找到包含(內容)的元素
以尋找頁面中有(登入)字樣的內容為例
cy.contains('登入')
cy.click() 滑鼠左鍵單擊
單擊滑鼠左鍵
cy.type() 鍵盤輸入
輸入內容,可以是帳號/密碼....
cy.type('password')
直接來看應用吧!
describe('測試範例', () => {
it('Gets, types', () => {
//造訪頁面
cy.visit('https://要測試的位址')
//點擊頁面中有"login"的字樣
cy.contains('login').click()
//找到輸入Email的欄位,輸入帳號資訊
cy.get('#userEmail')type('test@email.com')
})
})
這邊再介紹一個新的指令
cy.should()
簡單說就是驗證資訊
情境:確認email欄位有沒有放入正確資訊
cy.get('#userEmail').should('have.value', 'test@email.com')
前面鋪陳這麼多,接下來便要真正進入實戰囉!
測試範例 (可以複製貼上看運行步驟)
describe('My First Test', () => {
it('Gets, types and asserts', () => {
cy.visit('https://example.cypress.io')
cy.contains('type').click()
// 使用should斷言,新URL要包含
// '/commands/actions'這段內容
cy.url().should('include', '/commands/actions')
cy.get('.action-email').type('fake@email.com')
// 確認值有被輸入進去
cy.get('.action-email').should('have.value', 'fake@email.com')
})
結語:
Cypress是一個非常實用的測試軟體,幾乎可以說是能即裝即用
不過使用時還是有需要注意的地方:
1. Cypress不建議當作網頁自動化程式
很有可能被偵測到使用腳本而被block
2. E2E測試最好用在自身 or 有參與開發 的專案
一方面是遇到問題便能馬上修改
一方面是別人修改了A功能,而測試人員不曉得還繼續測
那A功能的測試報告基本上是無參考價值
補充:尋找元素
尋找元素的時候可以使用CSS和Xpath
Xpath可以比較精準的選取到目標元素,缺點就是太細太瑣碎,某些情境下可能會讓測試變慢
目前Cypress是使用CSS選擇器,如果要用Xpath的話需要另外安裝官方支援的plugin
參考資料:
https://www.cypress.io/