自動化測試，讓你上班擁有一杯咖啡的時間 | Day 3 — 開始寫第一個測試

此系列文章會同步發文到13th鐵人賽，有興趣的讀者可以前往觀看喔。

今天要帶大家完成第一個測試腳本，這次要用鐵人賽的網站測試登入。在開始寫測試腳本前，先規劃要測試的情境，情境建議設計簡短，把每個情境都當成一個小小的測試用例去寫，方便未來找 Bug。

測試用例

測試用例是依照需求去規劃測試的情境，可以用以下表格輔助使用。將測試用例寫好後，就能開始轉成程式碼，寫成自動化測試腳本。

測試用例

範例一

以登入為例，以下為正確登入的步驟：

1. 進到鐵人賽的登入頁
2. 輸入正確的帳號
3. 輸入正確的密碼
4. 點選登入按鈕
5. 成功登入後，可以看到帳號
6. 點選登出按鈕

在 cypress/integration 資料夾寫測試腳本：

describe('測試鐵人賽登入', function() {
  it('輸入正確帳密後應該要可以登入', function() {
  
     cy.visit('<https://member.ithome.com.tw/login>') //到登入頁
  
     cy.get('#account').type("account"); //輸入帳號
   
     cy.get('#password').type("password"); //輸入密碼
 
     cy.get('.btn-agree').click({force: true,}); //點選登入
     cy.get(".account-fontsize").contains("jennifershih").should("be.visible"); //要有帳號
 
     cy.get('li > a').contains("登出").click({force: true,}); //點選登出
  
  })
 })

範例二

以登入為例，以下為錯誤登入的步驟：

1. 進到鐵人賽的登入頁
2. 輸入錯誤的帳號和密碼
3. 點選登入按鈕
4. 應該要出現提示“登入失敗！請檢查帳號密碼是否正確。”
5. 應該不可以登入

在 cypress/integration 資料夾寫測試腳本：

describe('測試鐵人賽登入', function() {
  it('輸入錯誤帳密後應該不可以登入', function() {
  
     cy.visit('<https://member.ithome.com.tw/login>') //到登入頁
  
     cy.get('#account').type("account"); //輸入帳號
   
     cy.get('#password').type("password"); //輸入密碼
 
     cy.get('.btn-agree').click({force: true,}); //點選登入
     cy.get(".bs-callout-danger").contains("登入失敗！請檢查帳號密碼是否正確。").should("be.visible"); //要有錯誤訊息 
  
  })
 
 })

寫完測試腳本後，到 package.json 檔設定腳本的指令。

cypress設置

打開腳本

1. 在 package.json 文件定義打開的方式 "scripts": { "cypress:open": "cypress open"
2. 在命令列輸入 npm run cypress:open 打開腳本，就可以啟用 Cypress 介面了

啟動腳本

1. 在 package.json 文件定義啟動的方式 "scripts": { "cypress:run": "cypress run" }
2. 在命令列輸入 npm run cypress:run 就可以執行 cypress 腳本了

大家可以嘗試寫人生第一個測試，那我們下一篇見啦！