E2E QA Cypress Testing

Cypress 入門

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

0 3641

簡介

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可以比較精準的選取到目標元素，缺點就是太細太瑣碎，某些情境下可能會讓測試變慢