使用Playwright .NET测试Blazor InputNumber时FillAsync类型转换错误解决

我用.NET 5搭配Blazor开发，表单里有如下InputNumber组件：

<InputNumber id="age" @bind-Value="@myObject.Age" />

为了测试表单输入的边界条件验证错误提示，我写了以下Playwright测试代码：

[Theory]
[InlineData(-1)]
[InlineData(0)]
[InlineData(1001)]
public async void CreatePerson_InvalidAge(int age)
{
    using var playwright = await Playwright.CreateAsync();
    await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true, SlowMo = 500 });
    await using var context = await browser.NewContextAsync();

    var page = await context.NewPageAsync();

    await page.GotoAsync(baseUrl);

    await page.Locator("id=age").FillAsync(age);
    await page.Locator("id=saveBtn").ClickAsync();

    var errorMessage = await page.Locator("id=ageErrMsg").First.InnerTextAsync();

    Assert.Equal("Age must be between 1 - 200", errorMessage);
}

调用FillAsync时出现“cannot convert int to string”错误，请问该如何为InputNumber表单控件输入数字？

解决方案 #

错误原因 #

Playwright的FillAsync方法要求传入字符串类型参数，但你直接传入了int类型变量，导致类型转换失败。

修改方法 #

把int类型的age转换为字符串后再传入FillAsync，常用两种方式：

• 使用age.ToString()直接转换
• 用字符串插值$"{age}"

修改后的核心代码示例：

// 方式1：ToString转换
await page.Locator("id=age").FillAsync(age.ToString());

// 方式2：字符串插值
await page.Locator("id=age").FillAsync($"{age}");

完整修改后的测试代码 #

[Theory]
[InlineData(-1)]
[InlineData(0)]
[InlineData(1001)]
public async void CreatePerson_InvalidAge(int age)
{
    using var playwright = await Playwright.CreateAsync();
    await using var browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = true, SlowMo = 500 });
    await using var context = await browser.NewContextAsync();

    var page = await context.NewPageAsync();

    await page.GotoAsync(baseUrl);

    // 转换为字符串后传入
    await page.Locator("id=age").FillAsync(age.ToString());
    await page.Locator("id=saveBtn").ClickAsync();

    var errorMessage = await page.Locator("id=ageErrMsg").First.InnerTextAsync();

    Assert.Equal("Age must be between 1 - 200", errorMessage);
}

补充说明 #

Blazor的InputNumber最终渲染为浏览器标准的<input type="number">元素，Playwright对这类元素的输入逻辑和普通输入框一致，传入字符串格式的数字即可被正常识别。

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