等待Cypress each()函数完成

Question

我正在调用一个函数populateArray，该函数使用children()函数拾取页面上的元素。我想将属性值存储到一个使用each()的函数中。以下是我正在做的

static populateArray(){
let arr = []
cy.xpath(NODE_PREVIEW_PANEL).children(NODE_TYPE)
.each((element, index, list) => arr.push(cy.wrap(element).invoke('attr', 'data-testid')))
}

问题是当我通过将这个函数分配给一个变量来调用它时

actualArray = ArticlePage.populateArray()

它不是在等待底层each((函数完全完成。它只是选择部分值并继续。我希望actualArray只有在完全解析populateArray之后才有值。

Answer 1

使用Cypress.Promise怎么样？从文档

Cypress是promise感知的，因此如果您从.then((等命令内部返回promise，Cypress将不会继续，直到这些promise解决

const populateArray = () => {
return new Cypress.Promise((resolve, reject) => {
let arr = []
cy.xpath('//ul')
.children('li')
.each(element => arr.push(element.attr('data-testid'))) // NOTE different push
.then(() => {
return resolve(arr)
})
})
}

带有等待的呼叫(测试必须是异步的(，

it('gets the array', async () => {
const actualArray = await ArticlePage.populateArray();
expect(actualArray).to.deep.equal(['1', '2', '3']);  // whatever is in 'data-testid'
})

Answer 2

由于.each()可以链接-您可以链接一个.然后只需键入.each()进程完成后需要执行的代码：

static populateArray(){
let arr = []
cy.xpath(NODE_PREVIEW_PANEL).children(NODE_TYPE)
.each((element, index, list) => arr.push(arr.push(element.attr('data-testid')))
.then(list => {
cy.wrap(arr).as('actualArray')
})
}

并且在测试代码中

populateArray()
cy.get('@actualArray')
.then(actualArray => {
//code that needs the array data
})

Answer 3

使用自定义命令的另一个答案

Cypress.Commands.add("populateArray", (parentSelector, childSelector, arrayAllias) => {
let arr = []
cy.xpath(parentSelector).children(childSelector)
.each((element, index, list) => arr.push(element.attr('data-testid')))
.then(()=>{
cy.wrap(arr).as(arrayAllias)
})
})

并且在测试代码中

cy.populateArray(NODE_PREVIEW_PANEL, NODE_TYPE, 'actualArray')
cy.get('@actualArray')
.then(actualArray => {
//code that needs the array data
})