# [Playwright] 測試專案建置步驟以及常見問題 ## :book: 參考文件與影片 1. 參考影片: https://www.youtube.com/watch?v=lJa3YlUliEs&list=PLgcib5VnPRGoErxNeYj5LQECYqdfCQbSl&index=30 2. 官方文件:https://playwright.dev/dotnet/docs/intro ## :feet: 設定步驟 :::success #### 第一次建立測試專案 ::: 1. 建立NTest資料夾: ``` dotnet new nunit -n BlazorPlaywright.Test -o Test ``` 2. 加入NTest專案檔(執行後VS會跳出「重新載入」 視窗，重新載入後可看到NTest專案): ``` dotnet sln add .\Test\BlazorPlaywright.Test.csproj ``` 3. 路徑移到Test專案: ``` cd Test ``` 4. 加入NUnit套件: ``` dotnet add package Microsoft.Playwright.NUnit ``` :exclamation: 若Playwright專案和要測試的專案.net 版本不同，兩個專案須分別安裝NUnit套件 :exclamation: 加入Playwright專案後，若Playwright專案中的AssemblyInfo.cs內的屬性和原專案內的屬性有重複的問題，可將Playwright專案的AssemblyInfo.cs註解 5. 建置一次: ``` dotnet build ``` 6. 執行playwright.ps1檔，安裝瀏覽器(Chrome、Firefox、Webkit): ``` .\bin\Debug\net8.0\playwright.ps1 install ``` :::success #### 用Codegen自動產生測試程式碼 ::: 1. 啟動要測試的專案，並記錄其網址: * 先Target到Test專案 * http://localhost:5001為要測試的專案的網址 ``` .\bin\Debug\net8.0\playwright.ps1 codegen http://localhost:5001 ``` 2. 將自動產生的測試程式複製，放到測試專案中。 :::success #### 執行測試程式 ::: 1. 跑測試的時候顯示瀏覽器(預設不會開啟): ``` dotnet test -- Playwright.LaunchOptions.Headless=false ``` 2. 執行特定的測試程式並顯示瀏覽器(Headless要放在--filter後面，才會只跑特定測試程式) ``` dotnet test --filter "ExampleTest" -- Playwright.LaunchOptions.Headless=false ``` :::success #### 執行TraceViewer檔案 ::: ``` bin/Debug/net8.0/playwright.ps1 show-trace "trace檔案本機路徑" ``` ## :question: 常見問題 Q1. Playwright抓input的時候是根據input name，但Syncfusion input的name是動態的 A1: SfTextBox加上HtmlAttributes="@(new Dictionary<string, object> { { "name", "textbox-名稱" } })" Q2: 如何建立還原資料庫機制，讓每次測試完之後不用Restore資料庫 A2: 建立資料庫快照，備份和還原的速度都相當快 > https://learn.microsoft.com/zh-tw/sql/relational-databases/databases/create-a-database-snapshot-transact-sql?view=sql-server-ver16