在.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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類