如何用Atata框架操作浏览器标准日期时间选择器？是否需自定义组件？

我需要让Atata脚本在基于Tailwind CSS框架的Web表单中设置日期，尝试了以下代码：

DateTime t = new DateTime(2024,02,17);

Go.To<DatesClaimAreaEditPage>()
    // .EditHeading.Should.Contain("Edit Claim")
    .DateArea.Click()
    .EditIncidentDate.Click()
    .CurrentIncidentDate.Clear()
    .CurrentIncidentDate.Set(t)
    .Report.Screenshot()
    .EditIncidentAwareness.Click()
    .CurrentDateAware.Set(t)
    .CurrentDateAware.Click()
    .EditNatmedNotified.Click()
    .SaveReload.Should.BeVisible()
    .SaveReload.Click()
    .DateArea.Click()
    .Report.Screenshot();

通过浏览器开发者工具查看，这个日期组件是Tailwind样式的自定义控件：点击编辑按钮后会弹出日期选择器，对应的输入框ID为DateOfIncident。

我的页面对象类定义如下：

[FindByXPath("//*[@id='claimDates']/div[1]/div/editbutton/button")]
public Button<_> EditIncidentDate { get; private set; }

[FindByXPath("//*[@id='DateOfIncident']")]
public DateInput<_> CurrentIncidentDate { get; private set; }

请问我是否需要为这个特定的日期时间选择器制作自定义组件控件？

解答 #

如果Atata内置的DateInput组件没法正常和你的Tailwind日期选择器交互，那确实需要做自定义组件。

原因分析 #

Atata的DateInput默认适配标准HTML5的<input type="date">控件，但你的控件是Tailwind定制的弹窗式选择器，交互逻辑和原生输入框完全不同——比如需要先点击编辑按钮打开弹窗，再选择年月日，而非直接输入或赋值。这种情况下内置控件的Set方法无法识别它的交互流程，自然会失效。

自定义组件的思路 #

你可以封装一个自定义控件，把这个日期选择器的操作步骤整合进去：

1. 继承Atata的Control<_>基类，定义控件里的核心元素（编辑按钮、年份选择框、月份选择框、日期按钮等）。
2. 编写Set(DateTime value)方法，模拟真实用户操作：点击编辑按钮→选择对应年月→点击目标日期→验证设置结果。

示例代码 #

自定义组件参考写法：

[ControlDefinition("div[contains(@class, 'tailwind-date-picker')]", ComponentTypeName = "Date Picker")]
public class TailwindDatePicker<_> : Control<_> where _ : PageObject<_>
{
    [FindByXPath("//*[@id='claimDates']/div[1]/div/editbutton/button")]
    public Button<_> EditButton { get; private set; }

    [FindById("DateOfIncident")]
    public TextInput<_> DateInput { get; private set; }

    // 根据页面实际元素调整定位器
    [FindByClass("year-dropdown")]
    public Select<_> YearSelect { get; private set; }

    [FindByClass("month-dropdown")]
    public Select<_> MonthSelect { get; private set; }

    [FindByClass("day-cell")]
    public ControlList<Button<_>, _> DayButtons { get; private set; }

    public _ Set(DateTime date)
    {
        return EditButton.Click()
            .YearSelect.Select(date.Year.ToString())
            .MonthSelect.Select(date.Month.ToString())
            .DayButtons.First(x => x.Content == date.Day.ToString()).Click()
            .DateInput.Should.Equal(date.ToString("yyyy-MM-dd")); // 验证日期是否设置成功
    }
}

然后在页面对象里替换原有控件定义：

public TailwindDatePicker<_> IncidentDatePicker { get; private set; }

调用时简化为：

Go.To<DatesClaimAreaEditPage>()
    .DateArea.Click()
    .IncidentDatePicker.Set(new DateTime(2024, 02, 17))
    // 后续操作...

总结 #

如果内置DateInput无法适配你的定制化日期选择器，就必须制作自定义组件来匹配它的独特交互逻辑。

内容的提问来源于stack exchange，提问作者yu-gi-oh Jason H