如何在Cypress的each循环内获取子元素并执行点击操作？

我有一个表格，首列单元格包含div和图片，需要点击该div，同时还要对第三列执行测试操作，因此选择器仅写到td层级未包含div。现有如下each循环代码，想在index为10时获取td内的div并点击，尝试了cy.wrap($el).get("div")和cy.wrap($el).children("div")但均无效。已知通过cy.get("fcsky-shared-table cdk-virtual-scroll-viewport mat-table tr.mat-row td:nth-child(1) div").eq(10).click()可实现需求，想询问是否能在each循环内完成该操作。

初始代码：

cy.get("f-shared-table cdk-virtual-scroll-viewport mat-table tr.mat-row td:nth-child(1)").each(($el, index, $list) => {
    if(index === 10) {
        // how to get the div to click it
    }
})

尝试的代码：

cy.get("f-shared-table cdk-virtual-scroll-viewport mat-table tr.mat-row td:nth-child(1)").each(($el, index, $list) => {
    if(index === 10) {
        cy.wrap($el).get("div").click() // not working
        cy.wrap($el).children("div").click() // not working
    }
})

可以在each循环内完成操作，问题出在选择器的使用逻辑上：

• cy.wrap($el).get("div")会从整个文档根节点重新查找div，并非限定在当前$el（即目标td）范围内，所以无法定位到目标元素。
• cy.wrap($el).children("div")仅查找td的直接子元素，若div嵌套在td内部的其他元素中，就会找不到。

正确的做法是使用find()方法，它会在当前元素的所有后代节点中查找匹配元素：

cy.get("f-shared-table cdk-virtual-scroll-viewport mat-table tr.mat-row td:nth-child(1)").each(($el, index, $list) => {
    if(index === 10) {
        cy.wrap($el).find("div").click() // 成功获取td内的div并点击
    }
})

如果遇到元素加载延迟的情况，可以添加断言确保元素存在后再执行点击：

cy.get("f-shared-table cdk-virtual-scroll-viewport mat-table tr.mat-row td:nth-child(1)").each(($el, index, $list) => {
    if(index === 10) {
        cy.wrap($el).find("div").should("exist").click()
    }
})

内容的提问来源于stack exchange，提问作者Achal Utkarsh