使用 cypress JS 从一系列元素中获取文本到数组

Question

我正在尝试从 table 行中的一系列 <th> 元素中获取逗号分隔的文本。我尝试对来自 Cypress 的 3 个嵌套循环使用 element.each() 方法，它非常慢并且抛出错误（cy.click() 失败，因为这个元素与 DOM 分离。）偶尔在不同的测试级别（有时通过没有任何问题）。我认为这可能是由于使用上述方法捕获值的大量不必要循环造成的。

代码

const verifyLeaderBoard = () => {
    let ClassName;
    let clickedElement;
    LeaderBoard.elementCollections('rows').each(($rowelements, indexrow, $list) => {
        cy.wrap($rowelements).invoke('attr', 'class').then((TeeTimeTableRowClass) => {
            ClassName = TeeTimeTableRowClass || 'Empty';
            cy.wait(10).then(() => {
                if ((ClassName.indexOf('accordion-toggle') !== -1)) {
                    cy.wait(5).then(() => {
                        LeaderBoard.inputFields('playerserach').focus().wait(100);
                    }).then(() => {
                        cy.wrap($rowelements).click({ force: true }).wait(1000);
                        clickedElement = $rowelements;
                    })
                } else if ((ClassName.indexOf('hidden-row-wrap') !== -1)) {
                    cy.wait(10).then(() => {
                        cy.wrap($rowelements).xpath('.//div[@class="table-responsive-xl"]//table[@class="table score-table"]//thead//tr')
                            .each(($HoleandParElement, index, $list) => {
                                cy.wrap($HoleandParElement).xpath('.//th')
                                    .each(($HoleandParElementtabledata, index, $list) => {
                                        cy.wrap($HoleandParElementtabledata).invoke('text')
                                            .then(texts => {
                                                console.log(texts)
                                            })
                                    })
                            })
                    }).then(() => {
                        cy.wrap(clickedElement).click({ force: true }).wait(100);
                    })
                }
            })
        })
    })
}

错误

如果我如下跳过最后一个元素.each()，它可以正常工作，没有错误。

代码

const verifyLeaderBoard = () => {
    let ClassName;
    let clickedElement;
    LeaderBoard.elementCollections('rows').each(($rowelements, indexrow, $list) => {
        cy.wrap($rowelements).invoke('attr', 'class').then((TeeTimeTableRowClass) => {
            ClassName = TeeTimeTableRowClass || 'Empty';
            cy.wait(10).then(() => {
                if ((ClassName.indexOf('accordion-toggle') !== -1)) {
                    cy.wait(5).then(() => {
                        LeaderBoard.inputFields('playerserach').focus().wait(100);
                    }).then(() => {
                        cy.wrap($rowelements).click({ force: true }).wait(1000);
                        clickedElement = $rowelements;
                    })
                } else if ((ClassName.indexOf('hidden-row-wrap') !== -1)) {
                    cy.wait(10).then(() => {
                        cy.wrap($rowelements).xpath('.//div[@class="table-responsive-xl"]//table[@class="table score-table"]//thead//tr')
                            .each(($HoleandParElement, index, $list) => {
                                cy.wrap($HoleandParElement).invoke('text')
                                    .then(texts => {
                                        console.log(texts)
                                    })
                            })
                    }).then(() => {
                        cy.wrap(clickedElement).click({ force: true }).wait(100);
                    })
                }
            })
        })
    })
}

但在这种情况下，单独的 <th> 标签中的所有数据都被合并，没有一个 space （不可能按字符串拆分）

我正在寻找一种解决方案来捕获 <th> 标签中的所有文本，并使用特殊字符来分隔每个值。

HTML结构

Answer 1

使用下面的行将所有内部文本收集到数组中。

Cypress._.map(Cypress.$.makeArray($els), 'innerText')

使用上述解决方案的以下代码生成包含 <th> 标签中所有内部文本的数组，这肯定比对大量元素使用 .each 更快。

const verifyLeaderBoard = () => {
    let ClassName;
    let clickedElement;
    LeaderBoard.elementCollections('rows').each(($rowelements, indexrow, $list) => {
        cy.wrap($rowelements).invoke('attr', 'class').then((TeeTimeTableRowClass) => {
            ClassName = TeeTimeTableRowClass || 'Empty';
            cy.wait(10).then(() => {
                if ((ClassName.indexOf('accordion-toggle') !== -1)) {
                    cy.wait(5).then(() => {
                        LeaderBoard.inputFields('playerserach').focus().wait(100);
                    }).then(() => {
                        cy.wrap($rowelements).click({ force: true }).wait(1000);
                        clickedElement = $rowelements;
                    });
                } else if ((ClassName.indexOf('hidden-row-wrap') !== -1)) {
                    cy.wait(10).then(() => {
                        cy.wrap($rowelements).xpath('.//div[@class="table-responsive-xl"]//table[@class="table score-table"]//thead//tr')
                            .each(($HoleandParElement, index, $list) => {
                                cy.wrap($HoleandParElement).xpath('.//th').then(($els) => {
                                    // jQuery => Array => get "innerText" from each
                                    let elementsArray = Cypress._.map(Cypress.$.makeArray($els), 'innerText');
                                    console.log('elementsArray');
                                    console.log([...elementsArray.entries()]);
                                  });
                            });
                    }).then(() => {
                        cy.wrap(clickedElement).click({ force: true }).wait(100);
                    });
                };
            });
        });
    });
};

使用 cypress JS 从一系列元素中获取文本到数组

Get text from series of elements to an array using cypress JS

javascript

cypress