如何使用 Atata 框架与基于标准浏览器的日期时间选择器组件交互？

Question

我需要获取我的 atata 脚本来在我的网络表单上设置日期。 Web 表单使用 Tailwind CSS 框架。

            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();

这是我在开发工具中检查我的网络浏览器中的网络元素时选择的组件：

网络元素代码

我尝试了您在上面的方法中看到的内容。我这样定义我的页面对象类：

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

 [FindByXPath("//*[@id='DateOfIncident']")]

 public DateInput<_> CurrentIncidentDate { get; private set; }

我应该为这个特定的日期时间选择器制作一个自定义组件控件吗？

Answer 1

那么您当前的实施存在什么问题？它会抛出异常还是什么？

对，

DateInput

是处理标准

input[type="date"]

时正确选择的Atata控件。

请注意，

DateInput

组件支持格式化。默认格式为“d”（短日期模式，例如 6/15/2009）。如果您的日期格式不同，请将

[Format("{custom_format}")]

属性添加到您的日期输入属性。

其他一些建议：

1. 在

   "//*[@id='DateOfIncident']"

   等 XPath 前面加上

   .

   即可得到

   ".//{...}"

   。
2. 不要使用

   [FindByXPath("//*[@id='DateOfIncident']")]

   ，而是使用

   [FindById("DateOfIncident")]

   。
3. 无需在

   Clear

   之前调用

   Set

   方法，如下所示：

   .CurrentIncidentDate.Clear().CurrentIncidentDate.Set(t)

   。

   Set

   方法清除然后键入新文本。如果您不想在输入前清除输入内容，请使用

   Type

   方法。