如何在Cypress中获取日期选择器值并实现日期输入

问题分析 #

你的代码存在两个核心问题：

1. 方法参数不匹配：clickexpirydate方法仅定义了一个date参数，但测试用例中调用时传入了两个参数（'type=date'和'2023-01-07'），导致实际传入的日期参数错误，自然无法正确输入。
2. 原生日期输入框的交互问题：对于原生<input type="date">元素，直接使用.type()有时会因为控件的原生行为导致输入失效，更可靠的方式是直接设置元素的value属性。

修正后的代码示例 #

1. 调整SettingPage类

export class SettingPage {
  doc_expirydate = '#txtDocExpiryDate'

  // 修正参数，同时优化日期输入逻辑
  setExpiryDate(date) { 
    // 直接设置value属性，适配原生date输入框
    cy.get(this.doc_expirydate).invoke('val', date)
    // 触发change事件，确保页面感知到日期变更
    cy.get(this.doc_expirydate).trigger('change')
  }

  // 获取当前显示的日期
  getExpiryDate() {
    return cy.get(this.doc_expirydate).invoke('val')
  }
}

2. 修正测试用例调用

import { SettingPage } from "./Pages/setting_page"
const settingpage = new SettingPage()

it('Setting_Page', function () {
  // 直接传入符合YYYY-MM-DD格式的目标日期
  settingpage.setExpiryDate('2023-01-07')

  // 验证日期是否正确设置
  settingpage.getExpiryDate().should('eq', '2023-01-07')
})

额外说明 #

• 原生type="date"输入框要求value属性必须是YYYY-MM-DD格式，确保传入的日期符合该规范。
• 如果你的日期选择器是自定义组件（而非原生input），则需要根据组件的交互逻辑调整，比如点击日历面板选择日期，但从截图判断你的控件是原生日期输入框，上述方案适用。

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