React+TypeScript项目中如何用Cypress验证图片排序功能？

核心思路 #

从每个图片卡片中提取日期信息，转换为可比较的Date对象，然后验证这些日期的顺序是否符合「最早在前」（升序）或「最新在前」（降序）的预期。

步骤1：替换硬等待，改用可靠的同步逻辑 #

先把测试里的cy.wait(3000)替换为更稳定的等待方式，避免因渲染或网络延迟导致断言失败：

• 若排序依赖后端API，用cy.intercept拦截请求并等待完成：

// 测试前拦截排序接口
beforeEach(() => {
  cy.intercept('GET', '/api/files/*').as('getSortedFiles'); // 替换为实际的排序API路径
});

// 点击排序按钮后等待接口返回
cy.get('[data-cy=file-order-old]').click();
cy.wait('@getSortedFiles');

• 若排序是前端本地处理，可等待列表元素更新：

cy.get('[data-cy=file-order-old]').click();
cy.get('[data-cy="each-item-file"]').should('have.length.greaterThan', 0);

步骤2：提取日期并验证排序顺序 #

方式一：不修改组件（使用现有选择器）

根据你的FileCard组件结构，日期文本位于className="fileDataMarginTop"的元素中，直接提取验证：

it('should sort files from oldest to newest when clicking "oldest" button', () => {
  cy.get('[data-cy=projects-card-table]').contains('E2E-TEST').click();
  cy.get('[data-cy="header-search-bar"]').click();
  
  cy.get('[data-cy=file-order-old]').click();
  cy.wait('@getSortedFiles'); // 替换为你的等待逻辑
  
  // 提取所有卡片的日期并转为Date对象
  cy.get('[data-cy="each-item-file"]')
    .find('.fileDataMarginTop')
    .then($dateElements => {
      const dates = Array.from($dateElements).map(el => {
        const dateText = el.textContent.trim();
        // 根据formatFullDate的输出格式转换，若为标准ISO格式直接用new Date即可
        return new Date(dateText);
      });
      
      // 验证日期升序（最早在前）
      for (let i = 0; i < dates.length - 1; i++) {
        expect(dates[i]).to.be.lessThan(dates[i + 1]);
      }
    });
});

方式二：修改组件（添加专属data-cy，更稳定）

为日期元素添加data-cy属性，避免样式类名变更导致选择器失效：
在FileCard的日期Typography中添加标记：

<Typography
  variant='h6'
  className={classes.fileDataMarginTop}
  color='primary'
  data-cy="file-item-date" // 添加此行
>
  {`${formatFullDate(new Date(file.file.date), i18n.language)}`}
</Typography>

测试代码中使用更可靠的选择器：

cy.get('[data-cy="each-item-file"]')
  .find('[data-cy="file-item-date"]')
  .then($dateElements => {
    const dates = Array.from($dateElements).map(el => new Date(el.textContent.trim()));
    for (let i = 0; i < dates.length - 1; i++) {
      expect(dates[i]).to.be.lessThan(dates[i + 1]);
    }
  });

处理国际化日期格式 #

如果formatFullDate输出本地化日期（比如中文的"2024年5月20日 14:30"），需自定义解析函数：

// 示例：解析中文格式日期
function parseChineseDate(dateText) {
  const match = dateText.match(/(\d{4})年(\d{1,2})月(\d{1,2})日 (\d{1,2}):(\d{1,2})/);
  if (match) {
    const [, year, month, day, hour, minute] = match;
    return new Date(year, month - 1, day, hour, minute); // 月份是0-based，需减1
  }
  throw new Error(`无法解析日期：${dateText}`);
}

// 测试中使用
const dates = Array.from($dateElements).map(el => parseChineseDate(el.textContent.trim()));

验证「最新」排序的逻辑 #

若要验证「最新」按钮的降序排列，只需修改断言：

for (let i = 0; i < dates.length - 1; i++) {
  expect(dates[i]).to.be.greaterThan(dates[i + 1]);
}

内容的提问来源于stack exchange，提问作者Jonathan Batey