Kite Fly

 當UI 改變component 後, 是使用playwright mcp test 的 Healer 功能 讓他自動修復嗎? 是的，當 UI 改變 component 導致測試失敗時，正是使用 Playwright 內建的 Healer 功能來進行自動分析與修復。 Playwright Test Agents 的 Healer 運作機制 Playwright 內建的測試代理（Test Agents）包含 Planner、Generator 與 Healer 三個核心元件。當 UI 變動（例如修改了按鈕文字、更換了標籤或調整了 Selector）導致自動化測試崩潰時，Healer 會執行以下步驟 實作Playwright Test Agents Healer 修復功能 https://agile3uncles.com/2026/07/27/playwright-healer/

Playwright MCP (@playwright/mcp) • 主要用途：讓 AI 代理（AI Agent）直接驅動及互動真實的網頁瀏覽器。 • 運作方式：將瀏覽器的基本動作（如開啟網頁、點選按鈕、填寫表單、抓取文字）包裝成 MCP 工具。 • 適用場景：即時網頁自動化、瀏覽器操作、爬蟲與資料擷取，或讓 AI 幫忙手動探索網頁。 [1, 2] Playwright Test MCP • 主要用途：緊密結合專案中的 Playwright Test 測試框架，專門處理自動化測試的生命週期。 • 運作方式：提供測試規劃（Planner）、程式碼產生（Generator）以及自我修復與除錯（Healer）等高階測試指令與工具。 • 適用場景：根據需求文件自動產生測試案例、分析並修復失敗的測試腳本，適合整合進開發與測試流程 Playwright MCP 跟一般 Playwright 測試差在哪？ https://iambigd.tw/playwright-vibe-coding-ai-agent-testing-guide Browser MCP 跟 Playwright skill 最大的差別是「誰來控制瀏覽器」。 Browser MCP 是把瀏覽器變成 MCP Server，讓 Claude、Cursor 這類 AI agent 透過 MCP 協議直接下指令。AI 自己決定要點哪、輸入什麼，你不用寫腳本。它適合做探索、測試、自動化流程。 Playwright skill 則是 Claude Code 內建的工具，底層一樣用 Playwright，但它是「技能包」。你下指令讓 Claude 去寫或執行一段固定的 Playwright 腳本，更像你叫 AI 幫你寫 code 再跑。彈性低但穩定可控。 簡單記：MCP 是讓 AI 即時遙控瀏覽器，Playwright skill 是讓 AI 幫你寫好劇本再演。   d  

  ** 主旨： ** 感謝週三的諮詢說明 & 預祝新年快樂 先預祝您新年快樂。 感謝您週三撥冗 諮詢說明 。為了避免遺漏，我整理當天的諮詢重點作為筆記備份, 若有誤.再麻煩指教 1.       理解公司目前的績效考核，原則上仍是以員工的實際產出 (Output) 與品質 (Quality) 為主，因個案受傷程度不同，雖無統一的調整係數， ** 但感謝您特別說明，公司絕不會「單純因為公傷身分」而給予較差的考績評價，評核重點仍在於實際工作表現。 ** 2.       感謝您釐清，若因公傷導致需調整工作內容，正規流程可透過 ** 「職業醫學科醫生評估」 ** 建議，由公司協助原單位重新分配工作。雖然您有提醒 ** 辦公室作業在職務拆解與調配上有其難度 ** ，但我仍可依規定提出申請； ** 同時感謝您確認，此類經由醫生評估後的職務調整，並不會因此導致降職或影響分紅資格 ** 。 之後會評估個人身體狀況，如有需要會依此流程提出申請。 3.       針對與主管面談中，當我提及公傷期間考核公平性之疑慮時， ** 主管曾進一步詢問關於『是否考慮降職』 ** 一事，非常感謝您釐清 ** 公司對於職級調整（降職）有嚴謹的審核流程與事由規範，需經由 HR 簽核，並非由主管單方面決定 ** 。這點說明對我很重要，解除了我對於因公傷而可能影響職級的擔憂，後續我會專注於配合復健並在原職務上努力。 =>  對我在面談中提到對於「職級調整（降職）」的擔憂，感謝您說明**公司對於職級異動有嚴謹的審核流程與規範（需經 HR 簽核），並非單一部門或主管可隨意決定**, 且公司不能因為公傷而降職。這解除了我的疑慮，讓我能更專注於復健與工作上的產出。 4.          另外也有跟您提到，目前已與主管溝通過並初步談定 2026 年目標。主管口頭承諾 ** 將視我公傷治療期間的「實際情況」，彈性調整工作內容並安排優先順序，且會保持密切溝通 ** 。這部分我會依照您的建議，持續與主管對焦，確保工作產出與復健進度能取得平衡。 ...

 最暴力簡單的方式就是做 Shadow Test 與 A/B Test 不同，A/B Test 是將部份流到舊模型的流量部分流到新模型，然後比較兩者的結果如何；Shadow Test 是將所有流量在流到舊模型的時候同時流到新模型，但是模型的輸出與否不影響後續的行為 Shadow Testing（影子测试）是一种在生产环境中对比验证新旧系统行为一致性的重要测试方法。 它被广泛应用于系统迁移、架构重构、模型上线、A/B测试前的数据验证、灰度发布等场景，尤其在保障线上稳定性和数据正确性方面具有关键作用。 https://blog.csdn.net/tony2yy/article/details/147952261 https://ithelp.ithome.com.tw/m/articles/10318622

  透過 LLM 產生產品需求提示（Product Requirement Prompt，PRP） https://blog.csdn.net/lovechris00/article/details/152161337 本文将介绍context-engineering-intro项目中通过 PRP （ Product Requirements Prompt ，产品需求提示）实现代码审查自动化的方法，帮助团队轻松确保代码符合最佳  https://blog.csdn.net/gitblog_00428/article/details/153499291  

  Kiro 不同於過去大家熟悉的 AI 編碼助手如 GitHub Copilot 或 Amazon Q Developer，它不只是簡單地根據開發者輸入的提示生成程式碼，更深入整合整個軟體開發流程。從需求分析開始，Kiro 就能自動生成詳細的規格文件，幫助開發團隊將具體點子轉化成具體執行項目，接著，依據這些規格，Kiro 會建立完整的設計藍圖與任務清單，確保每一環節都有明確目標。  除了協助開發者不用程式碼開發產品，在實際編碼階段，Kiro 會不斷監控並自動更新文件，確保程式碼與規格文件、測試案例以及安全檢查同步，避免團隊因資訊不同步而產生錯誤。這種從需求到生產的全面支援，大幅提升團隊協作效率和軟體品質。  AWS 產品負責人 Nikhil Swaminathan 表示，Kiro 的最大優勢在於「讓原型程式碼順利進入生產系統」，同時自動處理測試、文件生成和性能優化等必要工作，讓開發者專注於核心功能的實現。 https://www.ckmates.com/index.php/front/ckmates/blog_page/106

  Lovable 是一款由 AI 驅動的 UI 設計平台，特色如下： 不需 Figma、美術背景，就能輕鬆設計頁面。 只要輸入需求指令，AI 就能幫你產出符合風格的 UI （推薦可搭配 ChatGPT 輔助撰寫）。 自動轉出 HTML、React 等前端程式碼，馬上就可使用。 https://hackmd.io/@my-sdgs/Hy31vnoIlg https://notesstartup.com/simple-lovable-tutorial/ 簡單來說，Lovable 是一個讓你可以用「說人話」的方式來創造網站或應用程式的平台。 你完全不用會寫程式碼，只要打字或開口說話，就可以做出一個真的能用的成品。 你只要輸入一段提示詞，告訴它你想做什麼，它就能幫你把整個網站的網頁都生成出來。如果覺得結果不夠好，只要再補充幾句話，它就能馬上改成你想要的樣子，超方便的！ 步驟 2：用我的「提示詞模板」打造理想網站 為了幫助你做出更棒的網站，我特別製作了一個「AI 做網站的提示詞模板」。 照著這個模板填寫，生成出來的網站成果，會比你隨意描述需求好蠻多的！ 提示詞模板： 提示詞 為了幫助你製作出理想的網站，我有製作了一個AI 做網站提示詞模板，照著填，生成出來的網站成果會比隨意描述需求好很多。 你可以點擊影片下方說明欄的連結到我的網站複製提示詞模板。 一、網站主題與目標受眾： 網站主題： 　請填寫你的網站主題 　例如：一家位於台北的日式拉麵店、一個專門介紹加密貨幣的部落格、一個展示攝影作品的個人作品集 目標受眾： 　請填寫你的目標受眾 　例如：喜歡日本料理的年輕人、對投資有興趣的初學者、需要攝影服務的潛在客戶 二、網站核心功能與特色： 核心功能： 　請填寫你網站最重要的 3-5 個核心功能 　例如：線上菜單、顧客評價、最新消息發布、作品分類展示、聯絡表單、線上預約 網站風格與特色： 　請填寫你希望網站呈現的風格與特色 　例如：簡約現代、溫暖舒適、專業可信賴、充滿創意與藝術感 三、網站內容與文案： 　請提供網站的主要文案、標題或關鍵資訊 　例如： 　　首頁標題：歡迎來到［你的品牌名稱］ 　　關於我們：［一段簡短的品牌介紹］ 　　服務項目：［列出你的主要服務或產品］ 　　聯絡方式：［你的地址、電話、Email］ 四、參考網站： 請提供一個你喜歡的參考網站連結 例如：請 AI...

  引導學員學習和小組討論, 開場和結尾, 透過課程內容和引導, 讓學員可以學到上課知識和加深印象,  知識CPR: Content Practice, Review,  =>20分鐘做一次 小組討論:1-2-4-All 實際案例代入 5.開場自介: 2真1假, 建立信任 1. 上課一開始: 利用黃金5分種 法則, 可先以1張圖片, 1個故事問她看到蛇摩 (與學員架接) (圖片引發學員動機, 讓她有心理準備.開口說話)   觀察圖片觀察, 看到甚麼?   這會影響什模事?   如果要預防相同事件發生, 該做什模事? (代入今天主題 & 小組討論 or 影片分享) 2. What? So What? Now What? 3.講師3P  Polish: 專業和經驗.    Preparation: 講師準備 Passion: 授課熱情 4.信任 =>餐與 => 分組=>練習=>回饋 5.內容給學員排序: OX 職場虐心: 低成就->不平衡 > 不溝通 > 不尊重 > 低報酬 6. 開場引導:  圖片引導,  圖片提問:2學伴,  2真1假,  立場表態, OX: 選擇比努力重要 問題處理技巧 7. 結尾:  KISS: Keep, Improve, Start, Stop 131+1: 三個學習重點, 1個未來實務應用. 1 個好奇提問 (重要!) 教學內目標是任務, 教學外目標是成長 不要擔心會一萬種踢法的人,  要害把一種踢法練一萬次的人 

  PromQL  是 Prometheus 監控系統內置的一種查詢語言，PromQL 允許你以靈活的方式選擇、聚合等其他方式轉換和計算時間序列數據，該語言僅用於讀取數據。可以說 PromQL 是我們學習 Prometheus 最困難也是最重要的部分，本章節我們將介紹 PromQL 的基礎知識、理論基礎，然後會深入了解更加高級的查詢模式。 與 SQL 查詢語言（SELECT * FROM ...）不同，PromQL 是一種嵌套的函數式語言，就是我們要把需要查找的數據描述成一組嵌套的表達式，每個表達式都會評估為一個中間值，每個中間值都會被用作它上層表達式中的參數，而查詢的最外層表達式表示你可以在表格、圖形中看到的最終返回值。 https://www.youtube.com/watch?v=FLT0d8fyhK4 https://www.youtube.com/watch?v=ZDDPJuMwUvs https://erhwenkuo.github.io/prometheus/promql/intro/#_4

  Karate 由Intuit作为开源工具发布。该工具旨在用于自动API测试，并具有使API测试变得轻而易举且实际上令人愉快的所有必需功能。 与需要大量编码的其他自动化API测试工具不同，即使只是做基本的东西，Karate开箱即用。您可以在不了解任何编程语言的情况下构建最复杂的请求 - 响应操作。您所要做的就是使用纯文本Gherkin样式编写要素文件。 因为Karate是一个完整的DSL并且位于Cucumber-JVM之上 ，所以你可以像任何标准的Java项目一样运行测试并生成报告，但是你不是编写Java代码，而是用一种用来处理HTTP，JSON的语言来编写测试。或XML简单易用。 虽然没有使用Karate的先决条件，但如果您对HTTP，JSON，XML，JsonPath以及XPath和JavaScript有基本的了解，它会有所帮助。 Karate 是一个集成 API 测试、模拟和性能测试的开源框架，它利用类似于 Gherkin 的语法（Given/When/Then）来编写易于理解的测试脚本。其核心架构基于 Java，并与 JUnit 结合使用，通过 Maven 或 Gradle 集成。 https://www.youtube.com/watch?v=0pv2qTB-YeY

MapStruct 在系統開發過程中，難免會遇到各類物件的轉換，如DB Entity物件轉換成領域物件 (Domain Object)或值物件 (Value Object)、領域物件、值物件轉換成 DTO物件，在物件的轉換過程中常伴隨著反覆的物件創建與設值，如果物件的欄位較多，就容易出現有些欄位設定遺漏，此時若沒有透過單元測試等手段驗證，就容易 造成在系統內部物件轉換或與外部系統溝通的傳遞過程中遺失資訊。 MapStruct可以處理上述提到的問題，簡化物件間轉換欄位映射 (mapping)過程。MapStruct採用annotation processor技術，在Java編譯時期自動生成對應 的Setter、Getter與Constructor等相關程式碼。 https://www.tpisoftware.com/tpu/articleDetails/2443 https://blog.csdn.net/u013066244/article/details/129823436 

  Note LLM 以Google Gemini 2.0為基礎、被譽為「最強AI筆記神器」的NotebookLM，你用過了嗎？不僅能生成摘要，還能產出Podcast形式的音訊！以下文章幫你一次整理NotebookLM的功能、使用方式與方案比較。 NotebookLM是什麼？ NotebookLM（Notebook Language Model）是由Google開發的AI筆記助理，專為研究與寫作設計。它能讀取使用者上傳的文件，根據內容生成摘要、回答問題，甚至提供相關資訊，幫助整理思路與加速寫作流程。同時，NotebookLM聲明，絕不會將個人資料用於模型訓練。 NotebookLM有哪些功能、亮點？ 生成摘要：上傳 PDF、網站、YouTube 影片、音訊檔案、Google文件或 Google簡報，NotebookLM就會運用Gemini 2.0的多模態理解能力生成摘要、分析資料。 即時分析資料：NotebookLM可以協助彙整所有上傳來源的內容，快速提供、分析資訊。 Audio Overview：透過Audio Overview功能，NotebookLM可以把筆記內容、研究資料轉換成Podcast形式的音訊檔案。 資料庫建立：NotebookLM能為每個研究資料、寫作內容進行整理，並歸納在專屬的筆記本當中，增加蒐集、檢索資料的效率。此外，NotebookLM也能根據你所提供的資料進行回應，而非僅透過預設的訓練資料提供回答。 NotebookLM如何使用？ 廣告 進入NotebookLM網站。 註冊與登入：用戶登入Google帳號後，即可將文件上傳至NotebookLM。 建立新筆記本：上傳純文字、PDF、Google文件、Google簡報、網站、音訊檔案或YouTube影片，AI會自動解析內容，提供摘要與重點標註。 互動式問答：用戶可以直接向 AI 提問，如「這份筆記的重點是什麼？」NotebookLM 會根據內容給出回答，甚至補充相關資訊。 整理與標籤分類：AI會根據內容自動生成標籤，幫助用戶快速分類與檢索。 https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94...

 淺談 Server-Sent Events 與 Server 互動 一般的 get/post request 都是基於 HTTP 的標準根據請求來回覆回應的，一旦回應完成連線就會中斷。但如果有些更複雜的需求需要讓後端發送訊息給前端，比較好的方式就是建立 websocket，讓 request 保持連線。不過有時候為了一個需求要建立 websocket 會有點麻煩。因此 Server-Sent Events 就是為了這種需求而誕生的。 Server-Sent Events 以下簡稱 SSE。若說 websocket 是雙向溝通的話，SSE 其實是單向溝通的，也就是說，一但連線建立之後，就只能接收 Server 端來的訊息。實際的使用情境例如： 上傳超大檔案需要通知 client 端上傳處理進度。 轉檔需要通知 client 端處理進度。 非同步的商業邏輯處理需要通知 client 端狀況。 從 Server 傳送訊息 要從 Server 傳送訊息也蠻簡單的，只要在 response 宣告 header 。 Content-Type: "text/event-stream" 建立好連線之後就可以接收 SSE 的訊息做後續的處理。 限制 SSE 的限制是 有限的連線數。 只能處理基本 text 的訊息， 不能自訂 custom header ，例如要傳 Authorization 就不行。這個問題其實蠻大的，因為通常會需要做這種需求都會需要驗證使用者登入狀態，用 header 來處理 auth。

  AOP(Aspect-oriented programming)剖面導向程式設計 一般我們在寫程式時，很常需要處理譬如錯誤紀錄、權限驗證，乃至於額外可能增加使用者查詢歷程等等，就以錯誤紀錄來說，一個方法(Function)要用Nlog進行錯誤紀錄，通常會是這樣子。 使用AOP架構好處多多，減少重工又可以讓你的程式碼更加簡單易懂，因為共用的邏輯抽離之後，就只需要專注於商業邏輯的撰寫，只是對於C#新手來說，可能門檻比較高，不過整體來說，專案若是套用了AOP架構後，整個大升級，不管幾百幾千的方法，如果要加上一堆共用基制的話，都不用怕 https://ithelp.ithome.com.tw/articles/10229664

  https://yunlzheng.gitbook.io/prometheus-book/part-iii-prometheus-shi-zhan/operator/what-is-prometheus-operator https://erhwenkuo.github.io/kubernetes/observability/metrics/kube-prometheus-stack/setup-prometheus-and-grafana-on-kubernetes/#_1 https://claire-chang.com/2022/12/16/prometheus-operator/ https://blog.amis.com/kubernetes-operators-prometheus-3584edd72275https://blog.amis.com/kubernetes-operators-prometheus-3584edd72275

  JS 動態型別 弱型別 TS 靜態型別 強型別 TS: 是 JavaScript 的一個超集，主要提供了型別系統和對 ES6 的支援，它由 Microsoft 開發. TypeScript 是 JavaScript 的超集，.js 檔案可以直接重新命名為 .ts 即可 缺點: 有一定的學習成本，需要理解介面（Interfaces）、泛型（Generics）、類別（Classes）、列舉型別（Enums）等前端工程師可能不是很熟悉的概念 typescript教學: https://medium.com/....../%E7%B6%B2%E9%A0%81%E5%B7%A5...... … https://willh.gitbook.io/....../int....../what-is-typescript (重要!!) https://hackmd.io/@Heidi-Liu/typescript Hello world 的TS程式: https://willh.gitbook.io/....../intro....../hello-typescript

 你可以用 Claude Desktop 或是其他的 MCP client 操作，並且 1.安裝 Playwright MCP – 讓 AI 控制瀏覽器 2.安裝 filesystem MCP – 讓 AI 讀寫你電腦的檔案 （這兩個 MCP 都是各自官方開發的，安全問題相對比較小, but still use at your own risk!） 所以例如你可以叫 AI 幫你讀網站，彙整你想要的資料，並寫到你的電腦。這還有幾個厲害的地方 1.講人話就好 2.你身為人類可以介入，可以共同操縱瀏覽器，可以跟 AI 來回對話達到你想要的 例如你中途手動登入，人腦證明你不是機器人 Playwright MCP Server: Installing and getting started in VS Code https://www.youtube.com/watch?v=4SyYaDTR_Uc&ab_channel=ExecuteAutomation https://ywctech.net/ml-ai/playwright-mcp-crawler/

  而微軟出了 Playwright MCP 以後，你就可以很方便地利用 AI 用他去操作網頁，不需要寫程式 所以例如你可以叫 AI 幫你讀網站，彙整你想要的資料，並寫到你的電腦。 https://www.youtube.com/watch?v=5knmhGep2o4&ab_channel=ExecuteAutomation Playwright MCP Server: Installing and getting started in VS Code https://www.youtube.com/watch?v=4SyYaDTR_Uc&ab_channel=ExecuteAutomation

  透過 Playwright 使用Cucumber BDD 風格和Gerkin 語法, 不須額外使用Cucumber JS .而是直接使用Playwright 優點 Playwright-BDD 是由 Vitaliy Potapov 开发的一个开源项目，它可以自动将 BDD 场景转换为 Playwright 测试 https://www.testwo.com/article/2060 https://blog.csdn.net/gitblog_00040/article/details/139820340

 使用chatgpt4结合playwright进行智能化ui自动化测试 1. ChatGPT 自動化生成 "簡易的"  Playwright 程式 今天发现有人推荐了一个使用 chatgpt4 生成 playwright 代码的测试工具BrowserGPT 原理分析 大致看了一下，执行的流程是这样的，代码在 这里 获取初始化的 url，打开 chrome 浏览器，跳转到这个 url 在命令行里启动 prompt，也就是给用户一个输入的 ui 初始化 openai 的 api 写个死循环，每次用户输入之后调用 doAction 函数 在 doAction 函数里简化当前页面的 dom 元素 将简化过的 dom 元素传给 chatgpt，让 gpt 根据 playwright 的示例生成代码 执行 chatgpt 生成的代码 一句话描述就是把当前的网页的 html 减肥一下，把页面的 dom 和用户的命令传给 ai，让 ai 生成 playwright 代码，最后执行 ai 生成的代码。 可能会遇到的问题 这个工具目前看来实用性是有限的，这是因为当前时间节点，也就是 2023 年 10 月份，ai 可能会存在下面的问题 输出不稳定。同样的提示词可能每次生成的代码是不稳定的，不过之前看到 openai 的 dalle 3 提示词洋洋千言似乎每次得到的结果都很稳定，估计后面的模型在输出稳定性上会有极大的提升，另外好的提示词也能提升输出的稳定性； 无法生成最新 api 的代码。playwright 的 api 变化很快，我记得半年前写的一些代码现在就可能跑不起来了，不过因为 gpt4 的训练内容并不是最新的，所以生成的代码可能是基于旧的 api，有点鸡肋。不过如果是生成 selenium 的代码的话可能实用性会更强一点，毕竟 se 的主要接口这些年都没怎么变过； https://playwright.itest.info/blog/playwright-and-chatgpt4/