「Katalon Recorder」簡化測試腳本撰寫的工具

-

一、介紹

「Katalon Recorder」是一款錄製 Web UI 測試工具，安裝於 Chrome、FireFox 瀏覽器。
Katalon Recorder 錄製瀏覽器的操作過程，並可產生 C#, Java, Python 的測試原始碼，讓工程師更易撰寫 WEB UI 測試。
此文章將介紹使用 Katalon Recorder 錄製腳本，並把腳本移至 Visual Studio 2019 做單元測試。

二、腳本內容

開啟 Google 搜尋關鍵字 測試 ，檢視第二筆搜尋結果的描述是否為 「這是一個根據弗洛伊德焦慮類型理論…」。

三、Nuget 套件

  1. MSTest.TestAdapter ( 測試專案預設會安裝 )
  2. MSTest.TestFramework ( 測試專案預設會安裝 )
  3. Selenium.WebDriver
  4. Selenium.WebDriver.ChromeDriver

四、教學步驟

圖一、安裝套件。

圖二、Chrome 瀏覽器安裝 Katalon Recorder。

圖三、開啟 Katalon Recorder ( 注意右上角的 ICON )

圖四、開始錄製腳本

圖五、操作瀏覽器(此時 Katalon Recorder 就會錄製腳本)

圖六、停止錄製

圖七、產生 C# 程式碼

圖八、將程式碼貼到 測試專案

圖九、將 FirefoxDriver 改成 ChromeDriver，讓單元測試使用 Chrome 瀏覽器。

圖十、執行 測試。

圖十一、測試結果。

四、相關連結

  1. Selenium 前端 UI 自動化測試、爬蟲程式 最佳利器

五、參考

  1. Katalon Recorder
  2. Katalon Recorder 下載 ( Chrome 擴充功能 )

留言

張貼留言

這個網誌中的熱門文章

「綠界(Ecpay)」金流介接教學

-
圖片
一、介紹 綠界科技Ecpay 是第三方支付，提供金流、信用卡代收代付的服務。 二、開發工具 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、綠界測試資訊 此教學只提供綠界測試環境，正式環境請參考 完整版-全方位金流API技術文件 1. 測試後台 網址： https://vendor-stage.ecpay.com.tw 特店編號：2000132 廠商管理後台登入帳號：stagetest1234 廠商管理後台登入密碼：test1234 身分證件末四碼/統一編號：53538851 HashKey：5294y06JbISpM5x9 HashIV：v77hoKGq4kWxNNIS 2. 測試信用卡 卡號：4311-9522-2222-2222 安全碼：222 信用卡測試有效月/年：MM/YYYY 值請大於現在當下時間的月/年 四、登入綠界測試後台 圖、開啟 https://vendor-stage.ecpay.com.tw ，輸入測試帳號 stagetest1234 ，按下 繼續 圖、輸入測試帳號、密碼後，在按 登入 圖、按 一般訂單查詢 ，按 全方位金流訂單 ，即可查詢 訂單資訊 五、範例程式碼 C# MVC的範例，有 產生訂單、取得訂單資訊、取得虛擬帳號 …等功能。 /// <summary> /// MVC Controller /// </summary> public class EcpayController : Controller { /// <summary> /// 取得付款資訊 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult PayInfo(string id) { var cache = MemoryCache.Default; var cacheData = cache.Get(id);
閱讀完整內容

使用「NLog」來記錄應用程式的大小事吧

-
圖片
一、介紹 NLog 是 .net 下的日誌套件，因為只要一句程式碼即可紀錄日誌，因此筆者常使用它記錄應用系統的錯誤、資訊…等。 二、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 三、 Nuget 安裝套件 NLog NLog.Config NLog.Schema 圖、套件清單 四、操作步驟 圖、修改 NLog.config 的 target 、 logger 元素 NLog.config 設定 < targets > < target xsi:type = "File" name = "f" fileName = "${basedir}/logs/${shortdate}.log" layout = "${longdate} ${uppercase:${level}} ${message}" /> </ targets > < rules > < logger name = "*" minlevel = "Debug" writeTo = "f" /> </ rules > 圖、使用 nlog 原始碼 c# public void LogTest() { var log = LogManager.GetCurrentClassLogger(); log.Info($"Test"); } 圖、執行後結果 五、相關連結 「NLog」與「Sql Server」資料庫的完美搭配 六、參考 NLog Tutorial NLog Nuget
閱讀完整內容

「Selenium」前端 UI 自動化測試、爬蟲程式 最佳利器

-
圖片
一、介紹 「Selenium」 讓瀏覽器自動化的工具，可運用於爬蟲程式、前端 UI 自動化測試、Web 應用程式管理..等，支援多種語言如 C#，Java，Perl，PHP，Python..等。 範例程式將介紹如何使用 C# 語言運用 Selenium 撰寫 自動載圖程式 (簡易爬蟲)，讓應用程式開啟瀏覽器，前往 Google 圖片 ，下載 5 張 JPEG 圖檔。 二、 Nuget 套件 Selenium.WebDriver Selenium.WebDriver.ChromeDriver 三、教學步驟 圖一、安裝 Selenium 套件 。 圖二、貼上範例程式 var driver = new ChromeDriver(); //瀏覽器 轉址至 Google圖片 driver.Url = @"https://www.google.com.tw/imghp?hl=zh-TW"; //輸入關鍵字 "Selenium" var searchInput = driver.FindElementByCssSelector(@".gLFyf"); searchInput.SendKeys("Selenium"); //按下 Enter searchInput.SendKeys(Keys.Enter); //抓取圖片清單 var imgTags = driver.FindElementsByTagName("img").ToList(); //取得 5張 jpeg 圖片 var images = imgTags.Select(x => x.GetAttribute("src")).Where(x => x!=null && x.StartsWith("data:image/jpeg;base64,")).Take(5).ToList(); //下載圖片 foreach(var image in images) { byte[] bytes = Convert.FromBase64String(image.Replace("data:image/jpe
閱讀完整內容

使用「LINE Messaging API」發送 line 訊息

-
圖片
一、介紹 LINE 是由LINE株式會社所開發的即時通訊平台，也是目前台灣目前最高使用率的社群平台。 二、登入 LINE console 圖、打開瀏覽器，進到 LINE Developers Console 登入頁 三、建立 Provider 和 Channel 圖、按下 Create ，輸入 Provider name ，再按下 Create 圖、按下 Create a Message API Channel 圖、輸入 Channel name 圖、Channel 資訊 四、webhook 每當LINE用戶加您的 Channel 為好友或是發送訊息，LINE平台透過 HTTP POST 發送 webhook 事件資訊 至您 LINE Developers Console 中所指定的 webhook URL 。 圖、點 Messaging API ，往下拉即可看到 webhook 相關設定 webhook 事件資訊 webhook 事件資訊為JSON格式的資料 點 webhook 的 Verify 按鈕，則會收到如下格式的 webhook 事件資訊。 圖、Verify 按鈕 {“events”:[],“destination”:“XXX”} 被加入好友，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“follow”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”}],“destination”:“XXX”} 其中 userId 為 加入您好友的用戶ID，此ID會使用於發送訊息。 發送訊息時，則會收到如下格式的 webhook 事件資訊。 {“events”:[{“type”:“message”,“replyToken”:“XXX”,“source”:{“userId”:“XXX”,“type”:“user”},“timestamp”:XXX,“mode”:“active”,“message”:{“type”:“sticker”,“id”:“XXX”,“stickerId”:“XXX”,“packageId”:“XXX”,“stic
閱讀完整內容

使用「Line-Notify」發送 line 訊息

-
圖片
一、介紹 LINE 是由LINE株式會社所開發的即時通訊平台，也是目前台灣目前最高使用率的社群平台。 二、操作步驟 圖、打開瀏覽器，進到 LINE Notify 登入頁 圖、輸入 帳號 、 密碼 圖、進入 個人管理頁面 圖、選擇 透過1對1聊天透過 Notify的通知 圖、複製 權杖 圖、複製 底下的原始碼 原始碼 using (var wc = new WebClient()) { var bearer = $"你的權杖"; wc.Encoding = Encoding.UTF8; wc.Headers.Add("Content-Type", "application/x-www-form-urlencoded"); wc.Headers.Add("Authorization", $"Bearer {bearer}"); var nv = new NameValueCollection(); nv["message"] = "Test"; var bResult = wc.UploadValues($"https://notify-api.line.me/api/notify", nv); var res = Encoding.UTF8.GetString(bResult); } 圖、執行結果 三、參考 LINE Notify 登入頁 LINE notify api 使用「Visual Studio 2019」建置 主控台 Console 應用程式
閱讀完整內容

使用 Visual Studio 2019 實作「RESTful API」

-
圖片
一、介紹 REST 是Roy Thomas Fielding博士於2000年博士論文提出的一種軟體架構風格，目的是讓不同軟體、程式於網路互相傳遞資訊。因為它是一種風格而不是規範，依據筆者的經驗會依照當時的專案或公司規定而決定是否完全遵守。 二、專案架構 圖、Visual Studio 2019 專案架構 三、常用的 HTTP Method 代表用意 GET 讀取 PUT 更新 DELETE 刪除 POST 新增 四、RESTful 路由應用 五、使用 Visual Studio 2019 建置 RESTful API 圖、修改 WebApiConfig.cs 原始碼(C#) public static class WebApiConfig { public static void Register(HttpConfiguration config) { // 針對 JSON 資料使用 camel 案例。 config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver(); // Web API 設定和服務 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == &quo
閱讀完整內容

「Chrome Headless」隱藏瀏覽器的介面，讓爬蟲程式偷偷的執行

-
圖片
一、介紹 延伸之前的 Selenium 的文章，此篇將介紹如何使用 Chrome Headless 搭配 Selenium 的 Hide Command ，讓爬蟲程式在看不到的情況下執行。 二、 Nuget 套件 Selenium.WebDriver Selenium.WebDriver.ChromeDriver 三、教學步驟 圖一、安裝 Selenium 套件 。 圖二、貼上範例程式 //Chrome headless 參數設定 var chromeOptions = new ChromeOptions(); chromeOptions.AddArguments("headless"); //啟用 Selenium Hide Command var driverService = ChromeDriverService.CreateDefaultService(); driverService.HideCommandPromptWindow = true; //建置 Chrome Driver var driver = new ChromeDriver(driverService, chromeOptions); //瀏覽器 轉址至 Google圖片 driver.Url = @"https://www.google.com.tw/imghp?hl=zh-TW"; //輸入關鍵字 "Selenium" var searchInput = driver.FindElementByCssSelector(@".gLFyf"); searchInput.SendKeys("Selenium"); //按下 Enter searchInput.SendKeys(OpenQA.Selenium.Keys.Enter); //抓取圖片清單 var imgTags = driver.FindElementsByTagName("img").ToList(); //取得 5張 jpeg 圖片 var images = imgTags.Select(x => x.GetAttribute("s
閱讀完整內容

好用的資料庫管理工具「SQL Server 資料庫專案」

-
圖片
一、前言 專案隨著時間推進，維護的過程中會不斷的增加資料表、修改資料表的結構…等，以前筆者習慣把資料庫修改歷程 寫成 Sql，但使用了 SQL Server 資料庫專案 就不用這麼麻煩的記錄修改歷程的 Sql。 二、開發環境 整合開發環境：Visual Studio 2019 三、運用情境 圖、兩個資料庫 Test 、 Test1 ，要把 Test 的資料庫結構更新到 Test1 四、建置資料庫專案 圖、建議一個新專案 > 選擇 SQL Server 資料庫專案 圖、輸入相關資訊 五、更新資料庫 圖、 SQL Server 資料庫專案 滑鼠右鍵 > 結構描述比較 > 按下 切換來源和目標 圖、按下 選取來源 圖、按下 選取連線 圖、輸入相關資訊，選擇 來源資料庫 ，以情境來說就是 資料庫 Test 圖、按下 比較 圖、按下 更新 圖、按下 切換來源和目標 圖、按下 選取目標 圖、輸入相關資訊，選擇 目標資料庫 ，以情境來說就是 資料庫 Test1 圖、按下 比較 圖、按下 更新 圖、 更新 完成 圖、執行結果 六、相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 使用「CsvHelper」讀取、寫入 CSV 檔案 好用的資料庫管理工具「SQL Server 資料庫專案」 「NLog」與「Sql Server」資料庫的完美搭配 使用「ADO.NET」 進行資料庫的讀取、新增、修改、刪除的操作 使用「Entity Framework Tools」建立資料庫關聯模型 https://weitechshare.blogspot.com/2020/12/code-first.html 使用「SqlBulkCopy」進行大量資料寫入 「linqkit」動態組裝 LINQ 條件的好用套件 「Dapper」一個高效率輕量型 ORM 套件
閱讀完整內容