如何在Cypress中将ag-grid表头行转为数组并返回赋值

问题分析 #

你原来的代码用invoke('text')会把所有表头单元格的文本拼接成一个字符串，自然没法得到数组。得逐个获取每个表头单元格的文本再收集起来。

正确代码实现 #

方法1：直接在回调里处理数组

cy.get("#myGrid").find('.ag-header-cell').each(($el, index, $list) => {
  // 逐个获取每个表头单元格的文本，存入数组
  return Cypress.$($el).text().trim()
}).then(headArr => {
  // 这里headArr就是整理好的表头数组
  console.log(headArr)
  // 后续可以直接在这里使用这个数组做断言或其他操作
})

方法2：把数组存为Cypress别名，后续随时调用

如果需要在多个地方使用这个数组，可以用.as()存别名：

cy.get("#myGrid").find('.ag-header-cell').each(($el) => {
  return Cypress.$($el).text().trim()
}).as('headerArray')

// 后续用@headerArray取出
cy.get('@headerArray').then(headArr => {
  // 使用数组，比如断言表头是否符合预期
  expect(headArr).to.deep.equal(['列1', '列2', '列3'])
})

关键说明 #

• each()会遍历每个匹配到的DOM元素，返回每个元素处理后的文本，最后.then()里就能拿到完整的数组。
• Cypress是异步操作，不能直接把数组赋值给普通变量（比如let arr; cy.get(...).then(res => arr = res)，后续同步代码里arr会是undefined），必须在.then()回调或者通过别名来使用数组。

内容的提问来源于stack exchange，提问作者Anil Tiwari