Исправление пустого экрана после входа в Blazor Server с помощью Playwright Testing

Question

Как можно решить проблему появления пустого экрана после успешного входа в систему при тестировании приложения Blazor Server с помощью Playwright?

У меня есть следующий код для запуска Kestrel-сервера на случайном порту:

csharp

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Hosting.Server;
using Microsoft.AspNetCore.Hosting.Server.Features;
using Microsoft.AspNetCore.Mvc.Testing;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace Abc;

public sealed class KestrelWebAppFactory : WebApplicationFactory<Program>
{
    protected override IHost CreateHost(IHostBuilder builder)
    {
        // Сначала создаем хост TestServer (требуется WebApplicationFactory)
        var testHost = builder.Build();

        // Перенастраиваем сборщик для использования реального Kestrel-сервера на динамическом порту
        builder.ConfigureWebHost(webHost =>
        {
            webHost.UseKestrel();
            webHost.UseUrls("http://127.0.0.1:0");
        });

        // Создаем и запускаем хост Kestrel
        var kestrelHost = builder.Build();
        kestrelHost.Start();

        // Ждем, пока Kestrel заменит :0 на фактический порт
        var server = kestrelHost.Services.GetRequiredService<IServer>();
        var addressesFeature = server.Features.Get<IServerAddressesFeature>()!;

        // Небольшой цикл ожидания, пока Kestrel опубликует конкретный порт
        var sw = System.Diagnostics.Stopwatch.StartNew();
        string bound = null;
        while (sw.Elapsed < TimeSpan.FromSeconds(5))
        {
            bound = addressesFeature.Addresses.FirstOrDefault(a => !a.EndsWith(":0", StringComparison.Ordinal));
            if (bound is not null) break;
            Thread.Sleep(25);
        }
        if (bound is null)
            throw new InvalidOperationException("Kestrel не опубликовал привязанный адрес.");

        // Указываем HttpClient фабрики на реальный сервер, чтобы Playwright мог его использовать
        ClientOptions.BaseAddress = new Uri(bound);

        // Запускаем и возвращаем хост TestServer (WAF ожидает это)
        testHost.Start();
        return testHost;
    }
}

Затем у меня есть следующий фикстур, который я использую в своих тестах:

csharp

namespace AbcE2ETests;

// Хостит Kestrel-сервер и браузер Playwright для класса тестов.
public class ServerFixture : IAsyncLifetime
{
    private const string PlaywrightContextStoragePath = "/temp/playwrightstate.json";

    public KestrelWebAppFactory Factory { get; private set; }

    public Uri BaseUrl => Factory.ClientOptions.BaseAddress;
    public IPlaywright Playwright { get; private set; }
    public IBrowser Browser { get; private set; }
    public IBrowserContext Context { get; private set; }
    public IPage Page { get; private set; }

    public virtual async Task InitializeAsync()
    {
        Factory = new KestrelWebAppFactory();
        await WaitForServerStartAsync();

        // Инициализируем Playwright и свежий контекст браузера/страницу для этого фикстура
        await SignInAsync();
    }

    public string GetFullUrl(string relativeUrl) => new Uri(BaseUrl, relativeUrl).ToString();

    public async ValueTask EnterValuesByNameAsync(Dictionary<string, string> namesAndValues)
    {
        foreach (var kvp in namesAndValues)
        {
            ILocator input = Page.Locator($"input[name='{kvp.Key}']").First;
            await input.WaitForAsync();
            await input.FocusAsync();
            Task setValueTask = kvp.Value switch
            {
                BrowserConstants.FormValues.Checkbox.Checked => input.CheckAsync(),
                BrowserConstants.FormValues.Checkbox.Unchecked => input.UncheckAsync(),
                _ => input.FillAsync(kvp.Value)
            };
            await setValueTask;
        }
    }

    public async ValueTask PressEnterAsync() =>
        await Page.Keyboard.PressAsync(BrowserConstants.Keys.Enter);

    public async ValueTask NavigateToAsync(string relativeUrl) =>
        await Page.GotoAsync(GetFullUrl(relativeUrl));

    private async Task SignInAsync()
    {
        await InitializePlaywrightAsync(readFromStoragePath: false);
        await NavigateToAsync("/Account/LogIn");
        await EnterValuesByNameAsync(new Dictionary<string, string>
        {
            ["Input.TenantCode"] = "ASL",
            ["Input.Email"] = "mrpmorris@home.com",
            ["Input.Password"] = "SuperSecretPassword"
        });

        await PressEnterAsync();
        await Page.WaitForURLAsync(GetFullUrl("/"));
        await Context.StorageStateAsync(new()
        {
            // относительно папки bin теста
            Path = PlaywrightContextStoragePath
        });
        await DisposePlaywrightAsync();

        await InitializePlaywrightAsync(readFromStoragePath: true);
        await Task.Delay(300_000);
    }

    // Позволяет потомкам настраивать параметры контекста (например, viewport, locale, состояние хранилища)
    protected virtual void ConfigureContextOptions(BrowserNewContextOptions options) { }

    protected async Task WaitForServerStartAsync()
    {
        HttpClient http = Factory.CreateClient();
        var sw = System.Diagnostics.Stopwatch.StartNew();
        while (sw.Elapsed < TimeSpan.FromSeconds(5))
        {
            try
            {
                HttpResponseMessage response = await http.GetAsync(Factory.ClientOptions.BaseAddress);
                if (response.IsSuccessStatusCode)
                    return;
            }
            catch { }
        }
        throw new InvalidOperationException("Сервер не удалось запустить");
    }

    public virtual async Task DisposeAsync()
    {
        await DisposePlaywrightAsync();
        Factory?.Dispose();
        Factory = null;
    }

    private async ValueTask DisposePlaywrightAsync()
    {
        try
        {
            if (Context is not null)
                await Context.CloseAsync();
            if (Browser is not null)
                await Browser.CloseAsync();
        }
        finally
        {
            Playwright?.Dispose();

            Context = null;
            Browser = null;
            Playwright = null;
        }
    }

    private async Task InitializePlaywrightAsync(bool readFromStoragePath)
    {
        Playwright = await Microsoft.Playwright.Playwright.CreateAsync();
        Browser = await Playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions
        {
            Headless = false
        });

        var ctxOptions = new BrowserNewContextOptions
        {
            BaseURL = Factory.ClientOptions.BaseAddress.ToString(),
            StorageStatePath = readFromStoragePath ? PlaywrightContextStoragePath : null
        };
        ConfigureContextOptions(ctxOptions);

        Context = await Browser.NewContextAsync(ctxOptions);
        Page = await Context.NewPageAsync();
    }
}

Это отлично работает, за исключением того, что когда вход в систему завершен и я перенаправлен на /, я просто получаю пустой экран.

Исправление пустого экрана после входа в Blazor Server с помощью Playwright Testing

Содержание

Общие причины проблемы пустого экрана

Решения для исправления проблемы пустого экрана

Ожидание инициализации Blazor

Улучшение обработки потока аутентификации

Правильная настройка контекста Playwright

Использование селекторов, специфичных для Blazor

Обработка проблем рендеринга на стороне сервера

Полный пример реализации

Дополнительные советы по устранению неполадок

Источники