如何在 Cypress 中实现获取表格单元格的命令？

Question

我想用这个界面创建一个命令：

cy.getTableCell({ column: 'Name', row: 42 }).contains('Douglas Adams')

where将返回与表的第 42 行对应的getTableCell表单元格 ( ) 上的列。我想出了这个实现：td'Name'

type GetTableCellParams = {
  columnName: string;
  rowIndex: number;
};

Cypress.Commands.add(
  'getTableCell',
  ({ columnName, rowIndex }: GetTableCellParams) => {
    cy.contains('th', columnName)
      .invoke('index')
      .then((index) => {
        cy.get('tr')
          .eq(rowIndex)
          .within((row) => {
            return cy.get('td').eq(index);
          });
      });
  }
);

它确实找到了正确的表格单元格。但是，由于它在回调中执行此操作，因此我无法对其执行任何操作 - 我希望能够调用可链接的方法，例如contains、click等。我如何重构它以便调用者可以访问此元素，能够调用contains、click和其他可链接的方法吗？

我还可以在函数可读性方面使用一些帮助。它看起来一团糟 - 我猜问题出在嵌套回调上......

Answer 1

它完全没有回报。

Cypress 使用命令堆栈，堆栈中的最后一个主题是返回的值。

问题.within()是它结束后又恢复了主题。

Cypress.Commands.add('getTableCell', ({ columnName, rowIndex }: GetTableCellParams) => {

  cy.contains('th', columnName).invoke('index')
    .then(colIndex => {
      cy.get('tr').eq(rowIndex)
        .find('td').eq(colIndex)
    });
  }
)

为了说明这一点，请尝试为 the<td>加上别名.within()，然后获取别名值

Cypress.Commands.add('getTableCell', ({ columnName, rowIndex }) => {
  cy.contains('th', columnName)
    .invoke('index')
    .then(colIndex => {
      cy.get('tr')
        .eq(rowIndex)
        .within((row) => {
          cy.get('td').eq(colIndex).as('cell')
        })
        cy.get('@cell')   // last command, it's result will be returned
    });
  }
)