[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,像是 testcafe: https://github.com/DevExpress/testcafe/issues/1988 nightwatch.js: https://stackoverflow.com/questions/43583715/running-nightwatch-js-tests-via-jenkins-windows-size-issue 很大的共通點都是跑在 jenkins/circleCI/travisCI,這些你看不到 GUI 的機器上 XD 這邊提供幾個方向和建議供大家參考及排查: CI/CD 機器上可能不支援 GUI 的 browser以 chrome 為例子請參考 doc […]

Continue reading


如何以 interactive/non-interactive 方式初始 gcloud sdk

因為工作關係有機會碰到 gcloud sdk,想說紀錄一下如何以不同方式初始 gcloud sdk 假設你已經照著 guideline 裝好 gcloud sdk,接下來要做 sdk 的初始化 以下介紹三種方式,依據執行環境(e.g. 是否為自動化 script/是否有 GUI 之類的) 你可以選擇適合的方式初始化 interactive (互動式,開啟 browser) interactive (互動式,僅在 console) non-interactive (非互動式,手動執行 gcloud init 的執行步驟) 參考資料: https://stackoverflow.com/questions/42379685/can-i-automate-google-cloud-sdk-gcloud-init-interactive-command https://cloud.google.com/sdk/docs/initializing

Continue reading


[chrome] cors + 302 redirect 發生 request 持續 pending 狀況

撰寫本篇記錄文章時所使用的為以下測試環境: 最近在排查一個在 Chrome 上發生的靈異狀況,大致上的重現(隨機)流程如下: 發送一個 fetch (mode: cors) 的 ajax request (same-origin) ajax response 為 302 redirect chrome devtool 顯示 redirect 後的 request 總是處在 pending 狀態 狀態上一直如下圖顯示 詳細測試後此情況僅在 Chrome 發生此狀況,進一步使用 chrome://net-export/ 查詢 network log,看起來 chrome 確實發送 request 後就無任何回應,更進一步使用在 server 端檢查 access.log 卻是沒收到任何 request. 查詢後也有幾個相關的 issue,目前並無找到可行的 workaround 只能盡可能避開使用 302 redirect + cors 發送 same-origin 的 ajax […]

Continue reading


[mac] mysql2 gem: Don’t know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load

這幾天在裝 mysql2 gems 時發生如下的錯誤 原因主要是 ld: library not found for -lssl 通常是 openssl 未安裝或路徑設定有誤 可以先試著重裝 openssl ,必且重新設定對應的環境變數 重新安裝 mysql2 gem 應該就正常囉! 參考資料: https://stackoverflow.com/questions/30834421/error-when-trying-to-install-app-with-mysql2-gem/30837897#30837897?newreg=a89c9550c93f4e7c84db03b8c15ff3d9

Continue reading


[XSS] web security wargame (上)

最近在玩 alert(1) 的 XSS 小遊戲,藉此紀錄一下每關的思路及解法 (建議先自己玩過之後再看這篇,免得被我雷到 XD) XSS 的危險性就不特別解釋了 輕則可以注入挖礦程式,重則被盜用個人資料 以下有每關的解法及答案,防雷 ~ Warmup (第一關)相當單純的沒做任何輸入過濾,可以直接湊出 “) 即可 Adobe (第二關)多了 ” 取代為 \” 的處理,那就多放個 \ 囉 XD JSON (第三關)完全用 JSON.stringify 做字元過濾,少了 <, >, / 這些的過濾 Markdown (第四關)常見的 markdown 轉為 HTML 的取代方式,看起來突破口不是 a 就是 img,嘗試使用 onerror 接口突破 DOM (第五關) 看了很久,找到最有可能的為 createComment 這個接口,配合 > 塞上 img 即可 Callback (第六關)明顯的第一個參數是不擋 […]

Continue reading


[css] 讓 CSS 動畫重新開始

前一陣子在做 CSS 動畫的時候,遇到了特定情況會希望動畫重新開始的狀況 像是每點擊一次按鈕就觸發一次動畫的情境,查了一下相關的做法.記錄在這 舉個例子,我們有個 fade-in 的動畫,希望在點擊文字時重新開始動畫 這時候你可能會很直覺認為再次添加 fade-in class ,像是以下這樣 See the Pen restart css animation by camel2243 (@camel2243) on CodePen. 然後你會發現不 work,於是直覺會想說那先做 remove 再 add XD See the Pen css animation demo1 by camel2243 (@camel2243) on CodePen. 結果發現還是不會動,只好開 setTimeout 大絕 www See the Pen css animation demo3 by camel2243 (@camel2243) on CodePen. 雖然看起來不是很好,但是 […]

Continue reading


[test] Nightwatch.js 如何使用 puppeteer 做測試

還記得之前曾經記錄過 Nightwach.js 血淚史,那時候最大的問題是以 Nightwatch.js 的架構 都是要經過 selenium 去串各 browser 的 web driver 導致排查時的錯誤原因可能會發生在以下三個點 Nightwath.js Selenium Web Driver (chrome driver, gecko driver, ie driver …. .etc.) 導致排查上會需要層層檢查 (血淚) 因此後來在 chrome headless browser 釋出後,我們想試著是否能直接使用 chrome driver 串接 puppeteer 減少 selenium 這層的排查工作,另一方面也可以減少在非 GUI 的機器上跑的 web driver 不同而導致的差異性. 因此我們將 nightwath.js 的設定檔更改如下 將設定分別分為 dev 與 default,差別如下 dev: CI/CD 機器非 GUI […]

Continue reading