如何用WebDriver测试Blazor网站中验证消息的可见性？

我正在使用WebDriver对Blazor Web应用进行集成测试，想要测试验证消息的可见性。示例表单如下：

<form method="post" action="/users/register">
    <div>
        <input id="Name" class="form-control valid" type="text" aria-required="true" />
        <label for="Name" class="form-label">Name</label>
        <ValidationMessage For="Name" class="text-danger"/>
    </div>
    <div>
        <input id="EmailAddress" class="form-control valid" aria-required="true" type="email" />
        <label for="EmailAddress" class="form-label">Email Address</label>
    </div>
</form>

现有WebDriver测试代码如下：

webDriver.Navigate().GoToUrl(WebSite.FullUrl(url))

var name = webDriver.FindElement(By.Id("Name"))
name.Clear();

var emailAddress = webDriver.FindElement(By.Id("EmailAddress"))

此时验证消息已按预期显示，如何通过代码验证该验证消息的可见性？

Blazor的ValidationMessage组件渲染后会生成带有特定标识的DOM元素，你可以通过以下几种可靠方式验证它的可见性：

1. 利用Blazor专属属性定位 #

Blazor渲染ValidationMessage时会自动添加data-valmsg-for属性，值对应绑定的字段名，这是最精准的定位方式：

// 定位Name字段对应的验证消息元素
var nameValidationMsg = webDriver.FindElement(By.CssSelector("[data-valmsg-for='Name']"));
// 验证元素是否可见
Assert.IsTrue(nameValidationMsg.Displayed);

2. 通过CSS类结合父元素定位 #

如果属性定位失效，可借助text-danger类和输入框的父容器来定位：

// 找到Name输入框的父div，再定位其中的text-danger元素
var nameValidationMsg = webDriver.FindElement(By.XPath("//div[input[@id='Name']]//*[contains(@class,'text-danger')]"));
Assert.IsTrue(nameValidationMsg.Displayed);

3. 处理异步渲染的显式等待 #

Blazor是异步渲染的单页应用，验证消息可能不会立即出现，建议用显式等待确保元素加载完成：

var wait = new WebDriverWait(webDriver, TimeSpan.FromSeconds(10));
// 等待验证消息元素可见
var nameValidationMsg = wait.Until(driver => 
{
    var element = driver.FindElement(By.CssSelector("[data-valmsg-for='Name']"));
    return element.Displayed ? element : null;
});
// 直接断言即可，因为等待已确保元素可见
Assert.IsNotNull(nameValidationMsg);

注：Displayed属性会自动判断元素是否在页面上可见（排除display:none、visibility:hidden等隐藏状态），完全符合验证需求。

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