[CI/CD] testcafe/nightwatch.js 總是發生 element not visible/found

最近剛好同事也遇到在 circleCI 上使用 chrome 跑 testcafe 總是發生以下的錯誤

The element that matches the specified selector is not visible.

但在本機使用 chrome 卻總是正常的執行,無任何的錯誤. 其實這個錯誤通常蠻常見於 RWD 的網站,通常都是由於錯誤的 screen size 導致部分 element 可能因為 viewport 過小而被隱藏.

不管是 testcafe/nightwatch.js 或是其他 end-to-end test 都能找到不少 issue,像是

很大的共通點都是跑在 jenkins/circleCI/travisCI,這些你看不到 GUI 的機器上 XD

這邊提供幾個方向和建議供大家參考及排查:

  1. CI/CD 機器上可能不支援 GUI 的 browser
    以 chrome 為例子請參考 doc 開啟 headless mode
    testcafe: 文件
    nightwatch.js: 相關的設定
  2. 執行 web driver 時未正確指定 window-size,導致找不到對應的 element
    不管是在 testcafe/nightwatch.js 等,都必須注意執行 web driver 所設定的參數,建議自行指定想測試的 window size,e.g.
--window-size=1920,1080
  1. 如果仍然遇到相關問題,可以試著使用 screenshot 功能,將錯誤畫面儲存到特定位置,藉此運作流程是否如預期.
    testcafe: 文件
    nightwatch.js: 文件

大致上照以上排查流程,就可以找到問題及發生原因.

Leave a Reply