[Feature]: Blazor component testing

[sand4rt]

🚀 Feature Request

Wondering if you've considered adding Playwright component testing for Blazor: https://learn.microsoft.com/en-us/aspnet/core/blazor/test?view=aspnetcore-8.0#test-components-with-bunit?

Example

<button @onclick="HandleClick">@title</button>

@code {
    [Parameter]
    public string title { get; set; } = "";
}

@code
{
    [Fact]
    public async Task HasTitle()
    { 
        var Component = await mount(@<Button title="Hello" />);
        await Expect(Component).ToHaveText("Hello");
    }
}

or

public class Button
{
    [Fact]
    public void HasTitle()
    {
        var Component = mount<Button>({ props = { title = "hello" });
        await Expect(Component).ToHaveText("Hello");
    }
}

Motivation

I'm not a Blazor user, but i think it might be interesting for the people who do?

[mxschmitt]

Let's see if there is any interest for it.

[kelmelzer]

I would love this. I just recently adopted Blazor and can definitely see some use cases.

[thatstatsguy]

@sand4rt is your concern that bUnit isn't comprehensive enough? Just trying to better understand what the big benefit would be in bringing this into Playwright?

[mxschmitt]

Playwright would be a real browser while bUnit is an emulated DOM like JSDom from my understanding.

[UniMichael]

@thatstatsguy Because it doesn't use an actual browser, bUnit expects you to mock your JavaScript interops and won't respect certain HTML attributes in its test (i.e. it'll still be able to click a disabled button).

While you can kind of get away with telling people to just confirm that those HTML attributes are there and not have them try to click a disabled button in their tests, having people mock their JavaScript isn't really possible if they're relying on that JavaScript to have non-trivial side-effects.

Some examples from our own Blazor component library where we've had to use Playwright include:

• Using an input masking library that manipulates your underlying value: You want to make sure it's actually behaving properly and returning the correct value to your component.
• Waiting for a specific JavaScript event listener to call your C# code through a DotNetObjectReference and [JSInvokable].