「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 擴充功能 )

留言

張貼留言

這個網誌中的熱門文章

使用「Visual Studio 2019」建置 Windows 服務

-
圖片
一、開發環境 整合開發環境：Visual Studio 2019 語言：C# .net framework：4.6.2 二、建置 Windows 服務專案 圖、開啟 Visual Studio 2019 ，點 建立新的專案 圖、選擇 Windows 服務(.net framework) 圖、輸入相關資訊 圖、選擇 Service1.cs > 滑鼠右鍵 > 檢視原始碼，即可看到 Windows 服務 起初的原始碼 圖、對 專案 > 滑鼠右鍵 > 重建，即可在 bin 資料夾底下見到建置好的結果 三、登錄 Windows 服務 圖、輸入登錄指令 指令 sc create 服務名稱 binpath=D:\服務路徑\XXX.exe start=auto 圖、Windows 服務畫面即可看到剛剛的服務 四、相關連結 使用「SC」指令 登錄、刪除 Windows 服務 五、參考 sc 指令
閱讀完整內容

「Visual Studio Code」安裝與擴充工具安裝

-
圖片
一、介紹 Visual Studio Code 是微軟開發且跨平台的原始碼編輯器。 二、 安裝 進入 「官網」 ，點擊 Download 安裝 下載的檔案 選 我同意 ，再按 下一步 選 建立桌面圖示 ，再按 下一步 按 安裝 安裝中 按 完成 三、擴充套件安裝       1. 按 紅色框起來的 extions 圖示       2. 搜尋 HTML ，安裝 HTML Snippets       3.  安裝 HTML Preview       4.  搜尋 Vetur ，安裝 Vetur 四、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 五、參考連結 Visual Studio Code
閱讀完整內容

使用「Vue Cli」建立、打包、安裝 專案

-
圖片
一、介紹 Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。 二、建置新專案 建立新資料夾 開啟 命令提示字元 切換至 新建立的資料夾 下指令 vue create test 建立 vue 專案 專案名稱 只能是小寫英文、底線、 vue create 專案名稱 選擇 Default 剛建立好的 test 專案 三、啟動新專案 切換至 新建置的專案 下指令 yarn serve yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 四、打包新專案 切換至 新建置的專案 選擇 public 、 src 、 babel.config.js 、 package.json 、 README.md 後，加壓縮檔案 此檔案即可傳送給其他人使用 五、安裝 打包好的新專案 解壓縮檔案 開啟 命令提示字元 切換至 解壓縮檔案的位置 執行指令 yarn install 安裝相關的套件 yarn install 執行指令 yarn serve 運行專案 yarn serve 打開 瀏覽器 ，輸入網址 http://localhost:8080/ ，即可看到運行的網站 六、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaScript 能在伺服器端執行的環境 「node.js」 使用「Vue Cli」建立、打包、安裝 專案 七、參考 安裝 node.js v14.15.1 yarn node.js vue cli
閱讀完整內容

在Visual Studio 2019 使用 「GitHub」

-
圖片
安裝 圖、延伸模組 > 管理延伸模組 圖、下載 GitHub Extension For Visual Studio 圖、按下 關閉 圖、關閉 Visual Studio 2019 圖、按下 Modify 圖、安裝完成 操作步驟 圖、Git 變更 > 複製儲存庫 圖、選擇 GitHubs 圖、使用你的瀏覽器登入 圖、輸入 帳號、密碼 圖、選擇存放庫 > 選擇路徑 > 複製 圖、複製存放庫 圖、結果 相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 「Git」基礎操作 「Git」安裝 在Visual Studio 2019 使用 Subversion 的客服端工具「AnkhSVN2019」 參考 github
閱讀完整內容

如何傳送訊息至「Teams」的 Channel

-
圖片
一、介紹 Microsoft Teams 為微軟旗下的通訊軟體，它整合聊天、視訊、Office 365、Execel、Word、OneNote…等功能。 比爾蓋茲提出 Skype for Business 的想法，因此有了 Microsoft Teams 這個產品，為了與 Slack…等商用軟體相抗衡。 二、 Nuget 安裝 Newtonsoft.Json 12.0.3 三、Incoming WebHook 設定 訊息可藉由 Teams 的應用程式 Incoming WebHook 傳輸訊息 圖、點擊 … > 搜尋 Incoming WebHook > 點擊 Incoming WebHook 圖、點擊 新增至團隊 圖、選擇 你的頻道 > 點擊 設定連結器 圖、輸入 WebHook 名稱 > 點擊 建立 圖、複製 WebHook Url > 點擊 完成 四、操作步驟 圖、貼上範例碼，修改成你的 WebHook Url，執行後即可在 Teams 看到 測試訊息 的訊息 範例碼 using (var wc = new WebClient()) { wc.Headers.Add("Content-Type", "application/json"); var data = new { text = "測試訊息" }; var jsonStr = JsonConvert.SerializeObject(data); var bytes = System.Text.Encoding.UTF8.GetBytes(jsonStr); var res = wc.UploadData("https://你的 WebHook Url", bytes); Console.WriteLine(System.Text.Encoding.UTF8.GetString(res)); } 圖、執行結果 五、相關連結 使用「Visual Studio 2019」建置 主控台 Console 應用程式 使用「LINE Messaging API」發送 line 訊息 ...
閱讀完整內容

快速開發 Vue.js 工具「Vue CLI」安裝教學

-
圖片
一、介紹 Vue CLI 是由 Vue.js 團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊工具。 二、安裝 Vue CLI 安裝需透過 npm 或 yarn 套件管理工具來安裝，筆者會一同介紹 node.js 、 yarn 的安裝。 安裝步驟如下 node.js ( 會一同安裝 npm ) yarn ( 透過 npm 安裝 ) vue cli ( 透過 yarn 安裝 ) node.js 安裝 筆者使用環境為 windows 10 、 node.js(14.15.1) ，因此筆者會介紹在 windows 10 安裝 v14.15.1 ，詳細安裝可參考 文章 進入 https://nodejs.org/download/release/v14.15.1/ 依據作業系統選擇不同版本 依照 作業系統 建議選擇 IOS 選擇 副檔名為 pkg 的檔案 Windows 選擇 副檔名為 msi 的檔案 依照 CPU 位元 建議選擇 64位元 選 x64 32位元 選 x86 安裝 node.js (一同安裝 npm ) 開起 cmd 下指令 node -v 、 node -v 檢查是否安裝成功 yarn 安裝 快速安裝套件的管理工具 yarn ，詳細參考 文章 開起 cmd 下指令，即可安裝 yarn npm install --global yarn 重開 cmd 下指令 yarn -v 檢查是否安裝成功 vue cli 安裝 安裝好 node.js 、 npm 、 yarn 後，就可以安裝 Vue Cli 開起 cmd 下指令，即可安裝 Vue Cli yarn global add @vue/cli 重開 cmd 下指令 vue --version 檢查是否安裝成功 三、相關連結 「Visual Studio Code」安裝與擴充工具安裝 快速開發 Vue.js 工具「Vue CLI」安裝教學 快速的套件管理工具「Yarn」 讓 JavaS...
閱讀完整內容

使用「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...
閱讀完整內容

在Visual Studio 2019 使用 Subversion 的客服端工具「AnkhSVN2019」

-
圖片
前言 使用 Subversion 版控，大多數是使用客服端工具 TortoiseSVN ，如果開發人員的IDE 是使用 Visual Studio 2019 則可考慮使用 AnkhSVN2019 。 安裝 圖、延伸模組 > 管理延伸模組 圖、下載 AnkhSVN2019 圖、按下 關閉 圖、關閉 Visual Studio 2019 圖、安裝 圖、按下 Modify 操作步驟 圖、檢視 > Repository Explorer 圖、新增 SVN Server 圖、輸入網址 圖、按下 Checkout from Subversion 圖、輸入 To Path 圖、下載中 圖、開啟資料夾 > 按下 XXX.sln 圖、工具 > 選項 圖、Source Control > 選擇 AnkhSVN2019 圖、跑出 Pending Changes 圖、修改檔案 > 滑鼠右鍵 > Open in Visual Studio 圖、結果 相關連結 使用「Visual Studio 2019」建置一個有 Mvc 和 Web Api 架構的網站 「Git」基礎操作 「Git」安裝 參考 subversion tortoisesvn AnkhSVN2019
閱讀完整內容