使用Playwright启动内存服务器测试Blazor WASM遇阻求助

针对Blazor WASM项目用Playwright做内存端到端测试的问题，核心难点在于WASM是客户端静态应用，需要在内存宿主中正确服务静态文件并集成模拟服务，以下是具体实现步骤：

1. 自定义WebApplicationFactory托管WASM #

Blazor WASM依赖静态文件服务，需创建继承WebApplicationFactory<Program>的自定义工厂类，负责配置静态文件路由、替换模拟服务：

public class BlazorWasmTestFactory : WebApplicationFactory<Program>
{
    protected override void ConfigureWebHost(IWebHostBuilder builder)
    {
        // 替换业务服务为模拟实现
        builder.ConfigureServices(services =>
        {
            // 示例：替换天气预测服务
            var serviceDescriptor = services.SingleOrDefault(d => d.ServiceType == typeof(IWeatherForecastService));
            if (serviceDescriptor != null)
            {
                services.Remove(serviceDescriptor);
                services.AddScoped<IWeatherForecastService, MockWeatherForecastService>();
            }
        });

        // 配置静态文件与WASM fallback路由
        builder.Configure(app =>
        {
            app.UseStaticFiles(); // 服务WASM的wwwroot静态资源
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapFallbackToFile("index.html"); // 处理WASM单页路由
                endpoints.MapControllers(); // 如果有API控制器，保留此配置
            });
        });
    }
}

// 模拟服务实现示例
public class MockWeatherForecastService : IWeatherForecastService
{
    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
        return Task.FromResult(new[]
        {
            new WeatherForecast { Date = startDate, TemperatureC = 25, Summary = "模拟晴天" }
        });
    }
}

2. 集成Playwright与内存宿主 #

在测试类中注入自定义工厂，启动Playwright浏览器并访问内存宿主的地址，同时处理WASM加载延迟：

public class WasmE2ETests : IClassFixture<BlazorWasmTestFactory>, IDisposable
{
    private readonly BlazorWasmTestFactory _factory;
    private readonly IBrowser _browser;
    private readonly IPlaywright _playwright;

    public WasmE2ETests(BlazorWasmTestFactory factory)
    {
        _factory = factory;
        _playwright = Playwright.CreateAsync().GetAwaiter().GetResult();
        _browser = _playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true }).GetAwaiter().GetResult();
    }

    [Fact]
    public async Task VerifyMockForecastDisplayed()
    {
        var page = await _browser.NewPageAsync();
        await page.GotoAsync(_factory.Server.BaseAddress);

        // 等待WASM应用初始化完成（根据页面元素调整选择器）
        await page.WaitForSelectorAsync("#forecast-list", new PageWaitForSelectorOptions { Timeout = 10000 });

        // 验证模拟数据渲染
        var summaryText = await page.InnerTextAsync(".forecast-summary");
        Assert.Contains("模拟晴天", summaryText);
    }

    public void Dispose()
    {
        _browser.DisposeAsync().GetAwaiter().GetResult();
        _playwright.Dispose();
    }
}

3. 关键配置注意事项 #

• 确保测试项目引用Blazor WASM项目，并在测试项目的.csproj中添加WASM静态文件的复制规则：

  <ItemGroup>
    <Content Include="..\YourBlazorWasmProject\wwwroot\**" CopyToOutputDirectory="PreserveNewest" />
  </ItemGroup>
  

• 若为托管式WASM（带ASP.NET Core后端），无需额外配置静态文件，WebApplicationFactory会自动服务WASM资源。
• Playwright的等待逻辑必须适配WASM加载速度，优先使用WaitForSelector或WaitForLoadState(LoadState.NetworkIdle)确保应用就绪。

内容的提问来源于stack exchange，提问作者ca53rlb