Cypress自动化：如何点击fc-timegrid行列交叉的时段槽？

DevOps 小满

2026-7-22

解决Cypress中点击网格行列交叉点的问题

不要依赖固定的nth-child索引（行列位置可能随动态加载、布局调整发生变化），改用文本匹配定位目标行和列，再找到交叉单元格，以下是可靠的实现方案：

方法1：通过表头列索引定位

先找到目标活动（Spinning）在表头的列位置，再匹配对应时段（11am）的行，最后点击交叉单元格：

// 等待表格加载完成
cy.get('.fc-scrollgrid').should('be.visible');

// 获取Spinning列的索引
cy.get('.fc-scrollgrid thead th')
  .contains('Spinning')
  .invoke('index')
  .then(columnIndex => {
    // 定位11am所在的行，点击对应列的单元格
    cy.contains('.fc-scrollgrid tbody tr', '11am')
      .find('td')
      .eq(columnIndex)
      .click();
  });

方法2：通过行过滤+列匹配

如果时段文本仅在行内特定单元格（比如行首td）中显示，可用filter精准定位目标行：

cy.get('.fc-scrollgrid').should('be.visible');

// 过滤出包含11am的行
cy.get('.fc-scrollgrid tbody tr')
  .filter(':has(td:contains("11am"))')
  .then($targetRow => {
    // 找到Spinning列的索引
    cy.get('.fc-scrollgrid thead th:contains("Spinning")')
      .invoke('index')
      .then(colIndex => {
        // 点击交叉单元格
        cy.wrap($targetRow).find('td').eq(colIndex).click();
      });
  });