Playwright 自動化腳本無寫程式碼使用方式 (三) - Inspector 功能
前言上篇已經教導 Playwright 基礎使用方式,包含 VS Code 內的功能,接下來會簡單介紹 Inspector 功能。
一、Inspector 功能Playwright Inspector 是一個 GUI 工具,專門用來幫助開發人員調試 Playwright 測試。它提供了以下功能
步過測試: 可以逐步執行測試,查看每一步的執行情況。
即時編輯locator: 允許開發人員在調試過程中即時編輯locator。
選擇target: 可以直接選擇頁面上的target,有不同語言產生內容。
查看行為日誌: 顯示每個操作的行為日誌,幫助分析和辨識問題。
1-1 Inspector 開啟方式開啟方式有兩種,一種是透過 CLI 開啟,另一種是透過 VS Code 開啟。
二、 Inspector 介面/使用方式這邊功能其實與上一章節的功能相同,不同處是他可以改 Target 更改語言,並且可以即時編輯 Locator。
2-1 Target 選擇以下為 Inspector Target 選擇語言功能,可以選擇這幾些語言產生內容。
2-2 Debug ToolsIns ...
Playwright 自動化腳本無寫程式碼使用方式 (二) - 測試總管功能
前言上次只有提到 Playwright 開啟專案、錄製部分,這邊來說一下須要用到幾個功能,這樣可以讓不會寫程式碼的人也可以使用 Playwright 進行自動化測試。
一、測試總管1-1 Show Browser/Show Trace Viewer 差異啟動方式在 Test Explorer 裡面執行隨便幾個功能就會自動跑出以下功能。若不要顯示瀏覽器以及Trace Viewer 可以直接把取消勾選即可。
Show Browser : 這個功能是可以看到瀏覽器的畫面,但是這個功能是不會顯示程式碼的。
Show Trace Viewer : 這個功能是可以看到程式碼的執行過程,可以看到程式碼的執行過程。Ex : 紀錄,錯誤訊息、Snapshots 等等。
1-2 Show Trace Viewer基本上 Show Trace Viewer 可以看到很多不錯的內容,從下圖可以看到幾個重要的部分。
Snapshots : 最上面可以看到 Playwright 每一個步驟的截圖,包含動作顏色可以透過這個功能來識別。
Actions Log : 左邊是將自動化的步驟紀錄下來,可以 ...
Playwright 自動化腳本無寫程式碼使用方式 (一) - 安裝/使用方式
前言最近被公司推出來講解 Playwright 自動化腳本,但是我發現有些人不會寫程式碼,所以我想要分享一下 Playwright 自動化腳本無寫程式碼使用方式,這樣可以讓不會寫程式碼的人也可以使用 Playwright 進行自動化測試。
Playwright 自動化腳本
跨平台支持 : Playwright 支持在 Windows、Linux 和 macOS 平台上運行測試,無論是本地還是在持續集成(CI)環境中,都可以進行無頭或有頭模式的測試。
自動等待: Playwright 在執行操作前會自動等待元素變得可操作,並且擁有豐富的內省事件。這一特性消除了使用人工超時的需求,從而減少了 flaky tests 的發生。
網頁優先斷言: 這些斷言專為動態網頁設計,在進行檢查時會自動重試,直到符合必要條件。
跟蹤和重試策略 : Playwright 允許配置測試的重試策略,並捕捉執行過程中的追踪、視頻和屏幕截圖,以便更好的調試和排除故障。
瀏覽器支援 : 支援所有現代渲染引擎,包括 Chromium、WebKit 和 Firefox。能在主流瀏覽器如 Chrome、Edge、Firef ...
ASP NET Core Module (ANCM) 運作方式
ANCM 是什麼?ASP.NET Core 模組 (ANCM) 是一個本機 IIS 模組,用於在 IIS 上托管 ASP.NET Core 應用程序。它允許 IIS 作為正向代理,用來將 web 請求轉發給後端的 ASP.NET Core 應用程序。
ANCM 的運作方式ANCM 可以透過兩種主要的模型來運行 ASP.NET Core 應用程序:
In-process hosting model:在這種模式下,ASP.NET Core 應用程序運行在 IIS 的工作進程(w3wp.exe)內。這樣可以減少數據傳輸的開銷,提升性能。
Out-of-process hosting model:這種模式下,IIS 會將 HTTP 請求轉發給後端運行的 Kestrel 服務器(ASP.NET Core 的內置 Web 服務器)。這種方式具有更高的靈活性,允許後端進行更獨立的配置和管理。
此外,ANCM 還負責管理 ASP.NET Core 應用程序的進程,包括啟動、停止和監控應用程序的運行狀態。
ANCM 的優點
高性能:預設採用進程內托管模型,有助於提升應用程序的性能和診斷能力。
進 ...
【Azure】使用Redmine 傳入Bords
前言之前友人有提過 Redmine 有 API 功能可以直傳入給 Azure DevOps ,因此我稍微試試看如何使用 Redmine 給 Azure DevOps。
Redmine API一、取得API Key點選我的帳戶 > API 存取金鑰 > 顯示,打開後複製這組金鑰。
二、簡單實作 - 取得當前專案的Issue2-1 安裝 NuGet 套件1dotnet add package redmine-api --version 4.6.5
引用套件
12using Redmine.Net.Api;using Redmine.Net.Api.Types;
2-2 程式碼因為這邊專案資料比較多,所以就只抓其中幾筆資料。
123456789// Redmine 設定string host = "host";string apiKey = "apiKey";var redmineManager = new RedmineManager(host, apiKey);foreach (var issue in issues){ ...
【Docker】使用VSC部屬minimal api
前言近期因為有上課需求,剛好有提到 docker 部屬部分稍微研究一下,發現VS Code擴充套件還不錯用,所以這邊簡單紀錄一下如何使用 Visual Studio Code 部屬 minimal api 到 docker 中。
必要工具這邊我使用 windows 環境,如果沒有下載 docker desktop 可以先下載,這邊不會特別教學,可以參考官網下載。
Docker Desktop
Visual Studio Code
VS Code Docker
相關連結 : Docker in Visual Studio Code
這套件可以讓你在 VS Code 中直接操作 docker ,不需要再開啟 terminal 來操作,而且也幫忙把 container 與 image 顯示出來,操作方面相當方便。
如果有顯示 failed to connect to docker daemon 之類訊息,請確認 docker hub 有沒有打開。主要原因是 docker 服務會透過 Docker Desktop 來打開,若要使用其方式打開可以參考 dockercli.exe 方式開啟。 ...
【筆記】如何讓Winodws11 家用版開啟本機群組原則編輯器 (Local Group Policy Editor)
前言原本我需要把 檔案總管 左側icon 移除,發現 Windows 11 家用版沒有 Local Group Policy,需要使用指令列的方式來開啟。
一、打開記事本複製下面的指令列,貼到記事本,存檔為 LocalGroupPolicy.bat。
1234567@echo offpushd "%~dp0"dir /b %SystemRoot%\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >List.txtdir /b %SystemRoot%\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientTools-Package~3*.mum >>List.txtfor /f %%i in ('findstr /i . List.txt 2^>nul') do dism /online /norestart /add-package:"%Sys ...
【LinqPAD】Entity Framework 使用方式
LinqPAD】Entity Framework 使用方式繼上篇簡單介紹LINQPad 模式,接下來我們來看看如何使用Entity Framework。剛開始使用會比較難知道要選擇哪個做連線,這邊我們來看看三種連線方式 :
用 SQL 連線資料庫 (LINQ to SQL)
使用 Entity Framework Core 版本
使用 DLL 連線
以上三個都是 Entity Framework 的連線方式,這邊我們來看看如何使用。
用 SQL 連線資料庫 (LINQ to SQL)這東西是透過 SQL Server、SQL Azure、SQL CE 4.0 連線資料庫,這樣就可以直接使用 SQL 語法查詢資料庫。其他Azure、CE 我就不多做介紹了。
使用 DataBase 設定這東西通常是微軟自家產品快速建立資料庫,可以快速建立 OEM 。主要三個模式 :
一、單一資料庫有個 Specify new or existing database 選項可以指定其中一個做為連線資料庫。
二、指定資料庫檔案指定 mdf 檔案,這樣就可以直接連線到資料庫。
三、全部顯示選擇 Dis ...
【LinqPAD】Expression、Statement、Program 使用方式
Expression vs Statement vs ProgramLINQPad 有三種使用方式,分別是 Expression、Statement、Program,這三種方式的差異在於執行的方式不同,以下是三種方式的說明。
Expression這功能特性是只能執行一行程式碼,並且只能回傳一個值,無法執行多行程式碼,也無法使用變數。他是唯一一個是不用Dump() 也能看到結果的方式。下方範例用LINQPad 內建工具展示。
1Util.Cmd("dir")
可以直接將結果顯示在LINQPad 畫面上,也可以順便理解 LINQPad 新開的 Queries 是放在哪個路徑。
Statement(s)Expression 如果給他一個 ; 就是 Statement(s) 的方式。這功能可以完全活用 C# 的語法,可以使用變數、多行程式碼。簡單來說,這是一個無上層的程式碼執行方式 (example : net6.0 以上版本這類功能)。
這邊一樣使用剛才做法,如下圖 :
這個是完全無法 dump 出來上圖一樣的結果,需要再 dump 一次才能看到結果。
Progra ...
【Angular】利用一個 npm 資訊知道能不能用這裝套件
前言最近公司有讓我介紹 Angular 主題講解架構、使用指令之類的介紹,但我想到其實在創建專案其實要考慮套件使用時候,要先學會如何看一下這套件是否適合使用,所以我就來寫一篇文章來介紹如何看一下這套件是否適合使用。
一、npmnpm 眾人皆知,是一個 Node.js 的套件管理工具,但其實在網站上可以找得到 npm ,而且可以找到很多套件,而且可以看到這個套件的使用次數、版本、最後更新時間等等,所以我們可以透過這些資訊來判斷這個套件是否適合使用。
1-1 如何判斷套件有依賴性(Dependencies)npm 跟 nuget 其實一樣有個 Dependencies 的功能,可以看到這個套件有依賴哪些套件,這樣我們就可以知道這個套件是否有依賴其他套件,這樣我們就可以知道這個套件是否適合使用。從下面圖片可以知道這個套件有依賴哪些套件,下面範例只有 tslib。
1-2 如何判斷套件有被依賴者(Dependents)簡單來說 , Dependents 就是這個套件有被哪些套件依賴,這樣我們就可以知道這個套件是否有被其他套件使用,這樣我們就可以知道這個套件是否適合使用。像是這個範例很多套 ...