利用 Cypress 與 Percy 來做 Visual Testing

Visual Testing 是什麼?

視覺測試 (visual testing) 是指利用工具自動檢測 UI 變更的一種測試方式。過去我們檢視 UI 的變更,常用的方法大致是 (1) 人眼 (截圖) 比對,比較本次更新與上一版或 mockup 的差異;(2) 工具 diff 由 unit test 或各種測試所產生的快照 (snapshot test)。但這兩種方式都無法很直覺很明確的在第一時間告訴我們到底改了什麼?若能產生指定頁面或元件的圖檔,並且標註更新的部份,這樣在 review 的時候,就更省時更便利了。

不過,大家最在意的應該是 Visual Testing 可以吃嗎?要怎麼吃?到底好不好吃? 關於這個議題留待結論再來探討。

利用 Cypress 與 Percy 實作 Visual Testing

怎麼在專案建立 visual testing 機制呢?簡單來說在本文使用的方式是

記錄一下詳細步驟…

第一步,可建立一個專門跑測試的專案,在註冊 Percy 完成後,將 Percy 與此專案連結,並且在專案設定 percy token secret,設定可參考這裡

第二步,在專案寫一些測試案例,範例如下,先到我的部落格的自我介紹頁,然後用 Percy 產生此頁的快照。

describe('Visual Testing with Percy and Cypress', () => {
  it('should take percy snapshot', () => {
    cy.visit('https://www.cythilya.tw/about/');
    cy.percySnapshot();
  });
});

在 package.json 的 scripts 新增 "cy:percy": "percy exec -- cypress run",稍後執行 cy:percy 即可跑這個範例測試、產生快照並上傳到 Percy。

第三步,選擇觸發 visual testing 的時機點,大多是選定期與提交 PR,在這裡是以定期做 visual testing 為例。在 GitHub repository 設定 percy token secret 與寫好 workflow 後,就會開始依照設定的頻率定期來做 visual testing 了!

name: Visual Testing
on:
  schedule:
    - cron: '0 */3 * * *'
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master
      - name: Install
        run: yarn
      - name: Percy Test
        uses: percy/exec-action@v0.3.1
        with:
          command: 'cypress run'
        env:
          PERCY_TOKEN: $

這裡是利用 GitHub Actions 的 schedule 設定來達成固定頻率跑特定工作,例如,*/5 * * * *:每 5 分鐘跑一次。注意!GitHub Actions 允許最小頻率是 5 分鐘。如果不確定自己到底設定了什麼,可以用這個工具 crontab guru 檢視看看。像是一開始想要每三小時跑一次就這樣寫 * */3 * * * 變成每三個小時跑了好幾次 (錯誤示範不要學),但其實正確的是這樣 0 */3 * * *

關於 GitHub Actions 入門可參考這篇文章。比起老爺爺,GitHub Actions 是更輕量的 CI/CD 工具吧 😂 🤔

工作流程

目前在工作流程的計畫是這樣的…

例如,提交 PR 後,觸發 GitHub 的 CI 來利用 Percy 做 visual testing 所產生的圖檔的資訊來比對。

在 PR 階段檢視 visual testing 所產生的比對圖檔的資訊

若想看詳細資料,可找到 build 與連結連到 Percy 上來看圖檔差異。

Percy build 與連結

在 Percy 上看到圖檔比對並決定是否要 approve 這個 PR。

在 Percy 上看到圖檔

又例如,定期利用 GitHub Actions 做 visual testing。

定期利用 GitHub Actions 做 visual testing

點進去看細節。

定期利用 GitHub Actions 做 visual testing

結論

參考資料

推薦閱讀


Percy Storybook visual testing Cypress 視覺測試 自動化測試 GitHub Actions visual regression testing CI/CD End-to-End Testing 端對端測試 讀書會 cron job cypress.io GitHub 閱讀筆記 Cypress 讀書會