E2E QA Cypress Testing

Cypress 入門

張庭瑋 Gary Chang 2023/03/13 10:52:24
4762

簡介

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功能的測試報告基本上是無參考價值

 

補充:尋找元素

尋找元素的時候可以使用CSSXpath

Xpath可以比較精準的選取到目標元素,缺點就是太細太瑣碎,某些情境下可能會讓測試變慢

目前Cypress是使用CSS選擇器,如果要用Xpath的話需要另外安裝官方支援的plugin

 

參考資料:

https://www.cypress.io/

 

張庭瑋 Gary Chang