在.NET程式中整合微軟的Playwright，使用 Playwright 的最佳實踐和技巧

来源:https://www.cnblogs.com/wuhuacong/p/18055896
-Advertisement-
Play Games

Playwright 是一個由 Microsoft 開發的開源工具，用於自動化 Web 瀏覽器的測試和操作。它提供了一種跨瀏覽器、跨平臺的自動化解決方案，可以在 Chromium、Firefox 和 WebKit（Safari）等多種瀏覽器上進行測試和操作。本篇隨筆介紹Playwright的一些特點... ...


Playwright 是一個由 Microsoft 開發的開源工具，用於自動化 Web 瀏覽器的測試和操作。它提供了一種跨瀏覽器、跨平臺的自動化解決方案，可以在 Chromium、Firefox 和 WebKit（Safari）等多種瀏覽器上進行測試和操作。本篇隨筆介紹Playwright的一些特點，以及能夠完成的工作，並總結一些使用 Playwright 的最佳實踐和技巧供參考。

1）使用 Playwright 的好處和優勢

使用 Playwright 帶來的好處和優勢包括：

1. 跨瀏覽器支持

         Playwright 支持在多種瀏覽器上運行測試，包括 Chromium、Firefox 和 WebKit（Safari），確保您的應用程式在不同瀏覽器中的相容性。這使得您可以在單個測試套件中覆蓋多種瀏覽器，減少了測試的重覆工作。

2. 跨平臺支持

         Playwright 提供了適用於 Windows、Mac 和 Linux 的 API，使您可以在不同操作系統上運行相同的測試腳本。這使得開發團隊可以更加靈活地協作和共用測試代碼，無需擔心平臺差異帶來的問題。

3. 多語言支持

         Playwright 支持多種編程語言，包括 JavaScript、TypeScript、Python、C# 和 Java 等，適應不同開發團隊的需求。這使得開發人員可以使用他們最熟悉的語言編寫測試腳本，提高了生產力和代碼質量。

4. 自動化測試

         Playwright 可以模擬用戶在瀏覽器中的操作，如點擊、輸入、滾動等，用於編寫端到端的自動化測試腳本。它提供了豐富的 API 和工具，可以輕鬆地模擬複雜的用戶行為，幫助您發現和修複應用程式中的問題。

5. 可靠性和穩定性

         Playwright 以其穩定性和可靠性而聞名，可以確保測試腳本的穩定運行，減少了誤報和虛假警報的發生。它提供了強大的錯誤處理和調試功能，可以幫助您快速定位和解決測試中的問題。

6. 社區和生態系統

         Playwright 擁有一個活躍的社區和豐富的生態系統，提供了大量的文檔、示例代碼、教程和社區支持。您可以從社區中獲取有價值的反饋和建議，加速學習和問題解決的過程。

Playwright 主要可以用於以下方面的工作：

  1. 自動化測試： Playwright 可以用於編寫自動化測試腳本，對 Web 應用程式進行功能測試、回歸測試、端到端測試等。

  2. 界面錄製和回放： 儘管 Playwright 本身不提供界面錄製和回放的功能，但你可以利用它的 API 記錄用戶的操作，並將其轉換為自動化測試腳本。

  3. 性能測試： 使用 Playwright，你可以模擬不同網路條件和設備環境下的用戶操作，評估 Web 應用程式的性能和穩定性。

  4. Web 數據採集： 你可以編寫腳本來訪問網站並提取所需的數據，比如抓取商品信息、新聞文章、股票數據等。

  5. 表單填寫和提交： 你可以使用 Playwright 來模擬用戶在網頁中填寫表單並提交，比如註冊、登錄、訂閱等操作。

  6. 頁面截圖和視頻錄製： 你可以使用 Playwright 來捕獲頁面的截圖或者錄製頁面操作的視頻，用於測試報告、可視化展示等。

  7. 文件上傳和下載： Playwright 可以模擬用戶上傳文件和下載文件的操作，用於測試文件上傳功能或者下載資源。

  8. 多瀏覽器測試： Playwright 支持在多種瀏覽器（Chromium、Firefox、WebKit）上運行測試，確保 Web 應用程式在不同瀏覽器中的相容性和一致性。

Playwright 是一個功能強大、靈活且易於使用的工具，可以幫助開發人員和測試人員提高效率，確保 Web 應用程式的質量和穩定性。你可以根據具體的需求和場景，使用 Playwright 來實現各種自動化處理和測試任務。

微軟官方的線上介紹：https://playwright.dev/dotnet/docs/intro

GitHub地址：https://github.com/microsoft/playwright

.NET介面的GitHub地址：https://github.com/microsoft/playwright-dotnet

下麵介紹一些使用 Playwright 的最佳實踐和技巧例子代碼。

 

1、如何進行模擬表單的交互操作

使用 Playwright 進行模擬表單的交互操作非常簡單，你可以使用 Playwright 提供的 API 來模擬用戶在瀏覽器中的行為，比如填寫表單、點擊按鈕等。以下是一些實際的示例代碼，演示瞭如何使用 Playwright 來與表單進行交互操作：

下麵代碼例子，展示瞭如何使用 Playwright 在瀏覽器中填寫表單、選擇下拉框中的選項，並提交表單。

1）填寫表單並提交

using Microsoft.Playwright;
using System;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        var playwright = await Playwright.CreateAsync();
        var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });
        var page = await browser.NewPageAsync();

        await page.GotoAsync("https://example.com");

        // 填寫表單
        await page.FillAsync("input[name='username']", "myusername");
        await page.FillAsync("input[name='password']", "mypassword");

        // 提交表單
        await page.ClickAsync("button[type='submit']");

        // 等待頁面跳轉
        await page.WaitForNavigationAsync();

        Console.WriteLine("Form submitted!");

        await browser.CloseAsync();
    }
}

 

2）選擇下拉框中的選項

using Microsoft.Playwright;
using System;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        var playwright = await Playwright.CreateAsync();
        var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });
        var page = await browser.NewPageAsync();

        await page.GotoAsync("https://example.com");

        // 選擇下拉框中的選項
        await page.SelectOptionAsync("select[name='country']", "Canada");

        // 提交表單
        await page.ClickAsync("button[type='submit']");

        // 等待頁面跳轉
        await page.WaitForNavigationAsync();

        Console.WriteLine("Form submitted!");

        await browser.CloseAsync();
    }
}

 

3）如何進行文件上傳操作

使用 Playwright 進行文件上傳操作非常簡單。

using Microsoft.Playwright;
using System;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        var playwright = await Playwright.CreateAsync();
        var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });
        var page = await browser.NewPageAsync();

        await page.GotoAsync("https://www.example.com");

        // 找到文件上傳輸入框
        var fileInput = await page.QuerySelectorAsync("input[type='file']");

        // 上傳文件
        string filePath = "path/to/your/file.txt"; // 你要上傳的文件路徑
        await fileInput.SetInputFilesAsync(filePath);

        Console.WriteLine("File uploaded successfully!");

        await browser.CloseAsync();
    }
}

實際處理的時候，你只需要替換 filePath 變數為你要上傳的文件的路徑即可。

需要註意的是，文件上傳操作的實現可能會因網站的實現方式而有所不同。有些網站可能使用一些 JavaScript 或者 Ajax 技術來實現文件上傳，可能需要針對具體的網站進行調整和測試。

另外，如果你在 Headless 模式下運行 Playwright，可能無法看到實際的文件選擇對話框，但代碼仍然會模擬文件上傳操作。

 

2、如何進行Web 數據採集和截屏等

使用 Playwright 進行 Web 數據採集非常方便，你可以編寫腳本來訪問網站並提取所需的數據。以下是一個簡單的示例代碼，演示瞭如何使用 Playwright 來進行 Web 數據採集：

using Microsoft.Playwright;
using System;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        var playwright = await Playwright.CreateAsync();
        var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true });
        var page = await browser.NewPageAsync();

        await page.GotoAsync("https://www.example.com");

        // 提取頁面標題
        string title = await page.TitleAsync();
        Console.WriteLine("Page title: " + title);

        // 提取頁面 URL
        string url = page.Url;
        Console.WriteLine("Page URL: " + url);

        // 提取頁面文本內容
        string pageContent = await page.GetTextContentAsync();
        Console.WriteLine("Page content: " + pageContent);

        // 提取特定元素的文本內容
        var elementText = await page.EvaluateAsync<string>("document.querySelector('h1').textContent");
        Console.WriteLine("Header text: " + elementText);

        // 提取頁面中的鏈接
        var links = await page.QuerySelectorAllAsync("a");
        foreach (var link in links)
        {
            var href = await link.GetAttributeAsync("href");
            Console.WriteLine("Link: " + href);
        }

        await browser.CloseAsync();
    }
}

在這個示例中，我們使用 Playwright 打開了一個網頁（https://www.example.com），然後提取了頁面的標題、URL、文本內容以及特定元素（h1 標簽）的文本內容，最後提取了頁面中的所有鏈接。你可以根據實際需求修改代碼，提取你感興趣的其他數據。

請註意，上述示例中使用的是 Chromium 瀏覽器，你也可以選擇使用其他支持的瀏覽器，比如 Firefox 或者 WebKit（Safari）。另外，你也可以在 LaunchAsync 方法中設置 Headless 參數為 false，這樣瀏覽器將會以可視化的方式打開，便於調試和觀察執行過程。

如果我們需要批量獲取某個表格的數據，可以結合正則表達式的處理，模擬爬蟲批量獲取符合條件的記錄，存儲到本地來使用。

static async Task Main(string[] args)
{
    var playwright = await Playwright.CreateAsync();
    var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true });
    var page = await browser.NewPageAsync();

    await page.GotoAsync("https://www.example.com");

    // 等待表格載入完畢
    await page.WaitForSelectorAsync("table");

    // 獲取表格內容
    var tableHtml = await page.InnerHTMLAsync("table");

    // 使用正則表達式提取表格數據
    var regex = new Regex(@"<tr>(.*?)</tr>");
    var matches = regex.Matches(tableHtml);

    foreach (Match match in matches)
    {
        // 這裡可以根據表格結構和需要自行解析數據
        var rowHtml = match.Groups[1].Value;
        Console.WriteLine("Row HTML: " + rowHtml);
    }

    await browser.CloseAsync();
}

也可以參考使用 Playwright 截屏的代碼處理。

        private async Task OpenWebPage()
        {
            var playwright = await Playwright.CreateAsync();
            var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });
            var page = await browser.NewPageAsync();

            await page.GotoAsync("https://www.example.com");

            // 等待頁面載入完成
            await page.WaitForLoadStateAsync(LoadState.NetworkIdle);

            // 截圖保存
            await page.ScreenshotAsync(new PageScreenshotOptions { Path = "screenshot.png" });

            await browser.CloseAsync();
        }

在這個示例中，我們創建了一個 WPF 程式的視窗，其中包含一個按鈕。當用戶點擊按鈕時，WPF 程式將會使用 Playwright 打開一個 Chromium 瀏覽器，並訪問示例網站（https://www.example.com），然後截取頁面的屏幕截圖。

你可以根據自己的需求和具體情況，進一步擴展這個示例，實現更複雜的自動化任務或者與其他功能的集成。

3、如何使用Playwright進行多瀏覽器測試

使用 Playwright 進行多瀏覽器測試非常簡單，因為 Playwright 提供了跨瀏覽器的 API，你可以在不同的瀏覽器上運行相同的測試腳本。

以下是一個簡單的示例，演示瞭如何在 Chromium、Firefox 和 WebKit 瀏覽器上運行同一個測試腳本：

using System;
using System.Threading.Tasks;
using Microsoft.Playwright;

class Program
{
    static async Task Main(string[] args)
    {
        // 創建 Playwright 實例
        var playwright = await Playwright.CreateAsync();

        // 在 Chromium 瀏覽器上運行測試
        await RunTests(playwright.Chromium);

        // 在 Firefox 瀏覽器上運行測試
        await RunTests(playwright.Firefox);

        // 在 WebKit 瀏覽器上運行測試
        await RunTests(playwright.Webkit);
    }

    static async Task RunTests(IBrowserType browserType)
    {
        // 啟動瀏覽器
        var browser = await browserType.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true });

        // 創建頁面
        var page = await browser.NewPageAsync();

        // 在頁面上執行測試
        await page.GotoAsync("https://www.example.com");
        // 其他測試步驟...

        // 關閉瀏覽器
        await browser.CloseAsync();
    }
}

在這個示例中，我們首先創建了 Playwright 實例，然後分別使用 playwright.Chromium、playwright.Firefox 和 playwright.Webkit 獲取 Chromium、Firefox 和 WebKit 瀏覽器的 API。接著，我們定義了一個 RunTests 方法，該方法接受一個 IBrowserType 參數，根據傳入的瀏覽器類型啟動瀏覽器，併在頁面上執行測試。最後，我們在 Main 方法中分別調用 RunTests 方法來在不同的瀏覽器上運行測試。

這樣，你就可以使用 Playwright 輕鬆地在多個瀏覽器上運行相同的測試腳本，確保你的 Web 應用程式在不同瀏覽器中的相容性和一致性。

    專註於代碼生成工具、.Net/.NetCore 框架架構及軟體開發，以及各種Vue.js的前端技術應用。著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品。
  轉載請註明出處：撰寫人：伍華聰  http://www.iqidi.com 
    
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Visual Studio部署C++環境下OpenCV庫
    本文介紹在Visual Studio 2022中配置、編譯C++電腦視覺庫OpenCV的方法。 1 OpenCV庫配置 首先，我們進行OpenCV庫的下載與安裝。作為一個開源的庫，我們直接在其官方下載網站中進行下載即可；如下圖所示，我們首先選擇需要下載的操作系統。 隨後，即可在彈出的新界面中自動開 ...
  • 小項目不想引入 MQ？試試 Debezium！
    作者：是奉壹呀 鏈接：https://juejin.cn/post/7264791359839223823 奧卡姆剃刀原理，“如無必要，勿增實體"。 在一些小型項目當中，沒有引入消息中間件，也不想引入，但有一些業務邏輯想要解耦非同步，那怎麼辦呢？ 我們的web項目，單獨內網部署，由於大數據背景，公司消 ...
  • 開源.NET8.0小項目偽微服務框架（分散式、EFCore、Redis、RabbitMQ、Mysql等）
    經過大概三個月的學習和沉澱，我將.NET8.0的學習和使用，整理成了一個簡單的微服務項目，目前還在初級階段，後續會進行持續的更新和優化。 ...
  • Protobuf-net：C#高效序列化工具，助力介面傳輸與前端解析
    概述：Protobuf-net是C#中高效的二進位序列化工具，以緊湊、跨語言支持和卓越性能著稱。通過定義消息類型、序列化和反序列化實現數據傳輸，並可適用於Web介面。前端可使用protobuf.js庫解析Protobuf格式數據。 Protobuf-net 在 C# 中的編碼結構及使用方法 優點 P ...
  • 串口通信利器：SerialPortStream庫詳解，輕鬆實現C#串口開發
    概述：RJCP.DLL.SerialPortStream庫為C#串口通信提供強大支持，跨平臺、高度可定製，集成基礎功能如打開、配置串口和數據讀寫，以及高級功能包括事件處理、超時設置等，極大簡化串口開發流程，適用於不同平臺和複雜通信需求。 C#串口開發之RJCP.DLL.SerialPortStrea ...
  • .NET Core WebAPI項目部署iis後Swagger 404問題解決
    .NET Core WebAPI項目部署iis後Swagger 404問題解決 前言 之前做了一個WebAPI的項目，我在文章中寫到的是Docker方式部署，然後考慮到很多初學者用的是iis，下麵講解下iis如何部署WebAPI項目。 環境準備 iis ASPNETCoreModuleV2 重點 . ...
  • CYQ.Data 支持 DaMeng 達夢資料庫
    CYQ.Data 是一個用於操作資料庫的框架，可以方便地連接和管理各種類型的資料庫。在操作達夢資料庫時，使用 CYQ.Data 框架可以提供以下功能和優勢......總的來說，使用 CYQ.Data 框架操作達夢資料庫可以簡化開發流程，提高開發效率，同時也增強了系統的穩定性和安全性。 ...
  • 記一次 .NET某設備監控自動化系統 CPU爆高分析
    一：背景 1. 講故事 先說一下題外話，一個監控別人系統運行狀態的程式，結果自己出問題了，有時候想一想還是挺諷刺的，哈哈，開個玩笑，我們回到正題，前些天有位朋友找到我，說他們的系統會偶發性CPU爆高，CPU上去了就下不來了，讓我幫忙看一下怎麼回事，而且自己也分析過了，沒找到哪裡有問題，寫監控的都是高 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類