1. 前言

正如Playwright for .NET 官网介绍: Playwright 为现代 Web 应用程序提供可靠的端到端测试.
特性介绍:

Test across all modern browsers.
在所有现代浏览器中进行测试,用于自动化 Chromium、Firefox 和 WebKit 的单一 API。
Automate without trade-offs.
无需权衡即可实现自动化,依赖现代网络平台的单页应用程序的自动化。
Use in your preferred language.
使用您的首选语言,支持的语言JavaScript & TypeScript, Python, .NET and, Java

2. 特点与优势

可立即使用. 使用单个命令在本地和 CI 环境中安装 Playwright 和浏览器。然后使用 API 启动浏览器、创建页面和自动化页面交互。
通过自动等待可靠地自动化. 操作（如点击）会自动等待 UI 元素，以确保您的脚本可以可靠地执行。等待精确事件以获得更多控制并告别超时。
拦截网络活动. playwright 可以在测试场景中拦截网络活动以修改或模拟网络请求。
运行多页面仿真场景. Playwright 中的单个浏览器实例可以创建多个独立的浏览器上下文。每个浏览器上下文都可以运行多页面仿真场景。

3. 使用

Getting Started | Playwright .NET

首先需要安装Playwright.CLI全局工具, 且这个操作仅需执行一次.

dotnet tool install --global Microsoft.Playwright.CLI

新建.net项目

# Create project
dotnet new console -n PlaywrightDemo
cd PlaywrightDemo

# Install dependencies, build project and download necessary browsers.
dotnet add package Microsoft.Playwright
dotnet build
playwright install

注意最后异步的playwright install很重要,此操作为下载浏览器

使用api

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

class Program
{
    public static async Task Main()
    {
        using var playwright = await Playwright.CreateAsync();
        await using var browser = await playwright.Chromium.LaunchAsync();
        var page = await browser.NewPageAsync();
        await page.GotoAsync("https://www.baidu.com");
        await page.ScreenshotAsync(new PageScreenshotOptions { Path = "screenshot.png" });
    }
}

运行

dotnet run

默认情况下, Playwright运行的浏览器是无头浏览器. 为了能看到浏览器的UI, 当启动浏览器时可传入Headless = false 标记. 你也可以使用slowMo属性去放慢执行速度.

await playwright.Firefox.LaunchAsync(new BrowserTypeLaunchOptions 
{ 
    Headless = false, 
    SlowMo = 50, 
});

运行成功后可在项目同目录中看到浏览器的页面的截图

4. 测试web

您可以选择使用与 Playwright 捆绑在一起的 NUnit 测试组件。这些组件支持在多个浏览器引擎上并行运行测试，开箱即用。通过 Test Runners | Playwright .NET
了解有关Playwright的更多信息。

5. 项目实践难点及技巧

5.1 拦截请求,修改请求参数

业务需求: 前端将密码加密后传到后台, 在模拟的时候从后台数据库取到的密码也是加密后的, 也不能逆向转回去. 分析之后只需要将密码在发送前替换为数据库密码即可.

//使用用户名密码登录
var waitForResponseTask = page.WaitForResponseAsync("**/api/Account/createCode");
await page.GotoAsync(_exportOption.WebBaseUrl);
var response = await waitForResponseTask;
var createCodeResponse = await response.BodyAsync();
var codeData = System.Text.Encoding.Default.GetString(createCodeResponse);
string code = "";
using (var jsonDoc = JsonDocument.Parse(codeData))
{
    JsonElement jsonElement = jsonDoc.RootElement;
    var validateCodeId = jsonElement.GetProperty("validateCodeId").GetString();
    code = _memoryCache.Get(validateCodeId)?.ToString();
    if (code == null)
    {
        throw new Exception("登录时获取code失败了");
    }
}

//修改请求参数
await page.RouteAsync("**/api/Account/Login", async route =>
{
    var headers = route.Request.Headers.ToDictionary(x => x.Key, x => x.Value);
    Console.WriteLine(string.Join(",", headers.Keys));
    var postData = route.Request.PostData;
    Console.WriteLine(JsonSerializer.Serialize(postData));

    var loginData = JsonSerializer.Deserialize(postData, new JsonSerializerOptions()
    {
        PropertyNameCaseInsensitive = true
    });
    loginData.Password = userInfo.userPwd;
    await route.ContinueAsync(new RouteContinueOptions()
    {
        PostData = System.Text.Encoding.Default.GetBytes(JsonSerializer.Serialize(loginData))
    });
});
_logger.LogInformation("开始登录");
var loginInputs = await page.QuerySelectorAllAsync("input");
await loginInputs[0].FillAsync(userInfo.userName);//用户名
await loginInputs[1].FillAsync("Aabc123!");//密码
await loginInputs[2].FillAsync(code);//验证码
var loginBtn = await page.QuerySelectorAsync("button");
await loginBtn.ClickAsync();

分析:
验证码也是从后台取到的,因没有加密直接填入input框即可.
在点击登录之前定义了一个修改请求参数的异步方法, 内部也使用了异步,故await在此处没有阻断,而是起到了监听作用.
紧接着模拟登录过程,输入相关数据, 点击登录后开发发送登录请求, 登录请求已被拦截, 故可在内部修改发送内容. 此处就把密码换成了从数据库拿到加密后的密码.登录成功!

5.2 页面监听

页面监听是开发阶段或调试阶段的利器,
如下:

page.Console += (_, msg) =>
{
    if ("error".Equals(msg.Type)) Console.WriteLine("Error text: " + msg.Text);
};
page.PageError += (_, exception) =>
{
    Console.WriteLine("Uncaught exception: " + exception);
};
page.Request += (_, request) => Console.WriteLine(">> " + request.Method + " " + request.Url);
page.Response += (_, response) => Console.WriteLine("<<" + response.Status + " " + response.Url);

6. 写在最后

Playwright具有强大且灵活的的操作web的能力, 既能对Dom操作也能JavaScript操作,同时具有拦截修改请求的能力, 再配合详尽的文档,以及开源加持, playwright库为现代化web端到端测试做好了准备.
应用的场景就是自动化操作web的场景. 测试,爬虫,截图,回归测试,发布前测试等等都可以使用.

本文作者：wwmin
微信公众号: DotNet技术说
本文链接：https://www.jianshu.com/p/41c32fc47282
关于博主：评论和私信会在第一时间回复。或者[直接私信]我。
版权声明：转载请注明出处！
声援博主：如果您觉得文章对您有帮助，关注点赞, 您的鼓励是博主的最大动力！

Playwright for .NET 自动化操作web-端到端测试