Cypress - 从范围选择器中选择日期

Question

我正在尝试在范围选择器中添加两个日期。

这是选择日期的命令：

Cypress.Commands.add('setDatePickerDate', (selector, date) => {
  const monthsShort = [
    'janv.',
    'févr.',
    'mars',
    'avril',
    'mai',
    'juin',
    'juil.',
    'août',
    'sept.',
    'oct.',
    'nov.',
    'déc.',
  ];
  const month = monthsShort[date.getMonth()];
  const day = date.getDate();
  const year = date.getFullYear();
  cy.getBySel(selector).should('not.be.disabled');
  cy.getBySel(selector).click();
  // select year
  cy.get('.mantine-CalendarHeader-calendarHeaderLevel').click();
  cy.get('.mantine-DatePicker-calendarHeaderLevel').click();
  recurse(
    () => cy.get('.mantine-YearsList-yearsListCell').invoke('text'),
    (n) => {
      if (!n.includes(year)) {
        cy.get('.mantine-DatePicker-calendarHeaderControlIcon').first().click();
        return false;
      }
      cy.get('.mantine-YearsList-yearsListCell').contains(year).click();
      return true;
    },
    {
      limit: 12,
    }
  );
  // select month
  cy.get('.mantine-MonthsList-monthsListCell').contains(month).click();
  // select day
  cy.get('.mantine-DatePicker-day')
    .contains(new RegExp(`^(${day})`))
    .click();
});

这是我测试中的代码：

    cy.setDatePickerDate(
      'filter-date',
      new Date('2021-07-01'),
      new Date('2021-07-05')
    );

我的问题是，在日期字段中仅填写日期 2021-07-01，而不填写其他日期。

请问我做错了什么有什么建议吗？

Answer 1

您的自定义命令不支持传入多个日期。您可以运行该命令两次：

cy.setDatePickerDate('filter-date', new Date('2021-07-01');
cy.setDatePickerDate('filter-date', new Date('2021-07-05');

或者，您可以更改自定义命令以接受日期数组。

Cypress.Commands.add('setDatePickerDate', (selector, dates) => {
  cy.wrap(dates).each((date) => {
    // code to execute
  });
});

cy.setDatePickDate('filter-date', 
                   [new Date('2021-07-01'), new Date('2021-07-05')]
);