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

Published: at 07:58 AM (2 min read)

最近剛好同事也遇到在 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: 文件

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