在.NET程序中整合微软的Playwright，使用 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 应用程序在不同浏览器中的兼容性和一致性。