Upgrade Cypress to 13

分類 Testing

Cypress 升級到 13 以後有資料夾重大結構的 Break Change, 不過官方都很貼心的使用介面幫你一次升級, 只要無腦的按按鈕就可以, 紀錄一下步驟如下。

繼續閱讀

Connect Redis with NodeJS

分類 Frontend

最近因工作需求, 需從 Redis Server 找大量的資料出來 Debug 程式邏輯. 但每次手動從 UI 介面點開 -> 複製 -> 貼到 VSCode -> 存檔, 非常繁瑣, 且一次都要抓快十個不等的檔案, 非常費時。所以為了能節省我寶貴的時間, 決定用 NodeJS 直接寫一隻來接 Redis 抓資料. 原本要花十分鐘弄得東西, 幾秒鐘就搞定,心理 OS 只有一個字,爽!!!

繼續閱讀

最近工作上需要寫一隻全新的 chatbot plugin, 因為這種 case 很吃 UI 的畫面, 所以除了 js 外一定會用到 html + css, 而且由兩個人以上共同維護。之後這個 plugin 將會接到各 website 上, 所以想要出來的成品能輕量化且高執行效率。我開始爬文比較各種 JS, CSS 框架,最終選擇 Vite & Svelte & TailwindCSS, 作為 plugin 的基底, 他們都有很完整的文件, 對於多人開發很方便。接下來針對這個組合一一做介紹。程式放在 github

繼續閱讀

SVG JS Animation

分類 Frontend

SVG 通常會搭配 CSS Animation 做動畫,效能很不錯。但問題來了,如果設計師給一張很複雜的 SVG Banner 圖,需要只動裡面其中幾個物件,那使用 JS 會比較方便,就不用每張切圖對 x,y 位置,且 JS 能撰寫比較多使用者互動。這次就來測試使用 SVG.js 做動畫。

繼續閱讀

Manually Install Cypress

分類 Testing

最近發現公司內網不明原因會擋住 npm install cypress,但安裝其他的套件就不會發生,所以只好搜尋看要怎麼手動安裝 cypress。

繼續閱讀

隨著時間越長,專案總會越寫越多功能,可是如果每次重構後都要人工測試,會花費很多不必要的時間。所以為了往後能安心的重構程式,我想要一個可以方便 debug 且使用簡易的 UI Testing Framework。參考了許多架構後,決定要使用 cypress + cucumber 來寫測試。

繼續閱讀

Grab Data to CSV by using NodeJS

分類 Frontend

工作中遇到一個情境是,打 API 可以要到當下的資訊,但 User 想要幾分鐘之內的紀錄,如果要做報表的話,就要非常手動的用 postman 打 API N 次,然後再將儲存下來的 json 轉成 csv,最後再將 n 個 csv 合成一份檔案。實際若是每分鐘打一次 API,假設只抓十分鐘,就是存十次 json 檔案,再將十個 json 檔案轉成十個 csv ,最後再手動合成一個 csv 檔案,光是手動的時間絕對超過三十分鐘。為此,我決定要寫一隻程式讓上面的所有動作自動化。

繼續閱讀
作者的圖片

Anny Chang

author.bio


author.job


Taiwan