使用Cypress JS提取th元素文本到数组 解决DOM分离及文本合并问题

• 报错原因：多层嵌套的.each()属于异步Cypress命令，执行周期长，过程中如果有点击操作触发DOM重渲染，之前获取的元素引用就会脱离DOM，触发报错
• 性能问题：多层嵌套循环+大量冗余硬等待导致执行效率极低
• 文本合并问题：直接调用tr的invoke('text')会把所有子元素文本无间隔拼接，无法拆分独立th的值

完全替换hidden-row-wrap分支下的嵌套循环逻辑，一次性获取所有th元素后用原生JS同步处理文本，代码如下：

const verifyLeaderBoard = () => {
    let ClassName;
    let clickedElement;
    LeaderBoard.elementCollections('rows').each(($rowelements, indexrow, $list) => {
        cy.wrap($rowelements).invoke('attr', 'class').then((TeeTimeTableRowClass) => {
            ClassName = TeeTimeTableRowClass || 'Empty';
            if ((ClassName.indexOf('accordion-toggle') !== -1)) {
                LeaderBoard.inputFields('playerserach').focus().wait(100);
                cy.wrap($rowelements).click({ force: true }).wait(1000);
                clickedElement = $rowelements;
            } else if ((ClassName.indexOf('hidden-row-wrap') !== -1)) {
                cy.wrap($rowelements).xpath('.//div[@class="table-responsive-xl"]//table[@class="table score-table"]//thead//tr')
                .find('th')
                .then($thList => {
                    // 同步提取所有th的文本，用逗号拼接
                    const thTextArr = $thList.map((_, el) => el.textContent.trim()).get()
                    const separatedText = thTextArr.join(',')
                    // 这里拿到的就是逗号分隔的th文本，可直接用于后续断言或处理
                    console.log(separatedText)
                })
                .then(() => {
                    cy.wrap(clickedElement).click({ force: true }).wait(100);
                })
            }
        })
    })
}

• 消除了多层异步嵌套循环，大幅提升执行速度
• 一次性获取所有th元素后同步处理文本，避免循环过程中DOM更新导致的元素脱离问题
• 可自定义分隔符，只要修改join()的参数即可换成任意特殊字符分隔

内容的提问来源于stack exchange，提问作者Nipuna Madusanka