带Mask属性的MudDatePicker导致Playwright测试失败的解决咨询

你遇到的问题是因为MudDatePicker启用Mask后，组件内部的输入处理逻辑和无Mask时不同，Playwright直接填充输入框后，组件可能没有正确识别输入值，导致校验时认为字段为空。以下是几种可行的解决方案：

方案1：测试环境动态禁用Mask #

在Blazor代码中通过条件渲染，仅在非测试环境启用Mask，这样测试时就能避免掩码逻辑干扰：

Blazor组件代码调整 #

@inject IJSRuntime JSRuntime

<MudDatePicker @ref="DateField"
               id="test"                               
               Label="test"
               @if (!_isTesting) { <text>Mask="@(new DateMask("dd.MM.yyyy"))"</text> }
               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"/>

@code {
    private bool _isTesting;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 从Playwright注入的JS获取测试标识
            _isTesting = await JSRuntime.InvokeAsync<bool>("getIsTesting");
            StateHasChanged();
        }
    }
}

Playwright测试代码添加初始化脚本 #

// 在页面加载前注入测试环境标识
await page.AddInitScript(@"
    window.getIsTesting = () => true;
");
await page.Goto("your-page-url");

方案2：模拟符合掩码的输入并触发正确事件 #

Mask启用时，需要确保输入完全符合掩码格式，并且触发组件的校验事件。可以在填充后触发change或blur事件，让组件确认输入值：

// 填充符合掩码格式的日期
await page.Fill("#test input", "01.01.2024");
// 触发blur事件让组件识别输入
await page.EvaluateAsync(@"
    const input = document.querySelector('#test input');
    input.blur();
");
// 或者触发change事件
await page.EvaluateAsync(@"
    const input = document.querySelector('#test input');
    input.dispatchEvent(new Event('change', { bubbles: true }));
");

方案3：直接通过JS设置组件绑定值 #

绕过输入框，直接通过Blazor的组件实例设置绑定的DateValue，这样能完全避免掩码输入的干扰：

// 获取组件对应的DOM元素
var datePickerElement = await page.QuerySelectorAsync("#test");
// 通过Blazor内部API设置组件的DateValue
await page.EvaluateAsync(@"
    (element) => {
        // 找到对应的Blazor组件实例
        const component = Array.from(window.Blazor.rootComponents)
            .find(c => c.element === element);
        if (component) {
            // 设置日期值
            component.instance.DateValue = new Date('2024-01-01');
            // 通知组件更新状态
            component.instance.StateHasChanged();
        }
    }", datePickerElement);

为什么删除掩码div的id没用？ #

生成的带mask前缀的id只是掩码容器的标识，Mask的功能是由MudDatePicker组件内部的逻辑实现的，和这个id无关，所以删除id不会移除掩码输入的功能。

内容的提问来源于stack exchange，提问作者Christoph Glaß