blazorblazor-webassemblymudblazorplaywright-dotnet

Playwright tests fail when using MudDatePicker with mask attribute

I use a MudDatePicker:

<MudDatePicker @ref="DateField"
                           id="test"                               
                           Label="test"
                           Mask="@(new DateMask("dd.MM.yyyy"))"
                           ErrorText="Date is invalid"
                           Editable="true"
                           Placeholder="Enter date"
                           @bind-Date="@DateValue"
                           Validation="@((DateTime? _) => _validationMessage)"
                           Required="true"
                           RequiredError="input is required."                               
                           Converter="_dateTimeConverter"
                           Margin="DefaultThemes.Margin"
                           Variant="DefaultThemes.Variant"/>

With the attribute Mask the input field provides a masked input. If this is active Playwright will fill the field but it won't validate after submit telling that "input is required". If I remove the "mask" property it works as expected.

Is there a possibility to remove the mask property when testing with playwright? The difference in HTML looks this way:

<!-- without mask -->
<div                   class="mud-input mud-input-outlined mud-input-outlined-with-label mud-input-adorned-end mud-shrink mud-typography-input">
<!-- with mask -->
<div id="mask6c1d8idn" class="mud-input mud-input-outlined mud-input-outlined-with-label mud-input-adorned-end mud-shrink mud-typography-input">

My idea was to remove the property 'id="mask6c1d8idn"' but even removing the property by hand doesnt make the masked input disappear.

Any help is appreciated. Thank you very much.

Solution

  • I just learned about the "TypeAsync()" Method.

    await Page.GetByLabel("test").TypeAsync("01.02.1979");

    This solved the problem.