ABP VNext + Playwright E2E：前后端一体化自动化测试

ABP VNext + Playwright E2E：前后端一体化自动化测试 🚀

---

---

一、引言

✨ TL;DR

• 🔥 使用 Playwright for .NET + WebApplicationFactory 自动启动后端，实现前后端一体化 E2E 测试
• 🔒 通过 TransactionScope（指定隔离级别）进行跨 DbContext 事务隔离，测试结束自动回滚
• ✅ 覆盖登录、CRUD、API 拦截与性能断言，支持多浏览器并行 & 本地/CI 集成
• 🎥 自动录制失败 视频 与 Trace，并生成 HTML 报告，便于调试与持续集成

📚 背景与动机

在微服务与前后端分离架构下，单元测试难以捕捉 UI 与后端交互、网络请求和路由跳转等真实场景问题。借助 Playwright for .NET 的多内核自动化 + ABP VNext 的模块化后端，我们可以在“关闭真实外部依赖”的隔离环境中，完整验证业务链路，提高测试可信度与效率。

---

二、环境与依赖

• .NET SDK：≥ 8.0（ABP VNext）

• Node.js：≥ 16（Playwright 浏览器内核）

• NuGet 包：

  • Microsoft.Playwright
  • Microsoft.Playwright.Xunit（提供 PageTest、PlaywrightFact 等基类）

• 测试框架：xUnit

• 浏览器内核：Chromium、Firefox、WebKit

---

三、项目结构示例

MyApp/
├─ src/
│   └─ MyApp.HttpApi.Host/       # ABP 后端
├─ tests/
│   └─ E2ETests/
│       ├─ E2ETests.csproj       # 测试工程
│       ├─ TestWebApplicationFactory.cs  # 自定义宿主
│       ├─ TestFixture.cs        # 基类：事务隔离、初始化/清理 
│       ├─ LoginTests.cs         # 登录测试
│       ├─ ProductCrudTests.cs   # CRUD 测试
│       └─ playwright.config.js   # Playwright 安装脚本

---

四、安装与初始化 Playwright

# 进入测试目录，安装浏览器内核（仅一次）
cd tests/E2ETests
npx playwright install# 添加 NuGet 依赖
dotnet add package Microsoft.Playwright
dotnet add package Microsoft.Playwright.Xunit

// tests/E2ETests/playwright.config.js
module.exports = {}; // 如需自定义可在此添加

---

五、测试基类与数据隔离

1. 自定义 TestWebApplicationFactory 🏭

// TestWebApplicationFactory.cs
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc.Testing;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;public class TestWebApplicationFactory : WebApplicationFactory<Program>
{protected override void ConfigureWebHost(IWebHostBuilder builder){builder.ConfigureServices(services =>{// 移除原有 DbContext 注册var descriptor = services.Single(d => d.ServiceType == typeof(DbContextOptions<MyAppDbContext>));services.Remove(descriptor);// 注册测试库连接（可用环境变量动态配置）services.AddDbContext<MyAppDbContext>(options =>options.UseSqlServer("Server=localhost;Database=MyApp_Test;User Id=sa;Password=Your_pwd123;"));});}
}

2. 事务隔离 🌐

// TestFixture.cs
using System.Transactions;
using Microsoft.Playwright.Xunit;public abstract class E2ETestBase : PageTest
{protected TestWebApplicationFactory Factory { get; private set; }protected HttpClient ApiClient { get; private set; }private TransactionScope _txScope;public override async Task OnInitializeAsync(){await base.OnInitializeAsync();   // 启动后端宿主Factory = new TestWebApplicationFactory();ApiClient = Factory.CreateClient();// 开启事务（指定隔离级别为 ReadCommitted）var options = new TransactionOptions { IsolationLevel = IsolationLevel.ReadCommitted };_txScope = new TransactionScope(TransactionScopeOption.Required, options, TransactionScopeAsyncFlowOption.Enabled);// 种子数据示例using var scope = Factory.Services.CreateScope();var db = scope.ServiceProvider.GetRequiredService<MyAppDbContext>();db.Products.Add(new Product { Name = "SeedProduct", Price = 1.23M });await db.SaveChangesAsync();}public override async Task OnCleanupAsync(){await base.OnCleanupAsync();    // 先让 Playwright 清理_txScope.Dispose();             // 回滚事务Factory.Dispose();              // 释放宿主}
}

💡Tips：并行执行时，可结合 Testcontainers 为每个 worker 动态创建隔离数据库，或在连接字符串中拼接线程 ID。

---

六、测试流程图 📝

---

七、登录流程测试 🔑

// LoginTests.cs
using Microsoft.Playwright.Xunit;public class LoginTests : E2ETestBase
{[PlaywrightFact(Timeout = 60000, Video = VideoMode.RetainOnFailure, Trace = TraceMode.On)]public async Task Admin_Can_Login_And_See_Homepage(){var baseUrl = Factory.Server.BaseAddress!;await Page.GotoAsync($"{baseUrl}/auth/login");await Page.FillAsync("input[name=\"username\"]", "admin");await Page.FillAsync("input[name=\"password\"]", "123qwe");await Page.ClickAsync("button[type=\"submit\"]");await Page.WaitForURLAsync($"{baseUrl}/");Assert.True(await Page.Locator("text=欢迎, admin").IsVisibleAsync());}
}

---

八、CRUD 操作与 API 拦截 ✂️

// ProductCrudTests.cs
using System.Diagnostics;
using Microsoft.Playwright.Xunit;public class ProductCrudTests : E2ETestBase
{[PlaywrightFact(Timeout = 60000, Video = VideoMode.RetainOnFailure, Trace = TraceMode.On)]public async Task Perform_Product_CRUD_And_Assert_API_Performance(){var baseUrl = Factory.Server.BaseAddress!;// 拦截 POST 并断言await Page.RouteAsync("**/api/app/products", async route =>{Assert.Equal("POST", route.Request.Method);await route.ContinueAsync();});// 性能断言var sw = Stopwatch.StartNew();await Page.GotoAsync($"{baseUrl}/products");await Page.WaitForResponseAsync("**/api/app/products");sw.Stop();Assert.True(sw.ElapsedMilliseconds < 200, $"API 响应超时：{sw.ElapsedMilliseconds} ms");// 创建await Page.FillAsync("input[name=\"name\"]", "TestProduct");await Page.FillAsync("input[name=\"price\"]", "9.99");await Page.ClickAsync("button[type=\"submit\"]");await Page.WaitForSelectorAsync("text=TestProduct");// 更新await Page.ClickAsync("button.edit-btn");await Page.FillAsync("input[name=\"price\"]", "19.99");await Page.ClickAsync("button.save-btn");await Page.WaitForSelectorAsync("text=19.99");// 删除await Page.ClickAsync("button.delete-btn");await Page.ClickAsync("button.confirm-delete");await Page.WaitForSelectorAsync("text=No products found");}
}

---

九、并行执行与多环境隔离 ⚙️

// AssemblyInfo.cs
using Xunit;[assembly: CollectionBehavior(DisableTestParallelization = false, MaxParallelThreads = 4)]

💡Tips：可通过环境变量或 Testcontainers 为每个 worker 动态生成不同的数据库实例，彻底隔离竞态。

---

十、CI 流水线流程图 🚦

---

十一、GitHub Actions & 报告集成 🎯

name: E2E Testson: [push, pull_request]jobs:e2e:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Setup .NET & Node.jsuses: actions/setup-dotnet@v3with:dotnet-version: '8.0'- uses: actions/setup-node@v3with:node-version: '16'- name: Install Playwright Browsersworking-directory: tests/E2ETestsrun: npx playwright install --with-deps- name: Build Backend & Testsrun: dotnet build --configuration Release- name: Run E2E Testsworking-directory: tests/E2ETestsrun: |dotnet test --logger "trx;LogFileName=TestResults.trx" --results-directory ./results- name: Generate Playwright HTML Reportrun: |npm install -g report-generatorreportgenerator -reports:tests/E2ETests/results/TestResults.trx -targetdir:tests/E2ETests/results/html- name: Upload Test Artifactsuses: actions/upload-artifact@v3with:name: e2e-test-reportpath: |tests/E2ETests/results/htmltests/E2ETests/results/TestResults.trx

---

十二、报告与调试 🐞

• 视频 & Trace：失败用例自动保留在 TestResults，可通过 npx playwright show-trace trace.zip 可视化
• 日志调试：本地运行时设置 DEBUG=pw:api，打印 Playwright 与浏览器交互细节

---

十三、跨框架复用 🔄

public async Task LoginAsAsync(string user, string pwd)
{await Page.GotoAsync($"{BaseUrl}/auth/login");await Page.FillAsync("input[name=\"username\"]", user);await Page.FillAsync("input[name=\"password\"]", pwd);await Page.ClickAsync("button[type=\"submit\"]");await Page.WaitForURLAsync($"{BaseUrl}/`);
}

结合配置文件（appsettings.Test.json）控制不同框架的路由前缀，实现一套脚本多端复用。

---