owned this note   changed 4 years ago  
Linked with GitHub

由前端工程師來守護網頁的和平 - 導入 End to End 自動化測試之經驗談 ／ 谷哥（徐銘谷）

歡迎來到 Modern Web 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@ModernWeb/2020
手機版請點選上方 按鈕展開議程列表。

簡報下載

共筆從這開始

測試的Scope

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 難題三選一
    如果你的手上有一個成熟的專案你會優先選擇建立哪一種測試?
    A Unit Testing
    B Integration Testing (整合測試)
    C End-to-End Testing(端對端測試)

相較於單元測試和整合測試,E2ETest更能反應產品是否功能正常或是滿足使用者需求。

選擇E2E Test的理由

一個成熟的專案建議可以直接使用End to End Test

  1. 測試價值高(老闆理解其價值)
  2. 有現成的測試情境(由PM進行人工測試)>>將文字轉成測試的程式碼
  3. 節省時間成本(每一次人工測試花費約1-2小時)>>讓PM有更多的時間安(ㄧㄚ)排(ㄓㄚˋ)需(ㄇㄚˇ)求(ㄋㄨㄥˊ)
  4. 保護產品的核心功能
  5. 打怪練功
  6. (剛好)前端人力充足

挑選E2E Test 框架

“If you made a list of everything developers complain about,
I would put money on end-to-end tests being in the top three.”

E2E Testing Automation的痛點

  1. 速度慢
  2. *Flaky Tests
  3. 難 Debug

*Flaky tests are tests that frequently fail even though the application they are testing is working. Maybe the code took too long to execute or an API was temporarily down.

來看看 Cypress.io 測試框架怎麼解決這些痛點

  1. 痛點一: 速度慢

    • 必須透過 sleep 或 wait 來等待非同步的行為，為了確保通過測試而拉長等待時間，造成測試速度緩慢
    • 解決方式: Retry機制
      cy.get('[data-cy=button]').click();

  2. Flaky Tests

    • 解決方式：設定 Timeout
      cy.get('[data-cy=button]', { timeout: 10000 }).click();

  3. 難 Debug

    • 沒有畫面，不知道測試沒過的 root cause
    • 解決方式：
      圖形化介面（Time Travel）
      Videos（錄影測試過程）
      Screenshots（截圖失敗畫面）

使用 Cypress

  • 使用 npm install cypress --save-dev 安裝

Cypress.io 其他優點

  • 支援(大部分)瀏覽器
    • Electron(default)
    • Chrome
    • Firefox
    • IE / Edge
    • Safari (on the roadmap)
  • 整合度高
tags: MW20 維運與測試 自動化測試
Select a repo