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

Question

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

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

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

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)
    });
  }
)

---

为了说明这一点，请尝试为 <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
    });
  }
)