John Conte Blog

前言用到現在來補充一個比較多新手會卡觀的一個問題，就是如何使用 locator 配合 selector 來定位元素，這個在實際操作上是非常重要的，因為有時候我們會遇到一些元素是沒有 id 或是 class 的，這時候我們就需要透過 locator 配合 selector 來定位元素。 locator 配合 selector 使用起因相信各位在各家公司上，往往都是一條龍從前端到後端都是自己一個人在做，這時候就會遇到一個問題，就是前端的元素是沒有良好的設計 id / class 容易造成html不好維護。配合 Playwright 有時候使用 getByRole 又會出乎意料的錯誤，建議使用 locator 解決問題。 locator 定位器locator 定位器是 Playwright 提供的一個定位元素的方法，透過這個方法我們可以透過一些特定的方式來定位元素，這樣就可以達到我們想要的目的。如下方範例 : 12await page.locator('div.myClass')await page.locator('xpath=//button&#x ...

前言playwright 在前幾章都有介紹簡單的操作方式，這次藥用個身分驗證的例子來說明如何使用 playwright 來自動化測試。 playwright 身分驗證為甚麼會需要 playwright 身分驗證，主要是每次案例上 playwright 都會開啟全新沒有任何的 cookie、session之類，每次都要重新登入相當繁瑣。這邊我們就來說明如何使用 playwright 來自動化登入的動作。 這篇建議各位讀者使用 playwright 時候可以到 playwright.tw 這個網站來查看範例，這個網站由 【Will 保哥】翻成中文網站有助於各位學習。 一、創建驗證動作前篇有提到 test.describe 這個方法可以用來描述測試的動作，可以用來分類測試動作。這次我們就讓這個登入動作寫在 step 裡面，之後啟動就可以直接使用。這邊會使用 playwright 官方網範例來調整，這邊會使用 github 登入來做範例。 12345678910setup("authenticate", async ({ page, browser } ...

前言近期都在玩 Discord Bot 開發。使用方式一定使用 docker 當作工作排程器讓程式運行時候，可以透過 docker desktop 來管理。但是在使用 docker 的時候發現一個問題就是無法互通，因為他本身架構是各之間的docker都是。這時候就需要使用 network 來解決這個問題。 一、Docker容器互相無法連線問題對於一個 docker 使用不久的人來說，會以為都在同一個local network 應該要能互通，而且設定 port 也要吃得回去才合理。過程中得出一個結論就是隔離性，如下圖 : 其中，每個 docker 內部若允許 3000 port，但在本機的 http://localhost:3000 並不會吃得回去，這就是為什麼指令需要加入 -p 3000:3000 這個參數。 1-1 解決方式解決方向就是要讓 docker 容器A可以允許容器B的請求，這時候就需要使用 network 來解決這個問題。 1-1-1 創建一個新的 network我們需要有個環境中，彼此可以互通的網路，這時候就需要創建一個新的 network。 12docker new ...

前言最近在工作環境中沒有任何UI可以使用 git 的功能，其中最需要用到多筆 commit 進行 cherry pick 我們可以用以個指令來進行操作。 Cherry Pick在 Git 中，cherry-pick 是一個強大的命令，允許開發者從一個分支中選擇特定的提交（commit），並將其應用到當前分支。這與傳統的合併（merge）或重疊（rebase）不同，因為這些方法通常會將整個分支的所有提交整合到目標分支中，而 cherry-pick 只選擇單個或多個特定的提交。 一、使用方式一般使用方式 git cherry-pick <commit> 是將指定的 commit 合併到目前的 branch 中。 切換到目標分支：首先，確保你在想要應用提交的分支上。例如，如果你想將提交應用到 master 分支，可以使用以下命令： 1git checkout master 執行 cherry-pick：然後，使用 cherry-pick 命令來選擇特定的提交： 1git cherry-pick <commit1> 如果再執行前覺得 commit 名稱想要 ...

前言最近已經荒廢學習技術相關東西，主要經營都是在 discord 上面。剛好這次想要透過 docker 代替常駐程式作法，因此，這次來試試看 dotnet 與 node 一次用上起來。 一、dotnet 環境上次我有一篇是提到 api 上架部分，這邊我考慮不使用任何程式碼快速產生一個 dotnet、dockerfile。 相關連結 : Docker】使用VSC部屬minimal api 處理方式很簡單，但我們實際要用的是 Console App，因此我們可以透過 dotnet new console 來建立一個 Console App。 123dotnet new console -n dotnet_nodecd .\dotnet_node\code . # 開啟 VS Code 1-1 VS Code 加入 Dockerfile這邊我們可以看到 Program.cs 內容，這邊我們不會特別修改，只是要部屬到 docker 中。接著我們用 ctrl + shift + p 來搜尋 docker: add docker files to workspace，這邊我們選擇 .NET C ...

Dapr 是什麼Dapr 是一個開源的分散式應用程式運行時，它提供了一個簡單的方式來編寫微服務應用程式，並且可以在任何地方運行。Dapr 可以在任何地方運行，無論是在本地開發機器、Kubernetes 集群、虛擬機器、容器或者 IoT 裝置上。Dapr 通過提供一組獨立於語言的 API，來幫助開發人員編寫微服務應用程式。這些 API 包括狀態管理、消息發送、事件驅動、觀察、密碼管理等功能。 一、安裝方式 安裝dapr cli : powershell -Command "iwr -useb https://raw.githubusercontent.com/dapr/cli/master/install/install.ps1 | iex" 使用 winget 安裝: winget install Dapr.CLI 安裝完成後，從新開啟一個終端機，輸入dapr -h，如果有顯示以下畫面代表安裝成功。 二、dapr 初始化動作 使用dapr init初始化一個新的專案 (若要確認版本號，可以使用dapr --version 或 dapr -v) 初始化後，會在 % ...

前言提到 VSC 開發可肯定遇到一些排版問題，有些排版的規則與後面開法人員又不太相同，容易造成 commit 都是排版的修改項目。這邊我用 VSC 來處理共同開發讓所有人排版都一致。 VS Code指令與搜尋如果第一次或是用不久且不夠熟悉的人，我們可以記住以下快捷鍵。 快速指令 (有 > 符號): Ctrl + Shift + P 快速搜尋 (只能搜尋當前專案的檔案名字) : Ctrl + P 快速搜尋可以自己加入 > 符號也能達到效果。 註記 : 最新版本的 VS Code 可以直接點搜尋列也能達到 Ctrl + P 效果。 workspace / User 的 Settings.json 差異專案開始的時候，一定很多人利用 .gitignore 移除掉 .vscode ，首先先把 .gitignore 裡面針對 .vscode 先移除才能往下走原因如下。 說明 : User Setting.json : 個人設定檔，只有自己本機才能使用這些參數。 Workspace Setting.json : 專案設定檔，這個設定檔是針對專案的設定，所有人都能使 ...

前言這篇主要紀錄一下如何讓TypeScript加入IsNullOrEmpty C#效果。為了達到效果花了一點時間，以下是實作過程。 實作過程String.IsNullOrEmpty是C#的函式，他效果是用語法糖的方式判斷字串是否為null或是空字串。在TypeScript中沒有這個函式，我們就創建一個 declare global 解決語法糖問題。 1. 如何創建共用函式庫網路上很多方法像是要再檔名創建 d.ts 檔案，實際上實作可以不用加入這個檔案，只要在 ts 檔案中加入 declare global 即可。如以下範例 : 123456export {};declare global { } 如果要引用ToString 函式，可以在 declare global 中加入以下程式碼 : 123456789export {};declare global { interface Number { ToString(): string; IsOdd(): boolean; } ...

Box 與 UnboxBoxing 和 Unboxing 是在程式設計中處理實值型別（Value Type）和參考型別（Reference Type）之間轉換的過程。 Boxing : 將實值型別轉換為參考型別的過程， Unboxing : 將參考型別轉換為實值型別的過程。 1-1 認識 C# 資料型態C# 中的資料型態分為兩種，分別是實質型別 Value Type 和 參考型別 Reference Type。這兩種型別在記憶體中的存放位置不同，Value Type 存放在 Stack 中，而 Reference Type 存放在 Heap 中。 下圖是 Value Type 和 Reference Type 變數/類別清單 1-2 BoxBoxing 過程會在堆積（Heap）中創建一個新的物件，並將實值型別的值複製到這個新物件中。例如： 12345int i = 123;object o = i; // 這裡發生了 Boxing// 明確轉換// object o = (object)i; // 這裡發生了 Boxing 在這個例子中，整數 i 被轉換為物件 o，這樣 ...

前言最近專案為了要調整node_modules問題，只要切換 master、develop 分支就要重新安裝 node_modules，這樣會花費很多時間，所以我們這邊使用 git worktree 來解決這個問題。 一、 Git worktreeGit worktree 功能是在 Git 2.5 版本中引入的，版本於 2015 年 7 月發布。這功能優點如下 : 可以在同一個 repository 中，把branch 拆到local 的不同目錄下。 可以在不同的目錄下，同時操作不同的 branch。 利用 unlock / lock 來控制 worktree 的狀態。 1-1 建立/移動 worktreeworktree 可以用branch name 來建立。如果想要更改位置可以使用 move 指令。 12git worktree add <path> <branch name> ## 建立 worktreegit worktree move <path> <new path> ## 移動 worktree 1 ...