此系列文章會同步發文到個人部落格，有興趣的讀者可以前往觀看喔。

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

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