如何透過playWright作整合測試

 

                  大家有沒有經驗，明明都寫完了程式，也都單元測試完了，但一上線就炸了，QA也都測試過了… 怎麼還是有問題，如何讓程式品質提升或讓RD就時間打怪呢… 決定就是你了【PlayWright】

前提大家都有安裝VS Code ，身為RD 這應該是必備的工具，就不多講述，如果沒安裝，直接下戴安裝即可 https://code.visualstudio.com/download

一、在擴充點選Playwright test for VSCode

二、在工具列中輸入

> install playwright 

預設值 會支援chromium / Firefox/ WebKit, 選擇OK 即可

三 呼叫command line : npx playwright codegen http://測址網址

自動會開啟瀏覽器，此時可以作操作畫面，右邊的視窗會自動錄下所有操作的行為

四 開始執行測試

將原本視窗內的自動產生的程式碼 拷貝一下

到tests\example.spec.ts 將原本的程式碼拿掉，貼上新的代碼即可

點選 左下的水瓶 à 點右箭頭，然後一切就自動化的執行你剛才所做的操作行為囉!!! 

在 ASP.NET Core 中建立 gRPC 用戶端與伺服器

 GRPC 是什麼?  有別於傳統的client 和 server 端的連線，而是持續性且高效能的連線， 連線上的架構是HTTP2 協定，使用Protocol Buffers 作為介面描述語言，連線模式，可以1 (SERVER) 對多 (CLIENT)，也可雙向溝通，而一般REST 連線只能作到單向構通

一、 建立GRPC的前置作業

先安裝GRPC的專案， 如果畫面上沒有出現asp.net Core gRPC的服務時，請搜尋GRPC

選擇asp.net Core gRPC服務

按下一步，就完成了…   建立GRPC Server端

二、建立GRPC Server

Protos/greet.proto：會定義 `Greeter` gRPC，並會用來產生 gRPC 伺服器協定

以下是範例:  

syntax = "proto3";  option csharp_namespace = "GrpcService1";  package greet;   // server的名稱為 Greeter service Greeter {   // Sends a greeting   rpc SayHello (HelloRequest) returns (HelloReply); }   // The request 參數 name message HelloRequest {   string name = 1; }  // The response 回傳 message  message HelloReply {   string message = 1; }

三、建立GRPC Client

這用於client 與server端 的協定，所以clint端也需要相同的.proto, 所以從server端的 Protos/greet.proto copy一份到client端 Protos路徑下

以下是client的內容 ，但與server端略有不同，

選擇.proto 按下右鍵，在 gprc stub Classes 選擇 client Only

syntax = "proto3";  option csharp_namespace = "GrpcGreeterClient"; //要自已設定clientOnly  package greet;   // 跟server端的server名稱一致 service Greeter {   // Sends a greeting   rpc SayHello (HelloRequest) returns (HelloReply); }   // The request message containing the user's name. message HelloRequest {   string name = 1; }   // The response message containing the greetings. message HelloReply {   string message = 1; }

四、執行結果

server 端的執行檔

client 端的執行檔

VUE2 如何監聽DIV中的Scroll 事件

最近的案子是PO要求UI的DIV 要有捲軸，而且要使用者拉Scroll拉到底，才會讓下面checkbox 可以讓使用打勾同意，目的就是要讓使用者強迫看完整篇文章後，才能關閉這視窗… 呵呵，好喔，我們再看vue要如何做到

一、建立DIV 要有捲軸的畫面

 要加上@scroll就可以監聽div內的schroll事件了喔~ 對就是這麼簡單!!!!，如果網有眼尖發現為何有@@小老鼠，因為我用asp.net MVC 所以要再多一個@

<div id="PupupWindow" class="dialogbackground">     <div class="PupupContent">         <div class="panel panel-info">             <div class="panel-heading popupsubject">             </div>             <div class="panel-body">                 <div contenteditable='true' class="scroll-div" @@scroll="handleBlScroll">                     HELLO TEST ABCDE1<br />                     HELLO TEST ABCDE2<br />                     HELLO TEST ABCDE3<br />                     HELLO TEST ABCDE4<br />                     HELLO TEST ABCDE5<br />                     HELLO TEST ABCDE6<br />                     HELLO TEST ABCDE7<br />                     HELLO TEST ABCDE8<br />                     HELLO TEST ABCDE9<br />                     HELLO TEST ABCDE10<br />                     HELLO TEST ABCDE11<br />                     HELLO TEST ABCDE12<br />                     HELLO TEST ABCDE13<br />                     HELLO TEST ABCDE14<br />                     HELLO TEST ABCDE15<br />                     HELLO TEST ABCDE16<br />                 </div>                                         </div>                 <div class="panel-footer text-center">                     <input type="checkbox" class="form-control" v-bind:disabled="!checkAgree" />同意                     <button id="popup-check-button" class="btn btn-primary btn-lg">確認</button>                 </div>             </div>     </div> </div>

 

二、建立監聽的事件

Index.Js

var DefaultPage = new Vue({     el: '#app',     filters: {  },     mixins: [Global],     data: { checkAgree: false }, methods: {   handleBlScroll(e) {                       if (e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight) { // 碰到schroll的底                 this.checkAgree = true;             } else {                 this.checkAgree = false;             }         } })

測試畫面如下: